MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 13 Wiki Activity

[Trunk|Connect]: 1. Home page: Change cards view. 2. Affiliations: Change view of cards, make logo take 100% of width. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56749 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-07-24 12:24:44 +00:00
parent e405356778
commit dd8011f5ff
5 changed files with 318 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/affiliations/affiliations.component.html
View File

@ -1,13 +1,22 @@
<ng-template #card let-organization="organization" let-fullView="fullView">
<div class="uk-card-media-top affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-small">
<img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo" width="80" height="80">
<span *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
</span>
<div class="affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
[ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
<div class="uk-align-center">
<img *ngIf="organization.logo_url != null && organization.logo_url != '' "
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
<span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
r="1.1"></circle><rect
fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
stroke-width="1.01"
points="4,13 8,9 13,14"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
</span>
</div>
</div>
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-small">
<span class="uk-text-bold">{{organization.name.slice(0,100)}}</span><span *ngIf="organization.name.length > 100">...</span>
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
<span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
*ngIf="organization.name.length > 100">...</span>
</div>
</ng-template>
@ -23,7 +32,7 @@
uk-grid>
<div *ngFor="let affiliation of affiliations">
<div class=" uk-card uk-card-default uk-padding-small">
<div class="uk-card uk-card-default uk-card-small uk-padding-small">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
</a>
@ -34,19 +43,24 @@
</div>
</div>
<div *ngIf="communityFirstPage" class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
<div *ngIf="communityFirstPage"
class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
Related Organizations ({{affiliations.length}})
</div>
<div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1" [attr.uk-slider]="sliderOptions">
<div [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
[attr.uk-slider]="sliderOptions">
<div
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
<li *ngFor="let affiliation of affiliations"
[class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-padding-small"
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
class="affiliation-content">
<ng-container
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
</a>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
@ -64,7 +78,8 @@
class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<div *ngIf="communityFirstPage" [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<div *ngIf="communityFirstPage"
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<a routerLink="/organizations" class="uk-align-right uk-link">
View more details
</a>

76
src/app/communities/browseCommunity/browse-community.component.html
View File

@ -1,44 +1,60 @@
<div class="uk-container line-height-normal uk-text-small" *ngIf="community" >
<div *ngIf="community.status =='manager'" class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
<div class="uk-container line-height-normal uk-text-small" *ngIf="community">
<div *ngIf="community.status =='manager'"
class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
Private
</div>
<div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<div *ngIf="community.isSubscribed"
class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<span>Subscribed</span>
</div>
<div class="uk-card-media-top community uk-padding-small">
<div class="uk-card-media-top uk-padding uk-padding-remove-vertical community uk-flex uk-flex-center uk-flex-middle">
<a (click)="confirmModalOpen()">
<div class="communitiesImageBox uk-position-relative uk-align-center">
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-position-center">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-position-center">
<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>
<div>
<img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
alt="{{(community.title)?community.title:community.shortTitle}} logo">
<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>
</a>
</div>
<div class="uk-text-center uk-text-bold community" [ngClass]="(showDescription)?'uk-margin-small-bottom':'uk-margin-medium-bottom'">
<a (click)="confirmModalOpen()">
<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>
<div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top uk-margin-small-top community">
<div class="uk-text-center uk-text-bold " [ngClass]="(showDescription)?'uk-margin-bottom':''">
<a (click)="confirmModalOpen()">
<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>
</div>
<div class="uk-text-left" *ngIf="community.description != null && showDescription"
title="{{community.description}}">
<span>{{community.description.slice(0, thresholdDescription)}}<span
*ngIf="community.description.length > thresholdDescription">...</span></span>
</div>
</div>
<div class="uk-text-left community uk-margin-large-bottom uk-margin-top" *ngIf="community.description != null && showDescription" title="{{community.description}}">
<span>{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></span>
</div>
<div class="uk-position-bottom-right uk-margin-bottom uk-margin-right">
<a (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold">
Visit
</a>
<div>
<div class="uk-text-right">
<a (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold">
Visit
</a>
</div>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
<div class="uk-text-center">
The profile will be presented in a new tab.<br>
Are you sure that you want to proceed?
</div>
<div class="uk-text-center">
The profile will be presented in a new tab.<br>
Are you sure that you want to proceed?
</div>
</modal-alert>

276
src/app/communities/communities.component.html
View File

@ -1,25 +1,33 @@
<div *ngIf="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)" class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div *ngIf="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)"
class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class=" uk-section uk-padding-remove-bottom">
<div class="uk-position-cover"></div>
<div class="uk-position-relative uk-panel">
<div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-2" role="alert"><span class="loading-gif uk-align-center" ></span></div>
<div class="uk-animation-fade uk-margin-top uk-width-1-2" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!loading" class="uk-container uk-container-large uk-section">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0" class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
<div *ngIf="!loading" class="uk-container uk-container-large">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
<div>
<div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
<h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
<div class="uk-width-1-1 uk-margin-top">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div
class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
uk-grid uk-height-match=".community">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard" title="{{community.description}}">
<browse-community [community]=community [showDescription]=false></browse-community>
<div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
title="{{community.description}}">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold"
<a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{managerOfCommunities.length | number}}) ></div>
</a>
@ -36,11 +44,13 @@
<div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
<h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
<div class="uk-width-1-1 uk-margin-top">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div
class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
uk-grid uk-height-match=".community">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-card uk-card-small uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
<div class="uk-padding-small uk-card uk-card-small uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
@ -63,8 +73,12 @@
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
<div *ngIf="(managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0)" class="home-banner image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="(managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0)"
class="home-banner image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class=" uk-section uk-padding-remove-bottom">
<div class="uk-position-cover"></div>
<div class="uk-position-relative uk-panel">
@ -74,10 +88,12 @@
<div class="uk-h1">Build an Open Research <b>Gateway</b> for your <b>Community</b></div>
<h4 class="uk-margin-remove-top">Turn Open Science into practice</h4>
<div class="uk-h5 uk-margin-top">Share and link your research results.<br>
Across organizations, across borders.<br>Customized to your needs.</div>
Across organizations, across borders.<br>Customized to your needs.
</div>
</div>
<div class="uk-width-1-1 uk-inline uk-margin-medium-top uk-margin-medium-bottom">
<a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active"> LEARN
<a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active">
LEARN
HOW</a>
</div>
</div>
@ -87,130 +103,153 @@
</div>
<div>
<div class="uk-container uk-container-large uk-margin-large-top">
<div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
<div class="uk-margin-medium-top" uk-height-match=".target">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
<div>
<div class="uk-card uk-card-default connectInfoCard">
<div class="uk-card-media-top uk-margin-top target">
<img src="assets/home/1.png" class="uk-align-center" width="111" height="138">
</div>
<div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">A Virtual Research Environment</h5>
<div>An overlay platform making it easy to share, link, disseminate and monitor all your publications, data, software, methods. In one place.</div>
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
</span>
Access to OpenAIRE resources
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
</span>
Moderated, front-end linking
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
</span>
Cross-platform search
</li>
</ul>
<div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
<div class="uk-margin-medium-top">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-height-match=".target" uk-grid>
<div>
<div class="uk-card uk-card-default uk-padding connectInfoCard">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
<img src="assets/home/1.png" width="111" height="138">
</div>
<div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom uk-grid-divider" uk-grid>
<div class="uk-width-1-1 target">
<h5 class="uk-text-bold uk-text-center">A Virtual Research Environment</h5>
<div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
data, software, methods. In one place.
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default connectInfoCard">
<div class="uk-card-media-top uk-margin-top target">
<img src="../../assets/home/2.png" class="uk-align-center" width="127" height="138">
</div>
<div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">Open Science in action</h5>
<div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral part of the European Open Science Cloud.</div>
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
Use of OpenAIRE Guidelines
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
Access to OpenAIRE resources
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
DOIs via Zenodo
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
Moderated, front-end linking
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
EOSC Single Sign-On
</li>
</ul>
</div>
Cross-platform search
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default connectInfoCard">
<div class="uk-card-media-top uk-margin-top target">
<img src="../../assets/home/3.png" class="uk-align-center" width="139" height="138">
</div>
<div>
<div class="uk-card uk-card-default uk-padding connectInfoCard">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
<img src="assets/home/2.png" width="127" height="138">
</div>
<div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom uk-grid-divider" uk-grid>
<div class="uk-width-1-1 target">
<h5 class="uk-text-bold uk-text-center">Open Science in action</h5>
<div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
part of the European Open Science Cloud.
</div>
</div>
<div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">Customized to your needs</h5>
<div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
presentation. Run by you via a simple, yet powerful backend administration tool.</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
Use of OpenAIRE Guidelines
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
DOIs via Zenodo
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
EOSC Single Sign-On
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-padding connectInfoCard">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
<img src="assets/home/3.png" width="139" height="138">
</div>
<div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom uk-grid-divider" uk-grid>
<div class="uk-width-1-1 target">
<h5 class="uk-text-bold uk-text-center">Customized to your needs</h5>
<div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
presentation. Run by you via a simple, yet powerful backend administration tool.
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
Access control
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
Access control
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
Analytics: rich set of indicators
</li>
<li>
<span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
Analytics: rich set of indicators
</li>
<li>
<span
class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
uk-icon="check">
</span>
Look & feel to match your brand
</li>
</ul>
</div>
Look & feel to match your brand
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-top home-background uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large">
<gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
</gif-slider>
</div>
</div>
<div
class="uk-margin-large-top home-background uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large">
<gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
</gif-slider>
</div>
</div>
</div>
<div class="uk-container uk-container-large">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-2" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf= "!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-large-top">
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-large-top">
<div class="uk-text-bold uk-h4">Community Gateways in Action</div>
<div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div
class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
uk-grid uk-height-match=".community">
<div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
<div class="uk-padding-small uk-padding-remove-vertical uk-height-max-large uk-card uk-card-default communityCard">
<div class="uk-padding-small uk-card uk-card-default communityCard">
<browse-community [community]=community></browse-community>
</div>
</div>
@ -224,8 +263,10 @@
</a>
</div>
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
<div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
<div
class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
<div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
@ -233,7 +274,9 @@
</div>
<div class="uk-width-expand">
<div class="uk-text-bold uk-h4">
<div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is reliable.</div>
<div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is
reliable.
</div>
</div>
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
<div class="uk-inline">
@ -244,7 +287,8 @@
</div>
</div>
</div>
<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<other-portals [properties]="properties"></other-portals>
</div>

59
src/app/curators/curators.component.html
View File

@ -1,26 +1,35 @@
<ng-container *ngIf="main else child">
<div class="image-front-topbar uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="image-front-topbar uk-section-default uk-position-relative"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
tm-header-transparent="light">
<div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="uk-margin-large-top uk-align-center">
<div class="uk-section uk-section-small">
<div class="uk-container">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading && curators.length > 0">
<h4 class="uk-margin-top uk-h4">
<span class="uk-text-bold">Curators</span>
<span> ({{curators.length}})</span>
</h4>
<div *ngFor="let curator of curators let i=index;" class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
<div [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''" uk-grid>
<div *ngFor="let curator of curators let i=index;"
class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
<div
[class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''"
uk-grid>
<div class="uk-width-1-2 uk-first-column">
<div class="uk-flex uk-flex-middle">
<div>
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
</div>
<div class="uk-width-expand uk-margin-left uk-text-bold">
{{curator.name}}
@ -29,12 +38,15 @@
</div>
<div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)" class="uk-width-1-2">
<div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)"
class="uk-width-1-2">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
Affiliations
</div>
<affiliations [fullView]="false" [affiliations]="curator.affiliations" [affiliationsInSlider]="curator.affiliations.length"></affiliations>
<affiliations [fullView]="false" [affiliations]="curator.affiliations"
[affiliationsInSlider]="curator.affiliations.length"
class="uk-width-2-3"></affiliations>
</div>
</div>
@ -54,17 +66,20 @@
</div>
</div>
<div class="uk-width-1-1 uk-margin-top uk-text-right">
<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold" (click)="toggle(i)">
<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
(click)="toggle(i)">
Show more
</a>
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold" (click)="toggle(i)">
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
(click)="toggle(i)">
Show less
</a>
</div>
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
@ -78,18 +93,22 @@
<div class="uk-grid">
<div *ngFor="let curator of curators let i=index;" class="uk-flex uk-flex-middle uk-width-1-2 uk-margin-small-top">
<div>
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
</div>
<div class="uk-width-expand uk-margin-left">
<a>{{curator.name}}</a>
<div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
uk-dropdown="pos: bottom-left; mode:click; ">
<div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
uk-dropdown="pos: bottom-left; mode:click; ">
<div class="uk-grid uk-grid-stack">
<div class="uk-first-column uk-flex uk-flex-middle uk-grid" >
<div class="uk-first-column uk-flex uk-flex-middle uk-grid">
<div>
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
</div>
<div class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">
{{curator.name}}

82
src/app/utils/subscribe/invite/invite.component.html
View File

@ -3,7 +3,7 @@
<div class="uk-container uk-margin-bottom">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']" styleName="uk-width-1-1"></helper>
[texts]="pageContents['top']"></helper>
<div id="invite" class=" uk-card uk-card-default uk-padding uk-margin-top">
<div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>
<div class="uk-margin-top">
@ -147,49 +147,51 @@
</div>
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']" styleName="uk-width-1-1"></helper>
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
<button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button uk-button-primary'">
Invite users
</button>
<div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
<div class="uk-margin-top">
<errorMessages [status]="[status]" [type]="'community'"></errorMessages>
</div>
<div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{missingCommunityId}}</div>
<div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"
role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
<div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
<div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{inviteErrorMessage}}</div>
<div class="uk-inline">
<button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button uk-button-primary'">
Invite users
</button>
<div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
<div class="uk-margin-top">
<errorMessages [status]="[status]" [type]="'community'"></errorMessages>
</div>
<div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{missingCommunityId}}</div>
<div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"
role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
<div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
<div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
role="alert">{{inviteErrorMessage}}</div>
<div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add
valid email/s.
</div>
<div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.
</div>
<input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"
class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"
required>
<div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>
<div class="uk-margin-small-top uk-text-center ">
<button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>
{{" "}}
<a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"
routerLinkActive="router-link-active" routerLink="/invite">
<span class="uk-margin-xsmall-left uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"
ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path
fill="none" stroke="#000"
d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
<div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add
valid email/s.
</div>
<div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.
</div>
<input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"
class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"
required>
<div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>
<div class="uk-margin-small-top uk-text-center ">
<button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>
{{" "}}
<a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"
routerLinkActive="router-link-active" routerLink="/invite">
<span class="uk-margin-xsmall-left uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"
ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path
fill="none" stroke="#000"
d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
</span>
Customize
</a>
</span>
Customize
</a>
</div>
</div>
</div>