Change styles to less theme. Make some fixes in browse-community. Home and learn how alignments

This commit is contained in:
Konstantinos Triantafyllou 2022-06-17 19:49:40 +03:00
parent 51438b8e73
commit 2635dc2a67
19 changed files with 100 additions and 177 deletions

View File

@ -45,7 +45,8 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"src/styles.css", "src/styles.less",
"src/deprecated.css",
"src/material.scss" "src/material.scss"
], ],
"scripts": [ "scripts": [

View File

@ -43,6 +43,7 @@
"rxjs": "^6.5.1", "rxjs": "^6.5.1",
"ts-md5": "^1.2.0", "ts-md5": "^1.2.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"uikit": "^3.12.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"
}, },
"devDependencies": { "devDependencies": {
@ -51,11 +52,11 @@
"@angular/compiler-cli": "~11.2.14", "@angular/compiler-cli": "~11.2.14",
"@angular/language-service": "~11.2.14", "@angular/language-service": "~11.2.14",
"@nguniversal/builders": "^11.2.1", "@nguniversal/builders": "^11.2.1",
"@types/node": "^12.11.1", "@types/compression": "^1.7.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/express": "^4.17.0", "@types/node": "^12.11.1",
"@types/compression": "^1.7.0",
"codelyzer": "^6.0.0", "codelyzer": "^6.0.0",
"jasmine-core": "~3.8.0", "jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0", "jasmine-spec-reporter": "~5.0.0",

View File

@ -32,7 +32,7 @@ import {NotificationHandler} from "./openaireLibrary/utils/notification-handler"
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<div> <div [class]="(community)?(community.communityId +'App communityApp'):'connectApp'">
<navbar *ngIf="properties && showMenu && !community && header" [portal]="properties.dashboard" [onlyTop]=false <navbar *ngIf="properties && showMenu && !community && header" [portal]="properties.dashboard" [onlyTop]=false
[userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user" [header]="header" [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user" [header]="header"
[showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="false" communityId="connect"> [showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="false" communityId="connect">
@ -193,14 +193,6 @@ export class AppComponent implements OnInit, OnDestroy {
private init() { private init() {
let communityId: string = ConnectHelper.getCommunityFromDomain(this.properties.domain); let communityId: string = ConnectHelper.getCommunityFromDomain(this.properties.domain);
this.showMenu = false; this.showMenu = false;
if(typeof document !== "undefined") {
if(communityId) {
document.body.classList.add(communityId + 'App');
document.body.classList.add('communityApp');
} else {
document.body.classList.add('connectApp');
}
}
this.initAdminToolCommunity(communityId); this.initAdminToolCommunity(communityId);
this.buildMenu(communityId); this.buildMenu(communityId);
// this.communityId = communityId; // this.communityId = communityId;

View File

@ -1,15 +1,15 @@
<a *ngIf="directLink && community" [href]="getCommunityPageUrl()" target="_blank" <a *ngIf="directLink && community" [href]="getCommunityPageUrl()" target="_blank"
class="uk-height-1-1 uk-link-reset" [ngClass]="community['status'] == 'hidden' ? 'uk-disabled' : ''"> class="uk-height-1-1 uk-link-reset">
<ng-container [ngTemplateOutlet]="card"></ng-container> <ng-container [ngTemplateOutlet]="card"></ng-container>
</a> </a>
<a *ngIf="!directLink && community" (click)="confirmModalOpen()" <a *ngIf="!directLink && community" (click)="confirmModalOpen()"
class="uk-height-1-1 uk-link-reset" [ngClass]="community['status'] == 'hidden' ? 'uk-disabled' : ''"> class="uk-height-1-1 uk-link-reset">
<ng-container [ngTemplateOutlet]="card"></ng-container> <ng-container [ngTemplateOutlet]="card"></ng-container>
</a> </a>
<ng-template #card> <ng-template #card>
<div class="uk-padding"> <div class="uk-padding">
<div *ngIf="community.isSubscribed" <div *ngIf="community.isSubscribed"
class="uk-text-background uk-text-center uk-position-top-left uk-padding-small uk-text-uppercase uk-text-bold"> class="uk-text-background uk-text-small uk-position-top-left uk-padding-small uk-text-uppercase uk-text-bold">
Member Member
</div> </div>
<div *ngIf="community.status === 'manager'" <div *ngIf="community.status === 'manager'"
@ -22,50 +22,15 @@
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.2" [flex]="true"></icon> <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">private</span> <span class="uk-text-small uk-text-capitalize">private</span>
</div> </div>
<!-- community-logo-->
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall <div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom"> uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<!-- <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank">-->
<!-- <div>-->
<!-- <img *ngIf="community.logoUrl"-->
<!-- [src]="community | logoUrl"-->
<!-- alt="{{(community.title)?community.title:community.shortTitle}} logo">-->
<!-- <span *ngIf="!community.logoUrl" class="uk-icon">-->
<!-- <svg viewBox="0 0 20 20" class="uk-width-1-1" xmlns="http://www.w3.org/2000/svg" ratio="2.5">-->
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle>-->
<!-- <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path>-->
<!-- <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path>-->
<!-- </svg>-->
<!-- </span>-->
<!-- </div>-->
<!-- </a>-->
<!-- <a *ngIf="!directLink" (click)="confirmModalOpen()">-->
<div> <div>
<img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}" <img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-max-xsmall"> alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-max-xsmall">
<!-- <span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon">-->
<!-- <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5">-->
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle>-->
<!-- <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path>-->
<!-- <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path>-->
<!-- </svg>-->
<!-- </span>-->
</div> </div>
<!-- </a>-->
</div> </div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<h3 class="uk-text-center uk-h6 uk-link" [ngClass]="(showDescription)?'uk-margin-small-bottom':''"> <h3 class="uk-text-center uk-h6 uk-link" [ngClass]="(showDescription)?'uk-margin-small-bottom':''">
<!-- <a *ngIf="directLink" [href]="getCommunityPageUrl()" class="color" target="_blank" [class.uk-text-small]="smallTitle">-->
<!-- <span *ngIf="community.title">-->
<!-- {{community.title.slice(0, thresholdTitle)}}-->
<!-- <span *ngIf="community.title.length > thresholdTitle">...</span>-->
<!-- </span>-->
<!-- <span *ngIf="!community.title && community.shortTitle">-->
<!-- {{community.shortTitle.slice(0, thresholdTitle)}}-->
<!-- <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>-->
<!-- </span>-->
<!-- </a>-->
<!-- <a *ngIf="!directLink" (click)="confirmModalOpen()" class="color" [class.uk-text-small]="smallTitle">-->
<span *ngIf="community.title"> <span *ngIf="community.title">
{{community.title.slice(0, thresholdTitle)}} {{community.title.slice(0, thresholdTitle)}}
<span *ngIf="community.title.length > thresholdTitle">...</span> <span *ngIf="community.title.length > thresholdTitle">...</span>
@ -74,32 +39,11 @@
{{community.shortTitle.slice(0, thresholdTitle)}} {{community.shortTitle.slice(0, thresholdTitle)}}
<span *ngIf="community.shortTitle.length > thresholdTitle">...</span> <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
</span> </span>
<!-- </a>-->
</h3> </h3>
<div class="uk-text-center" *ngIf="community.description != null && showDescription"> <div class="uk-text-center" *ngIf="community.description != null && showDescription">
<!-- title="{{community.description}}">-->
<span>{{_formatDescription(community.description)}}</span> <span>{{_formatDescription(community.description)}}</span>
<!-- <span>{{community.description.slice(0, thresholdDescription)}}<span-->
<!-- *ngIf="community.description.length > thresholdDescription">...</span></span>-->
</div> </div>
</div> </div>
<!-- <div>-->
<!-- <div class="uk-position-small uk-position-bottom-right">-->
<!-- <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">-->
<!-- Visit &lt;!&ndash;{{(properties.environment == 'production'&& getProductionPrefix(community.communityId).length > 0-->
<!-- ?' BETA':'')}}&ndash;&gt;-->
<!-- </a>-->
<!-- <a *ngIf="!directLink" (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">-->
<!-- Visit &lt;!&ndash;{{(properties.environment == 'production' && getProductionPrefix(community.communityId).length > 0-->
<!-- ?' BETA':'')}}&ndash;&gt;-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</ng-template> </ng-template>
<modal-alert #alertModal [overflowBody]="false" (alertOutput)="goToCommunityPage($event)"></modal-alert>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>

View File

@ -9,6 +9,7 @@ import {Subscriber} from "rxjs";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class"; import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
import {Visibility} from "../../openaireLibrary/monitor/entities/stakeholder"; import {Visibility} from "../../openaireLibrary/monitor/entities/stakeholder";
import {AlertModal} from "../../openaireLibrary/utils/modal/alert";
@Component({ @Component({
selector: 'browse-community', selector: 'browse-community',
@ -19,7 +20,7 @@ export class BrowseCommunityComponent {
@Input() public community: CommunityInfo = null; @Input() public community: CommunityInfo = null;
@Input() public showDescription: boolean = true; @Input() public showDescription: boolean = true;
@Input() public smallTitle: boolean = false; @Input() public smallTitle: boolean = false;
@ViewChild('AlertModal', { static: true }) modal; @ViewChild('alertModal', { static: true }) modal: AlertModal;
public hiddenMessage: string = "Community is hidden to registered users. It is visible only to users that have privileges to manage community; delay: 100"; public hiddenMessage: string = "Community is hidden to registered users. It is visible only to users that have privileges to manage community; delay: 100";
// cut title too // cut title too
@ -72,7 +73,7 @@ export class BrowseCommunityComponent {
this.modal.okButton = true; this.modal.okButton = true;
this.modal.alertTitle = 'You are going to visit ' + this.modal.alertTitle = 'You are going to visit ' +
((this.community.title) ? this.community.title : this.community.shortTitle) + ' Gateway'; ((this.community.title) ? this.community.title : this.community.shortTitle) + ' Gateway';
this.modal.alertMessage = false; this.modal.message = 'You will be navigated to a new tab. Are you sure that you want to proceed?'
this.modal.okButtonLeft = false; this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes'; this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No'; this.modal.cancelButtonText = 'No';

View File

@ -5,12 +5,12 @@
<div class="uk-grid uk-flex-middle" uk-grid> <div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5 uk-margin-large-bottom"> <div class="uk-width-3-5 uk-margin-large-bottom">
<h1 class="uk-heading-large" uk-scrollspy-class> <h1 class="uk-heading-large" uk-scrollspy-class>
<span class="">Build a </span><span class="uk-text-primary">Gateway</span> Build a <span class="uk-text-primary">Gateway</span>
<br/><span class=""> for your<br/>Community</span><span class="uk-text-primary">.</span> for your Community<span class="uk-text-primary">.</span>
</h1> </h1>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class> <div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>Turn Open Science into Practice.</div> <div>Turn Open Science into Practice.</div>
<div>It takes your open and divnked research outcomes.</div> <div>It takes your open and linked {{entities.RESULTS | lowercase}}.</div>
<div>A service customized to your needs.</div> <div>A service customized to your needs.</div>
</div> </div>
<div class="uk-margin-medium-top" uk-scrollspy-class> <div class="uk-margin-medium-top" uk-scrollspy-class>
@ -29,37 +29,37 @@
</div> </div>
<ng-template #scrolling_text let-position_class="position_class"> <ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0"> <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2"> <h3 class="uk-h2">
<span class="uk-text-primary">Find a repository to <br/>deposit </span> <span class="uk-text-primary">Find a repository to deposit </span>
<span>your research <br/>outcome</span> <span>your {{entities.RESULT | lowercase}}</span>
<span class="uk-text-primary">.</span> <span class="uk-text-primary">.</span>
</h3> </h3>
</div> </div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0"> <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2"> <h3 class="uk-h2">
<span class="uk-text-primary">Link your research <br/>output </span> <span class="uk-text-primary">Link your {{entities.RESULT | lowercase}} </span>
<span>with your <br/>community, funding,<br/> and other research<br/> products</span> <span>with your community, funding, and other {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span> <span class="uk-text-primary">.</span>
</h3> </h3>
</div> </div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1 99%,0"> <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2"> <h3 class="uk-h2">
<span>View community's<br/> </span> <span>View community's </span>
<span class="uk-text-primary">overview at a glance.</span> <span class="uk-text-primary">overview at a glance.</span>
</h3> </h3>
</div> </div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%,1 99%,0"> <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2"> <h3 class="uk-h2">
<span class="uk-text-primary">Search & browse </span> <span class="uk-text-primary">Search & browse </span>
<span>your<br/> community's research<br/> products</span> <span>your community's {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span> <span class="uk-text-primary">.</span>
</h3> </h3>
</div> </div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 300vh; end: 100% + 100vh - 350vh; opacity: 0,1 20%,1"> <div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 300vh; end: 100% + 100vh - 350vh; opacity: 0,1 20%,1">
<h3 class="uk-h2"> <h3 class="uk-h2">
<span class="uk-text-primary">View statistics </span> <span class="uk-text-primary">View statistics </span>
<span>for<br/> your community's<br/> research products</span> <span>for your community's {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span> <span class="uk-text-primary">.</span>
</h3> </h3>
</div> </div>
@ -111,7 +111,7 @@
<div class="uk-section uk-section-large uk-container uk-container-large"> <div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-margin-medium-top"> <div class="uk-margin-medium-top">
<h2 class="uk-h1"> <h2 class="uk-h1">
Our mission for an <br/> Open and FAIR science<span class="uk-text-primary">.</span> Our mission for an Open and FAIR science<span class="uk-text-primary">.</span>
</h2> </h2>
<div class="uk-margin-large-top"> <div class="uk-margin-large-top">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid" uk-grid="" <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid" uk-grid=""
@ -127,8 +127,8 @@
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center"> <div class="target uk-text-center">
<h3 class="uk-6 uk-card-title uk-margin-small-bottom">A Virtual Research Environment</h3> <h3 class="uk-6 uk-card-title uk-margin-small-bottom">A Virtual Research Environment</h3>
<div>An overlay platform making it easy to share, link, disseminate and monitor all your publications, <div>An overlay platform making it easy to share, link, disseminate and monitor all your {{entities.PUBLICATIONS | lowercase}},
data, software, methods. In one place. {{entities.DATASETS | lowercase}}, {{entities.SOFTWARE | lowercase}}, methods. In one place.
</div> </div>
</div> </div>
<hr/> <hr/>
@ -230,12 +230,12 @@
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages> <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div> </div>
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large"> <div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large">
<h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2> <h2 class="uk-h1">Community Gateways already in action<span class="uk-text-primary">.</span></h2>
<div class="uk-margin-large-top uk-margin-large-bottom"> <div class="uk-margin-large-top uk-margin-large-bottom">
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0, 4); let i = index"> <div *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -272,13 +272,12 @@
</div> </div>
</div> </div>
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center"> <div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-flex uk-flex-middle uk-flex-column">
<h2 class="uk-h2"> <h2 class="uk-text-center uk-width-3-4@m">
Let us Help you Develop a<br/>Collaborative Science<br/> <div>Let us Help you Develop a Collaborative Science Gateway<span class="uk-text-primary">.</span></div>
Gateway<span class="uk-text-primary">.</span> <div>It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span></div>
It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span>
</h2> </h2>
<a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">CONTACT US</a> <a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">Contact us</a>
</div> </div>
</div> </div>

View File

@ -17,6 +17,8 @@ import {Subscriber} from "rxjs";
import {Session, User} from "../openaireLibrary/login/utils/helper.class"; import {Session, User} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {QuickContactService} from "../openaireLibrary/sharedComponents/quick-contact/quick-contact.service"; import {QuickContactService} from "../openaireLibrary/sharedComponents/quick-contact/quick-contact.service";
import {StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder";
import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
@Component({ @Component({
selector: 'communities', selector: 'communities',
@ -27,10 +29,8 @@ import {QuickContactService} from "../openaireLibrary/sharedComponents/quick-con
export class CommunitiesComponent implements OnInit, OnDestroy, AfterViewInit { export class CommunitiesComponent implements OnInit, OnDestroy, AfterViewInit {
private subscriptions = []; private subscriptions = [];
private user: User; private user: User;
public pageTitle = "OpenAIRE" public pageTitle = "OpenAIRE"
public researchCommunities: CommunityInfo[] = []; public researchCommunities: CommunityInfo[] = [];
public gifs: { "gif": string, "header": string, "text" }[] = [];
public pageContents = null; public pageContents = null;
public divContents = null; public divContents = null;
// Message variables // Message variables
@ -42,7 +42,7 @@ export class CommunitiesComponent implements OnInit, OnDestroy, AfterViewInit {
public showQuickContact: boolean = true; public showQuickContact: boolean = true;
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>; @ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ViewChild('contact') contact: ElementRef; @ViewChild('contact') contact: ElementRef;
public entities = OpenaireEntities;
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public keyword: string = ""; public keyword: string = "";
public type: string = "all"; public type: string = "all";
@ -86,7 +86,6 @@ export class CommunitiesComponent implements OnInit, OnDestroy, AfterViewInit {
error => { error => {
this.getCommunities(); this.getCommunities();
})); }));
this.createGifs();
//this.getDivContents(); //this.getDivContents();
this.getPageContents(); this.getPageContents();
} }
@ -199,32 +198,8 @@ export class CommunitiesComponent implements OnInit, OnDestroy, AfterViewInit {
)); ));
} }
private createGifs() { hasPermission(communityInfo: CommunityInfo) {
this.gifs.push({ return communityInfo.status === "all" || (communityInfo.status === "manager" && communityInfo.isManager);
gif: "assets/connect-assets/home/gifs/deposit.gif",
header: "Find a repository to deposit your research outcome",
text: "This is OpenAIREs key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
});
this.gifs.push({
gif: "assets/connect-assets/home/gifs/link.gif",
header: "Link your research output with your community, funding, and other research products",
text: "This is OpenAIREs key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
});
this.gifs.push({
gif: "assets/connect-assets/home/gifs/overview.gif",
header: "View community's overview at a glance",
text: "This is OpenAIREs key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
});
this.gifs.push({
gif: "assets/connect-assets/home/gifs/results.gif",
header: "Search & browse your community's research products. ",
text: "This is OpenAIREs key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
});
this.gifs.push({
gif: "assets/connect-assets/home/gifs/graph-analysis.gif",
header: "View statistics for your community's research products.",
text: "This is OpenAIREs key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
});
} }
private sort(results: CommunityInfo[]) { private sort(results: CommunityInfo[]) {

View File

@ -3,4 +3,5 @@
background-size: auto; background-size: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left 90%; background-position: left 90%;
min-height: 100vh;
} }

View File

@ -95,7 +95,7 @@ import {properties} from "../../environments/environment";
<div class="uk-margin-medium-bottom"> <div class="uk-margin-medium-bottom">
Here are the most important questions that the OpenAIRE team will ask you, in order to understand your scope and goals: Here are the most important questions that the OpenAIRE team will ask you, in order to understand your scope and goals:
</div> </div>
<ul class="uk-list uk-list-disc uk-list-primary"> <ul class="uk-list uk-list-bullet uk-list-primary">
<li class="uk-margin-small-bottom"> <li class="uk-margin-small-bottom">
Do you want a gateway, where researchers can have access to all research products of a discipline? Do you want a gateway that gathers any research outcome, produced thanks to the funding and services of a given research infrastructure? Do you want a gateway, where researchers can have access to all research products of a discipline? Do you want a gateway that gathers any research outcome, produced thanks to the funding and services of a given research infrastructure?
</li> </li>

View File

@ -21,7 +21,7 @@
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of managerOfCommunities.slice(0, 4); let i = index"> <div *ngFor="let community of managerOfCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -40,7 +40,7 @@
<div class="uk-hidden@xl"> <div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of managerOfCommunities.slice(0, 3); let i = index"> <div *ngFor="let community of managerOfCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -68,7 +68,7 @@
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of subscriberOfCommunities.slice(0, 4); let i = index"> <div *ngFor="let community of subscriberOfCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -87,7 +87,7 @@
<div class="uk-hidden@xl"> <div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of subscriberOfCommunities.slice(0, 3); let i = index"> <div *ngFor="let community of subscriberOfCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -123,7 +123,7 @@
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0, 4); let i = index"> <div *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
@ -142,7 +142,7 @@
<div class="uk-hidden@xl"> <div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0, 3); let i = index"> <div *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
<browse-community [community]=community></browse-community> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>

View File

@ -98,6 +98,10 @@ export class MyCommunitiesComponent {
})); }));
} }
hasPermission(communityInfo: CommunityInfo) {
return communityInfo.status === "all" || (communityInfo.status === "manager" && communityInfo.isManager);
}
public getCommunities() { public getCommunities() {
this.loading = true; this.loading = true;
this.status = this.errorCodes.LOADING; this.status = this.errorCodes.LOADING;

@ -1 +1 @@
Subproject commit 0bd6b3cfb1b1d30c276693d06a2c7234f0df5d0b Subproject commit d42edec5392ab58751f8e67b864cad7343666bd5

@ -1 +1 @@
Subproject commit b261d0f8459d21deddefc60765b3013815f1b865 Subproject commit 7d090b046beccbf906ceedf8a876f29cd883ac17

View File

@ -3,35 +3,34 @@ Define variables for connect
Custom connect css Custom connect css
*/ */
.connectApp { .connectApp {
/*buttons*/ /* Import OpenAIRE theme*/
--button-primary-background: var(--connect-color); @import (multiple) "~src/assets/openaire-theme/less/_import";
--button-primary-background-image: linear-gradient(110deg, var(--connect-light-color) 0%, var(--connect-dark-color) 100%);
--button-primary-color: var(--text-default-color);
--button-secondary-background: var(--light-color);
--button-secondary-background-image: none;
--button-secondary-border-color: var(--grey-color);
--button-secondary-color: var(--grey-color);
--button-secondary-background-hover: var(--secondary-color);
--button-secondary-border-color-hover: var(--secondary-color);
--button-secondary-background-image-hover: none;
--button-secondary-color-hover: var(--light-color);
/*backgrounds*/ /** Global */
--background-primary: var(--connect-color); @global-primary-gradient: linear-gradient(110deg, @connect-light-color 0%, @connect-dark-color 100%);
--background-primary-rgb: var(--connect-color-rgb);
--background-primary-image:none;
--background-secondary: var(--grey-color);
--background-secondary-image:none;
/*fonts*/ /** Background*/
--text-primary-color:var(--connect-color); @background-primary-background: @connect-color;
--text-gradient-color: linear-gradient(110deg, var(--connect-light-color) 0%, var(--connect-dark-color) 100%);
--text-secondary-color: var(--primary-color);
}
.connectApp .search-form { /** Buttons */
background-color: rgba(var(--secondary-color-rgb), 0.2); @button-primary-background: @connect-color;
background-image: none; @button-primary-color: @global-color;
@button-secondary-border: @global-color;
@button-secondary-color: @global-color;
@button-secondary-hover-background: @global-secondary-background;
@button-secondary-hover-background-gradient: none;
@button-secondary-active-background: @global-secondary-background;
@button-secondary-active-background-gradient: none;
/** Label */
@label-secondary-color: @connect-color;
@label-secondary-border: @connect-color;
/** Text */
@text-primary-color: @connect-color;
@text-background-color: @connect-color;
@text-secondary-color: @primary-color;
@inverse-text-primary-color: @connect-color;
} }
/*.whiteBackground { /*.whiteBackground {

@ -1 +1 @@
Subproject commit bd15bab85dde4018155a631d9cf6ecdfe98ebe9a Subproject commit 91ffc2ccce484309c2fd27508785172255783ae3

8
src/deprecated.css Normal file
View File

@ -0,0 +1,8 @@
@import "assets/openaire-theme/css/structure/variables.css";
@import "assets/openaire-theme/css/openaire.css";
@import "assets/common-assets/library.css";
.connectApp {
/* Search */
--search-form-background: rgba(var(--secondary-color-rgb), 0.2);
}

View File

@ -1,5 +0,0 @@
/* You can add global styles to this file, and also import other style files */
@import "assets/openaire-theme/css/import.css";
@import "assets/common-assets/library.css";
@import "assets/common-assets/common/custom.css";
@import "assets/connect-custom.css";

3
src/styles.less Normal file
View File

@ -0,0 +1,3 @@
/* You can add global styles to this file, and also import other style files */
@import "~src/assets/openaire-theme/less/_import";
@import "assets/connect-custom";