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

[new-theme | Connect]: Updates in home page & redesign of "my communities" page. 

1. my-communities.component.html: Redesign of my communities page - 3 or 4 community cards for managers and subscribers.
2. my-communities.component.ts: Show hidden communities to their managers (disabled link).
3. browse-community.component.html:
   a. Add uk-disabled in <a> when community is hidden.
   b. Small changes in icons and badges.
   c. Remove uk-card-title class.
   d. No use case when a community has no logo.
4. communities.component.html:
   a. Small changes in icons.
   b. Bug fix in "View all" link for community cards (number based on screen size).
   c. Scroll section updated - all images are in the same place with opacity.
This commit is contained in:
Konstantina Galouni 2022-01-28 12:15:21 +02:00
parent 9b15ca2245
commit 802b457394
4 changed files with 276 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,34 +1,29 @@
<a *ngIf="directLink && community" [href]="getCommunityPageUrl()" target="_blank"
class="uk-height-1-1 uk-link-reset">
class="uk-height-1-1 uk-link-reset" [ngClass]="community['status'] == 'hidden' ? 'uk-disabled' : ''">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<a *ngIf="!directLink && community" (click)="confirmModalOpen()"
class="uk-height-1-1 uk-link-reset">
class="uk-height-1-1 uk-link-reset" [ngClass]="community['status'] == 'hidden' ? 'uk-disabled' : ''">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<ng-template #card>
<div class="uk-padding">
<div class="badges">
<div *ngIf="community.isSubscribed"
class="uk-alert-primary portal-card-badge uk-text-center">
<span>Subscribed</span>
</div>
<!-- <div *ngIf="community.status == 'manager'"-->
<!-- class="private-card-badge uk-text-center ">-->
<!-- <span>Private</span>-->
<!-- </div>-->
<div *ngIf="community.isSubscribed"
class="uk-alert-primary portal-card-badge uk-text-center uk-position-top-left uk-padding-small">
<span>Subscribed</span>
</div>
<div *ngIf="community.status === 'manager'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
<icon class="uk-flex" [name]="visibilityIcon.get('RESTRICTED')"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span>
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="0.85" flex="true"></icon>
<span class="uk-margin-small-left uk-text-small uk-text-capitalize">restricted</span>
</div>
<div *ngIf="community.status === 'hidden'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
<icon class="uk-flex" [name]="visibilityIcon.get('PRIVATE')"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span>
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="0.85" flex="true"></icon>
<span class="uk-margin-small-left uk-text-small uk-text-capitalize">private</span>
</div>
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle community-logo
<!-- community-logo-->
<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">
<!-- <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank">-->
<!-- <div>-->
@ -47,19 +42,19 @@
<!-- <a *ngIf="!directLink" (click)="confirmModalOpen()">-->
<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>
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>
<!-- </a>-->
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<h6 class="uk-card-title uk-text-center uk-h6 uk-link" [ngClass]="(showDescription)?'uk-margin-small-bottom':''">
<h6 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)}}-->

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

