[Connect | Trunk]: Change Curators and Organizations base on new mocks
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58614 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
436088cadc
commit
f5f99307f9
|
|
@ -9,16 +9,16 @@
|
|||
<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>
|
||||
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-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>
|
||||
*ngIf="organization.name.length > 100">...</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
|
||||
uk-grid>
|
||||
|
||||
<div *ngFor="let affiliation of affiliations">
|
||||
<div class="uk-card uk-card-default uk-card-small uk-padding-small">
|
||||
<div *ngFor="let affiliation of affiliations;">
|
||||
<div class="uk-card communityCard">
|
||||
<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>
|
||||
|
|
@ -45,25 +45,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="communityFirstPage"
|
||||
class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
|
||||
<h3 *ngIf="communityFirstPage"
|
||||
class="uk-margin-large-top uk-text-center uk-text-muted uk-text-bold">
|
||||
Supporting Organizations
|
||||
<!-- ({{affiliations.length}})-->
|
||||
</div>
|
||||
<!-- ({{affiliations.length}})-->
|
||||
</h3>
|
||||
|
||||
<div *ngIf="!longView" [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>
|
||||
[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 > .affiliation" 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 uk-padding-small"
|
||||
<div class="affiliation 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>
|
||||
*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>
|
||||
|
|
@ -81,10 +81,10 @@
|
|||
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">
|
||||
<a routerLink="/organizations" class="uk-align-right uk-link portal-link">
|
||||
See Details >
|
||||
<div *ngIf="communityFirstPage">
|
||||
<a routerLink="/organizations" class="uk-align-right portal-link uk-flex uk-flex-middle">
|
||||
<span>See Details</span>
|
||||
<span uk-icon="chevron-right"></span>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,94 +1,84 @@
|
|||
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
||||
|
||||
<ng-container *ngIf="longView else shortView">
|
||||
<!-- <div class="image-front-topbar uk-section-default uk-position-relative"-->
|
||||
<!-- uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"-->
|
||||
<!-- tm-header-transparent="light">-->
|
||||
<!-- uk-flex uk-flex-middle-->
|
||||
<div style=" min-height: 650px;" class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom ">
|
||||
<div class="uk-align-center">
|
||||
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
<!-- <div class="image-front-topbar uk-section-default uk-position-relative"-->
|
||||
<!-- uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"-->
|
||||
<!-- tm-header-transparent="light">-->
|
||||
<!-- uk-flex uk-flex-middle-->
|
||||
<div style=" min-height: 650px;"
|
||||
class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom ">
|
||||
<div class="uk-align-center">
|
||||
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
|
||||
[breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
|
||||
<div class="uk-container uk-container-large">
|
||||
<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>
|
||||
<!-- && curators.length > 0-->
|
||||
<div *ngIf="!showLoading">
|
||||
<div class="uk-margin-medium-top uk-h2">
|
||||
<span class="">Curators</span>
|
||||
<!-- <span> ({{curators.length}})</span>-->
|
||||
<div class="uk-container uk-container-large">
|
||||
<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>
|
||||
<!-- && curators.length > 0-->
|
||||
<div *ngIf="!showLoading">
|
||||
<div class="uk-margin-medium-top uk-h2">
|
||||
<span class="">Curators</span>
|
||||
<!-- <span> ({{curators.length}})</span>-->
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<div *ngFor="let curator of curators let i=index;"
|
||||
class="white-box-with-border uk-margin-top uk-animation-slide-top" uk-grid>
|
||||
<div class="uk-width-expand uk-padding 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">
|
||||
</div>
|
||||
<div class="uk-width-expand uk-text-large uk-margin-left uk-text-bold">
|
||||
{{curator.name}}
|
||||
</div>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<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">
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-left uk-text-bold">
|
||||
{{curator.name}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top uk-height-max-large uk-overflow-auto">
|
||||
<div class="uk-text-muted">
|
||||
Biography
|
||||
</div>
|
||||
<div *ngIf="showMore[i]"> {{curator.bio}}}</div>
|
||||
<div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
|
||||
<div class="uk-margin-top uk-text-right">
|
||||
<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)">
|
||||
Show less
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@m uk-width-1-2@s uk-width-1-1 uk-padding">
|
||||
<div class="uk-child-width-1-2 uk-flex uk-flex-middle" uk-grid>
|
||||
<div class="uk-text-muted uk-width-1-1">
|
||||
Affiliations
|
||||
</div>
|
||||
|
||||
|
||||
<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 [longView]="false" [affiliations]="curator.affiliations"
|
||||
[affiliationsInSlider]="curator.affiliations.length"
|
||||
class="uk-width-2-3"></affiliations>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top">
|
||||
<div class="uk-text-meta uk-margin-small-bottom">
|
||||
Affiliations
|
||||
</div>
|
||||
<affiliations [longView]="false" [affiliations]="curator.affiliations"></affiliations>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto">
|
||||
<div class="uk-text-meta uk-margin-small-bottom">
|
||||
Biography
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<p *ngIf="showMore[i]" class="biography"> {{curator.bio}}}</p>
|
||||
<p *ngIf="!showMore[i]" class="biography">{{_format(curator.bio)}}</p>
|
||||
</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)">
|
||||
Show more
|
||||
</a>
|
||||
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
|
||||
(click)="toggle(i)">
|
||||
Show less
|
||||
<div *ngFor="let affiliation of curator.affiliations">
|
||||
<span *ngIf="!affiliation.website_url">
|
||||
<img [src]="affiliation.logo_url" [alt]="affiliation.name">
|
||||
</span>
|
||||
<a *ngIf="affiliation.website_url" [href]="affiliation.website_url">
|
||||
<img [src]="affiliation.logo_url" [alt]="affiliation.name">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
[texts]="pageContents['bottom']"></helper>
|
||||
</div>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
[texts]="pageContents['bottom']"></helper>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
</ng-container>
|
||||
<ng-template #shortView>
|
||||
<div class="uk-grid">
|
||||
|
|
@ -98,23 +88,24 @@
|
|||
<span class="uk-width-expand uk-padding-remove space">
|
||||
<span *ngFor="let curator of curators let i=index;">
|
||||
<!-- <span>-->
|
||||
<!-- <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">-->
|
||||
<!-- </span>-->
|
||||
<!-- <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">-->
|
||||
<!-- </span>-->
|
||||
|
||||
<a>
|
||||
<span class="user-circle-background">
|
||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
|
||||
<path
|
||||
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
</svg>
|
||||
</span>
|
||||
{{curator.name}}
|
||||
</a>
|
||||
<span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
|
||||
uk-dropdown="pos: bottom-left; mode:click; ">
|
||||
uk-dropdown="pos: bottom-left; mode:click; ">
|
||||
<span class="uk-grid uk-grid-stack">
|
||||
<span class="uk-first-column uk-flex uk-flex-middle uk-grid">
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -54,13 +54,18 @@ export class CustomizationComponent {
|
|||
|
||||
});*/
|
||||
|
||||
// TODO When customization is updated remove trhe followin and update appendCss in index.html
|
||||
// TODO When customization is updated remove the following and update appendCss in index.html
|
||||
appendCss("");
|
||||
if(typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
document.documentElement.style.setProperty('--portal-main-color', '#4687E6');
|
||||
document.documentElement.style.setProperty('--portal-dark-color', '#2D72D6');
|
||||
if(this.communityId === 'covid-19') {
|
||||
document.documentElement.style.setProperty('--portal-main-color', '#03ADEE');
|
||||
document.documentElement.style.setProperty('--portal-dark-color', '#F15157');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--portal-main-color', '#4687E6');
|
||||
document.documentElement.style.setProperty('--portal-dark-color', '#2D72D6');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
|
||||
|
||||
.communityPanelBackground:not(bottom) {
|
||||
border-style: solid;
|
||||
border-color: #4C9CD5;
|
||||
border-color: var(--portal-main-color);
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.communityPanelBackground,
|
||||
.communityPanelBackground .uk-section-primary {
|
||||
background-color: #4C9CD5;
|
||||
background-color: var(--portal-main-color);
|
||||
}
|
||||
|
||||
.communityPanelBackground {
|
||||
|
|
@ -67,7 +65,7 @@ a:not(.uk-button),
|
|||
.uk-tab>.uk-active>a,
|
||||
.uk-tab>*>a:focus,
|
||||
.uk-tab>*>a:hover {
|
||||
color: #4C9CD5;
|
||||
color: var(--portal-main-color);
|
||||
}
|
||||
|
||||
.uk-link:hover,
|
||||
|
|
@ -82,11 +80,11 @@ a:not(.uk-button):hover,
|
|||
.uk-tab>.uk-active>a,
|
||||
.uk-navbar-nav>li.uk-active>a,
|
||||
.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a {
|
||||
color: #2D72D6;
|
||||
color: var(--portal-dark-color) !important;
|
||||
}
|
||||
|
||||
.communityBorder {
|
||||
border-color: #4C9CD5;
|
||||
border-color: var(--portal-main-color);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -135,7 +133,7 @@ a:not(.uk-button):hover,
|
|||
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
|
||||
background-color: #ffffff !important;
|
||||
/*color: #4C9CD5 !important;*/
|
||||
/*color: var(--portal-main-color) !important;*/
|
||||
color: black !important;
|
||||
border-color: #ffffff !important;
|
||||
border-style: solid !important;
|
||||
|
|
@ -145,7 +143,7 @@ a:not(.uk-button):hover,
|
|||
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
|
||||
background-color: #eeeeee !important;
|
||||
/*color: #4C9CD5 !important;*/
|
||||
/*color: var(--portal-main-color) !important;*/
|
||||
color: black !important;
|
||||
border-color: #eeeeee !important;
|
||||
}
|
||||
|
|
@ -186,3 +184,19 @@ a:not(.uk-button):hover,
|
|||
}
|
||||
|
||||
/*CONNECT REDESIGN*/
|
||||
.uk-text-muted {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.uk-card-default {
|
||||
color: #212121 !important;
|
||||
}
|
||||
|
||||
.portal-link:hover {
|
||||
text-decoration: none !important;
|
||||
color: var(--portal-dark-color) !important;
|
||||
}
|
||||
|
||||
.uk-slidenav {
|
||||
background: none !important;
|
||||
}
|
||||
Loading…
Reference in New Issue