@ -1,8 +1,9 @@
<div class="image-front-topbar">
<div>
<!-- style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)">-->
<div class="uk-section whiteBackground
<div class="uk-section
uk-background-fixed uk-background-bottom-right uk-background-norepeat
homeBackgroundImage">
homeBackgroundImage"
style="background: #fff;">
<div class="uk-container uk-container-large">
<div class="uk-grid">
<div>
@ -34,85 +35,123 @@
<div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large uk-margin-large-top">
<h2 class="uk-h1 uk-margin-medium-top">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
<div [class]="'uk-margin-large-top' + (researchCommunities.length <= 3 ? ' uk-margin-large-bottom' : '')">
<div
class="uk-visible@l uk-grid-match uk-grid-medium uk-flex-center uk-text-center"
uk-grid uk-height-match=".community-logo">
<div *ngFor="let community of researchCommunities.slice(0, 4); let i = index" class="uk-width-1-4@l uk-width-medium@xl">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
<!-- uk-margin-large-top-->
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large">
<!-- uk-margin-medium-top-->
<h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
<div class="uk-margin-large-top uk-margin-large-bottom">
<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 *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 4"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All</span>
</span>
</a>
</div>
</div>
<div
class="uk-hidden@l 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 uk-height-match=".community-logo">
<div *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
<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 *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 3"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All</span>
</span>
</a>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-large-top uk-margin-medium-bottom">
<a *ngIf="researchCommunities.length > 3"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All</span>
<!-- <span uk-icon="chevron-right"></span>-->
</span>
</a>
</div>
</div>
<div class="">
<section-scroll [customClass]="'uk-margin-large-top uk-section uk-section-primary uk-padding-remove-top '"
<!-- uk-margin-large-top-->
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom '"
[childrenCustomClass]="' uk-container uk-container-large '">
<div top class="uk-width-1-1 uk-padding-large uk-padding-remove-horizontal uk-margin-large-bottom uk-background-primary">
<div top class="uk-width-1-1 uk-background-primary">
<div class="top-content uk-container uk-container-large">
<h6 class="uk-h6 uk-text-primary">Benefits</h6>
<h1 class="uk-h1 uk-margin-remove-top">Find the best <br/> for your community<span class="uk-text-primary">.</span></h1>
</div>
</div>
<div left class="uk-width-1-2 uk-margin-large-bottom">
<img src="assets/connect-assets/home/screenshot_ipad.png" height="302px;" width="326px;"/>
<div left class="uk-width-1-1 uk-width-1-2@m"
uk-scrollspy="target: > img; cls: uk-animation-slide-bottom-medium; repeat: true">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 1">
<img id="imgId1" alt="img1" src="assets/connect-assets/home/repository.png"/>
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
<img id="imgId2" alt="img2" src="assets/connect-assets/home/link.png"/>
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
<img id="imgId3" alt="img3" src="assets/connect-assets/home/overview.png"/>
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
<img id="imgId4" alt="img4" src="assets/connect-assets/home/browse.png"/>
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
<img id="imgId5" alt="img5" src="assets/connect-assets/home/statistics.png"/>
</div>
</div>
<div scroll class="uk-width-expand">
<h2 class="uk-margin-xlarge-bottom uk-h2">
<span class="uk-text-primary">Find a repository to deposit </span>
<span>your research outcome</span>
<span class="uk-text-primary">.</span>
</h2>
<h2 class="uk-margin-xlarge-bottom uk-h2">
<span class="uk-text-primary">Link your research output </span>
<span>with your community, funding and other research products</span>
<span class="uk-text-primary">.</span>
</h2>
<h2 class="uk-margin-xlarge-bottom uk-h2">
<span>View community's </span>
<span class="uk-text-primary">overview at a glance.</span>
</h2>
<h2 class="uk-margin-xlarge-bottom uk-h2">
<span class="uk-text-primary">Search & browse </span>
<span>your community's research products</span>
<span class="uk-text-primary">.</span>
</h2>
<h2 class="uk-margin-xlarge-bottom uk-h2">
<span class="uk-text-primary">View statistics </span>
<span>for your community's research products</span>
<span class="uk-text-primary">.</span>
</h2>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<h2 id="1st" class="uk-h2" name="txt">
<span class="uk-text-primary">Find a repository to <br/>deposit </span>
<span>your research <br/>outcome</span>
<span class="uk-text-primary">.</span>
</h2>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<h2 id="2nd" class="uk-h2" name="txt">
<span class="uk-text-primary">Link your research <br/>output </span>
<span>with your <br/>community, funding,<br/> and other research<br/> products</span>
<span class="uk-text-primary">.</span>
</h2>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<h2 id="3rd" class="uk-h2" name="txt">
<span>View community's<br/> </span>
<span class="uk-text-primary">overview at a glance.</span>
</h2>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<h2 id="4th" class="uk-h2" name="txt">
<span class="uk-text-primary">Search & browse </span>
<span>your<br/> community's research<br/> products</span>
<span class="uk-text-primary">.</span>
</h2>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<h2 id="5th" class="uk-h2" name="txt">
<span class="uk-text-primary">View statistics </span>
<span>for<br/> your community's<br/> research products</span>
<span class="uk-text-primary">.</span>
</h2>
</div>
</div>
</section-scroll>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-top">
<!-- uk-margin-large-top-->
<div class="uk-section uk-container uk-container-large">
<div class="">
<h2 class="uk-h2 uk-margin-medium-top">Our mission for an <br/> Open and FAIR science<span class="uk-text-primary">.</span></h2>
<!-- uk-margin-medium-top-->
<h2 class="uk-h2">Our mission for an <br/> Open and FAIR science<span class="uk-text-primary">.</span></h2>
<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=""
uk-height-match=".target">
@ -120,8 +159,9 @@
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div class="target"><img src="assets/connect-assets/home/virtual.svg"
style="height:60px; width:67px"/></div>
<div>
<img src="assets/connect-assets/home/virtual.svg" alt="A Virtual Research Environment" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center">
@ -141,15 +181,15 @@
<!-- </svg>-->
<!-- </div>-->
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Access to OpenAIRE research graph
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Moderated, front-end linking
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Cross-platform search
</li>
</ul>
@ -161,7 +201,9 @@
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div class="target uk-text-primary"><img src="assets/connect-assets/home/open_science.svg" style="height:60px; width:67px"/></div>
<div>
<img src="assets/connect-assets/home/open_science.svg" alt="Open science in action" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style="">
@ -174,15 +216,15 @@
<div>
<ul class="uk-list uk-text-small">
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Use of OpenAIRE Guidelines
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Publish and get DOIs with Zenodo
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
EOSC Single Sign-On
</li>
</ul>
@ -194,8 +236,9 @@
<div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div class="target"><img src="assets/connect-assets/home/customize.svg"
style="height:60px; width:67px"/></div>
<div>
<img src="assets/connect-assets/home/customize.svg" alt="Customized to your needs" style="height:60px; width:67px"/>
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style="">
@ -208,15 +251,15 @@
<div>
<ul class="uk-list uk-text-small">
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Access control
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Analytics: rich set of indicators
</li>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
Look &amp; feel to match your brand
</li>
</ul>
@ -342,7 +385,8 @@
[texts]="pageContents['bottom']"></helper>-->
<!--<div class="uk-section" style="background-color: #D9D8E8;">-->
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h2 uk-margin-medium-top">
<!-- uk-margin-medium-top-->
<h2 class="uk-h2">
Let us Help you Develop a<br/>Collaborative Science<br/>
Gateway<span class="uk-text-primary">.</span>
It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span>

224
src/app/my-communities/my-communities.component.html
View File

@ -3,123 +3,165 @@
type="home"
name="OpenAIRE Connect">
</schema2jsonld>
<div class=" image-front-topbar" style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)">
<div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-margin-large-top">
<div *ngIf="loading" class="uk-height-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>
<div *ngIf="!loading">
<h3 class="uk-text-center uk-margin-large-bottom">My Communities</h3>
<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
uk-height-match="target: .communityCard; row: false">
<div>
<div *ngIf="managerOfCommunities.length > 0" class="uk-grid uk-margin-medium-bottom">
<h5 class="uk-width-1-1">You are managing</h5>
<div class="uk-width-1-1 uk-margin-small-top">
<div
class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
uk-grid>
<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 portalSearchCard"
title="{{community.description}}">
<browse-community [community]=community [smallTitle]="true"
[showDescription]=false></browse-community>
<div class="uk-margin-large-top uk-margin-large-bottom">
<div *ngIf="loading" class="uk-height-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>
<div *ngIf="!loading">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<div *ngIf="managerOfCommunities.length > 0"
[class]="subscriberOfCommunities?.length > 0 ? 'uk-margin-xlarge-bottom' : ''">
<h1 class="uk-h1">You are managing</h1>
<div class="uk-margin-large-top">
<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 *ngFor="let community of managerOfCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 4" class="uk-text-center uk-margin-medium-top">
<a class="uk-margin-large-top uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{managerOfCommunities.length}})</span>
</span>
</a>
</div>
</div>
<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 *ngFor="let community of managerOfCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</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="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View all ({{managerOfCommunities.length | number}})</span>
<span uk-icon="chevron-right"></span>
</span>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-center uk-margin-medium-top">
<a class="uk-hidden@xl uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{managerOfCommunities.length}})</span>
</span>
</a>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-width-4-5">
<div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
{{subscriberErrorMessage}}
</div>
<div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
{{subscriberErrorMessage}}
</div>
<div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid uk-margin-medium-bottom">
<h5 class="uk-width-1-1">You are subscribed to</h5>
<div class="uk-width-1-1 uk-margin-small-top">
<div
class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
uk-grid>
<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 portalSearchCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [smallTitle]="true"
[showDescription]=false></browse-community>
<div *ngIf="subscriberOfCommunities.length > 0">
<h1 class="uk-h1">You are subscribed to</h1>
<div class="uk-margin-large-top">
<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 *ngFor="let community of subscriberOfCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{status: quote('subscribed')}"
class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div *ngIf="subscriberOfCommunities.length > 4" class="uk-text-center uk-margin-medium-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities"
[queryParams]="{role: quote('subscribed')}">
<span class="uk-flex uk-flex-middle">
<span>View all ({{subscriberOfCommunities.length | number}})</span>
<span uk-icon="chevron-right"></span>
<span>View All ({{subscriberOfCommunities.length}})</span>
</span>
</a>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-text-center">
<img width="200" height="185" src="../../assets/connect-assets/banner/login.svg">
</div>
</div>
<div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"
class="uk-child-width-1-1" uk-grid>
<div class="uk-flex uk-flex-center uk-margin-bottom">
<div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">
<div class="uk-card-body uk-text-bold uk-text-center ">
You are not yet subscribed in any Communities.<br>
Start by browsing and subscribing in those that you are interested in.
</div>
</div>
</div>
<div>
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="!loading && researchCommunities.length > 0">
<h5 class="">Community Gateways in Action</h5>
<div [class]="(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 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-card uk-card-default portalSearchCard">
<browse-community [community]=community></browse-community>
<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 *ngFor="let community of subscriberOfCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-center uk-margin-medium-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities"
[queryParams]="{role: quote('subscribed')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{subscriberOfCommunities.length}})</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="uk-text-right uk-margin-top">
<a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
Browse All >
</a>
</div>
<div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0">
<div class="uk-flex uk-flex-center uk-margin-large-bottom">
<div class="uk-card uk-card-default">
<div class="uk-card-body uk-text-bold uk-text-center ">
You are not yet subscribed in any Communities.<br>
Start by browsing and subscribing in those that you are interested in.
</div>
</div>
</div>
<div>
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="researchCommunities.length > 0">
<h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
<div class="uk-margin-large-top">
<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 *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 4"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All ({{researchCommunities.length}})</span>
</span>
</a>
</div>
</div>
<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 *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-large-top uk-margin-medium-bottom">
<a *ngIf="researchCommunities.length > 3"
class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle">
<span>View All ({{researchCommunities.length}})</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

9
src/app/my-communities/my-communities.component.ts
View File

@ -129,9 +129,12 @@ export class MyCommunitiesComponent {
}
if (showCommunity) {
this.researchCommunities.push(community);
if (community.isManager) {
this.managerOfCommunities.push(community);
}
// if (community.isManager) {
// this.managerOfCommunities.push(community);
// }
}
if (community.isManager) {
this.managerOfCommunities.push(community);
}
this.status = this.errorCodes.DONE;
if (this.user && showCommunity) {