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

[new-theme | Connect]: First version of connect home page redesign. 

1. browse-community.component & communities.component: First version of connect home page redesign. (not finalized)
2. connect-custom.css:
   a. Variable --button-primary-color is set with --font-default-color.
   b. Added css for classes "whiteBackground", "homeBackgroundImage", "community-logo img" (cards with community gateways).
This commit is contained in:
Konstantina Galouni 2022-01-20 01:15:04 +02:00
parent e79a370c98
commit cd86de5301
7 changed files with 399 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,52 +1,76 @@
<div class="uk-container line-height-normal" *ngIf="community"> <a *ngIf="directLink && community" [href]="getCommunityPageUrl()" target="_blank"
class="uk-height-1-1 uk-link-reset">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<a *ngIf="!directLink && community" (click)="confirmModalOpen()"
class="uk-height-1-1 uk-link-reset">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<ng-template #card>
<div class="uk-padding">
<div class="badges"> <div class="badges">
<div *ngIf="community.isSubscribed" <div *ngIf="community.isSubscribed"
class="portal-card-badge uk-text-center"> class="uk-alert-primary portal-card-badge uk-text-center">
<span>Subscribed</span> <span>Subscribed</span>
</div> </div>
<div *ngIf="community.status == 'manager'" <!-- <div *ngIf="community.status == 'manager'"-->
class="private-card-badge uk-text-center "> <!-- class="private-card-badge uk-text-center ">-->
<span>Private</span> <!-- <span>Private</span>-->
<!-- </div>-->
</div> </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>
</div> </div>
<div class="uk-card-media-top uk-padding uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle"> <div *ngIf="community.status === 'hidden'"
<a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank"> class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
<div class="community"> <icon class="uk-flex" [name]="visibilityIcon.get('PRIVATE')"></icon>
<img *ngIf="community.logoUrl" <span class="space uk-text-small uk-text-capitalize">private</span>
[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> </div>
</a> <div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle community-logo
<a *ngIf="!directLink" (click)="confirmModalOpen()"> uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div class="community"> <!-- <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>
<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"> alt="{{(community.title)?community.title:community.shortTitle}} logo">
<span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon"> <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" <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5">
stroke-width="1.1" cx="7.7" <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle>
cy="8.6" r="3.5"></circle> <path <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>
fill="none" stroke="#000" stroke-width="1.1" <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>
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" </svg>
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> </span>
</div> </div>
</a> <!-- </a>-->
</div> </div>
<div class="uk-card-body uk-padding-small uk-padding-remove-horizontal uk-padding-remove-top uk-margin-small-top uk-margin-bottom"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="uk-text-bold uk-text-left text-small" [ngClass]="(showDescription)?'uk-margin-small-bottom':''"> <h6 class="uk-card-title 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"> <!-- <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>
@ -55,38 +79,30 @@
{{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> <!-- </a>-->
<a *ngIf="!directLink" (click)="confirmModalOpen()" class="color" [class.uk-text-small]="smallTitle"> </h6>
<span *ngIf="community.title"> <div class="uk-text-center" *ngIf="community.description != null && showDescription">
{{community.title.slice(0, thresholdTitle)}} <!-- title="{{community.description}}">-->
<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 uk-text-small" *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--> <!-- <span>{{community.description.slice(0, thresholdDescription)}}<span-->
<!-- *ngIf="community.description.length > thresholdDescription">...</span></span>--> <!-- *ngIf="community.description.length > thresholdDescription">...</span></span>-->
</div> </div>
</div> </div>
<div> <!-- <div>-->
<div class="uk-position-small uk-position-bottom-right"> <!-- <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"> <!-- <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">-->
Visit <!--{{(properties.environment == 'production'&& getProductionPrefix(community.communityId).length > 0 <!-- Visit &lt;!&ndash;{{(properties.environment == 'production'&& getProductionPrefix(community.communityId).length > 0-->
?' BETA':'')}}--> <!-- ?' BETA':'')}}&ndash;&gt;-->
</a> <!-- </a>-->
<a *ngIf="!directLink" (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small"> <!-- <a *ngIf="!directLink" (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">-->
Visit <!--{{(properties.environment == 'production' && getProductionPrefix(community.communityId).length > 0 <!-- Visit &lt;!&ndash;{{(properties.environment == 'production' && getProductionPrefix(community.communityId).length > 0-->
?' BETA':'')}}--> <!-- ?' BETA':'')}}&ndash;&gt;-->
</a> <!-- </a>-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</div> </ng-template>
</div>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)"> <modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
<div class="uk-text-left"> <div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed? You will be navigated to a new tab. Are you sure that you want to proceed?

8
src/app/communities/browseCommunity/browse-community.component.ts
View File

@ -8,6 +8,7 @@ import {LocalStorageService} from "../../openaireLibrary/services/localStorage.s
import {Subscriber} from "rxjs"; 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";
@Component({ @Component({
selector: 'browse-community', selector: 'browse-community',
@ -23,11 +24,16 @@ export class BrowseCommunityComponent {
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
// check title length, if is manager, if is private and cut description accordingly // check title length, if is manager, if is private and cut description accordingly
public thresholdTitle: number = 50; public thresholdTitle: number = 45;
public thresholdDescription: number = 120; public thresholdDescription: number = 120;
properties: EnvProperties; properties: EnvProperties;
public directLink: boolean = true; public directLink: boolean = true;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'],
["RESTRICTED", 'group']
]);
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private location: Location, private location: Location,

3
src/app/communities/browseCommunity/browse-community.module.ts
View File

@ -10,11 +10,12 @@ import {ManageModule} from '../../openaireLibrary/utils/manage/manag
import {AlertModalModule} from "../../openaireLibrary/utils/modal/alertModal.module"; import {AlertModalModule} from "../../openaireLibrary/utils/modal/alertModal.module";
import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module";
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, CommonModule, FormsModule, RouterModule,
SearchFormModule, ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule SearchFormModule, ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule, IconsModule
], ],
declarations: [ declarations: [
BrowseCommunityComponent BrowseCommunityComponent

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

@ -1,101 +1,155 @@
<div class="image-front-topbar" style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)"> <div class="image-front-topbar">
<div class="uk-section uk-container uk-container-large"> <!-- style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)">-->
<div class="uk-padding-small"> <div class="uk-section whiteBackground
<div class="uk-grid uk-flex uk-flex-bottom"> uk-background-fixed uk-background-bottom-right uk-background-norepeat
<div class="uk-width-1-2@m uk-width-1-1@s uk-margin-bottom"> homeBackgroundImage">
<h1><span class="uk-text-light">Build a </span><span class="portal-color">Gateway</span><span class="uk-text-light"> for your </span><span class="portal-color">Community.</span> <div class="uk-container uk-container-large">
<div class="uk-grid">
<div>
<h1 class="uk-heading-large">
<span class="">Build a </span><span class="uk-text-primary">Gateway</span>
<br/><span class=""> for your<br/>Community</span><span class="uk-text-primary">.</span>
</h1> </h1>
<ul class="uk-text-large uk-list uk-margin-top"> <ul class="uk-text-large uk-list uk-margin-medium-top">
<li>Turn Open Science into Practice.</li> <li>Turn Open Science into Practice.</li>
<li>It takes your open and linked research outcomes.</li> <li>It takes your open and linked research outcomes.</li>
<li>A service customized to your needs.</li> <li>A service customized to your needs.</li>
</ul> </ul>
<div class="uk-inline uk-margin-top" style="margin-bottom: 50px"><a class="uk-button uk-button-primary" <div class="uk-inline uk-margin-top">
routerLink="/about/learn-how">LEARN <a class="uk-button uk-button-primary" routerLink="/about/learn-how">LEARN MORE</a>
HOW</a></div>
</div> </div>
<div class="uk-width-expand"><img src="assets/connect-assets/home/dashboard.svg" style="height:370px"/> </div>
<!-- <div class="uk-width-expand"></div>-->
<!-- uk-parallax="viewport: -5.5;"-->
<!-- <div class="uk-width-expand uk-position-fixed uk-position-bottom-right" uk-parallax="y: 0; easing: 0.8">-->
<!-- <div class="uk-width-expand" uk-parallax="y: 800; easing: 0.8-->
<!-- <div class="uk-width-expand" uk-parallax="bgy: 500">-->
<!-- <img src="assets/connect-assets/home/connect_long_image.png"/>-->
<!--&lt;!&ndash; <img src="assets/connect-assets/home/connect_long_image.png" style="transform: translateY(0px);" class="" uk-parallax="y: 1000; easing: 0.8">&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</div> </div>
</div> </div>
</div> <div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
</div>
<div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages> <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div> </div>
<div *ngIf="!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-section"> <div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large uk-margin-large-top">
<div class="uk-padding-small"> <h2 class="uk-h1 uk-margin-medium-top">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
<h3 class="uk-text-center">Community Gateways already in action</h3> <div [class]="'uk-margin-large-top' + (researchCommunities.length <= 3 ? ' uk-margin-large-bottom' : '')">
<div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div <div
class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2 uk-text-center" class="uk-visible@l uk-grid-match uk-grid-medium uk-flex-center uk-text-center"
uk-grid uk-height-match=".community"> uk-grid uk-height-match=".community-logo">
<div *ngFor="let community of researchCommunities.slice(0, 5); let i = index"> <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-padding-small portalSearchCard"> <div class="uk-card uk-card-default uk-card-hover">
<browse-community [community]=community></browse-community>
</div>
</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> <browse-community [community]=community></browse-community>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="uk-text-center uk-margin-large-top uk-margin-medium-bottom">
<div class="uk-text-right uk-margin-top"> <a *ngIf="researchCommunities.length > 3"
<a *ngIf="researchCommunities.length > 5" class="uk-display-inline-block uk-text-uppercase uk-button-text"
class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"
routerLinkActive="router-link-active" routerLink="/search/find/communities"> routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<span> Browse All</span> <span>View All</span>
<span uk-icon="chevron-right"></span> <!-- <span uk-icon="chevron-right"></span>-->
</span> </span>
</a> </a>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small"> <div class="">
<h3 class="uk-text-center">Our mission for an Open and FAIR science</h3> <section-scroll [customClass]="'uk-margin-large-top uk-section uk-section-primary uk-padding-remove-top '"
<div class="uk-margin-medium-top"> [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 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>
<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>
</section-scroll>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-top">
<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>
<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=""
uk-height-match=".target"> uk-height-match=".target">
<div class="uk-first-column"> <div class="uk-first-column">
<div class="uk-card uk-card-default uk-card-body"> <div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top"> <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
<div class="target" style="min-height: 110px;"><img src="assets/connect-assets/home/1.svg" uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
style="height:80px; width:94px"/></div> <div class="target"><img src="assets/connect-assets/home/virtual.svg"
style="height:60px; width:67px"/></div>
</div> </div>
<div class="uk-margin-top"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center"> <div class="target uk-text-center">
<div class="uk-text-bold uk-margin-small-bottom">A Virtual Research Environment</div> <h6 class="uk-6 uk-card-title uk-margin-small-bottom">A Virtual Research Environment</h6>
<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 publications,
data, software, methods. In one place. data, software, methods. In one place.
</div> </div>
</div> </div>
<hr/> <hr/>
<div> <div>
<ul class="uk-list text-small"> <ul class="uk-list uk-text-small">
<li> <!-- <li>-->
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <!-- <div class="uk-margin-small-right uk-icon uk-text-primary" uk-icon="check">-->
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20" <!-- <svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"-->
xmlns="http://www.w3.org/2000/svg"> <!-- xmlns="http://www.w3.org/2000/svg">-->
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline> <!-- <polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>-->
</svg> <!-- </svg>-->
</div> <!-- </div>-->
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Access to OpenAIRE research graph Access to OpenAIRE research graph
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Moderated, front-end linking Moderated, front-end linking
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Cross-platform search Cross-platform search
</li> </li>
</ul> </ul>
@ -104,45 +158,31 @@
</div> </div>
</div> </div>
<div> <div>
<div class="uk-card uk-card-default uk-card-body"> <div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top"> <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
<div class="target"><img src="assets/connect-assets/home/2.svg" style="height:110px; width:101px"/></div> 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> </div>
<div class="uk-margin-top"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style=""> <div class="target uk-text-center" style="">
<div class="uk-text-bold uk-margin-small-bottom">Open Science in action</div> <h6 class="uk-h6 uk-card-title uk-margin-small-bottom">Open Science in action</h6>
<div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
part of the&nbsp;European Open Science Cloud. part of the&nbsp;European Open Science Cloud.
</div> </div>
</div> </div>
<hr> <hr>
<div> <div>
<ul class="uk-list text-small"> <ul class="uk-list uk-text-small">
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Use of OpenAIRE Guidelines Use of OpenAIRE Guidelines
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Publish and get DOIs with Zenodo Publish and get DOIs with Zenodo
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
EOSC Single Sign-On EOSC Single Sign-On
</li> </li>
</ul> </ul>
@ -151,46 +191,32 @@
</div> </div>
</div> </div>
<div> <div>
<div class="uk-card uk-card-default uk-card-body"> <div class="uk-card uk-card-default uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top"> <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
<div class="target" style="min-height: 110px;"><img src="assets/connect-assets/home/3.svg" uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
style="height:100px; width:107px"/></div> <div class="target"><img src="assets/connect-assets/home/customize.svg"
style="height:60px; width:67px"/></div>
</div> </div>
<div class="uk-margin-top"> <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="target uk-text-center" style=""> <div class="target uk-text-center" style="">
<div class="uk-text-bold uk-margin-small-bottom">Customized to your needs</div> <h6 class="uk-h6 uk-card-title uk-margin-small-bottom">Customized to your needs</h6>
<div>A Gateway with your own brand, rules for aggregation, text &amp; data mining, and presentation. Run <div>A Gateway with your own brand, rules for aggregation, text &amp; data mining, and presentation. Run
by you via a simple, yet powerful backend administration tool. by you via a simple, yet powerful backend administration tool.
</div> </div>
</div> </div>
<hr> <hr>
<div> <div>
<ul class="uk-list text-small"> <ul class="uk-list uk-text-small">
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Access control Access control
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Analytics: rich set of indicators Analytics: rich set of indicators
</li> </li>
<li> <li class="uk-flex uk-flex-middle">
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check"> <icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
<svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>
</svg>
</div>
Look &amp; feel to match your brand Look &amp; feel to match your brand
</li> </li>
</ul> </ul>
@ -202,140 +228,130 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large"> <!--<div class="uk-section uk-container uk-container-large">-->
<div class="uk-padding-small"> <!-- <div class="uk-padding-small">-->
<div class="uk-slider" <!-- <div class="uk-slider"-->
uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true"> <!-- uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">-->
<div class="uk-slider-container"> <!-- <div class="uk-slider-container">-->
<ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);"> <!-- <ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);">-->
<li class="ng-star-inserted uk-active" tabindex="-1"> <!-- <li class="ng-star-inserted uk-active" tabindex="-1">-->
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid=""> <!-- <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<div class="uk-first-column"> <!-- <div class="uk-first-column">-->
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/deposit.gif"/> <!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/deposit.gif"/>-->
</div> <!-- </div>-->
<div class="uk-margin-top"> <!-- <div class="uk-margin-top">-->
<div> <!-- <div>-->
<h4 class="">Find a repository to deposit your research outcome</h4> <!-- <h4 class="">Find a repository to deposit your research outcome</h4>-->
<div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research <!-- <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
communities, both established and emerging ones. Our service helps you reach out and engage all your <!-- 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. <!-- researchers to practice open science out-of-the-box.-->
</div> <!-- </div>-->
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase" <!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
routerLink="/about/learn-how">learn more</a></div> <!-- routerLink="/about/learn-how">learn more</a></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<li tabindex="-1"> <!-- <li tabindex="-1">-->
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid=""> <!-- <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<div class="uk-first-column"> <!-- <div class="uk-first-column">-->
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/link.gif"/> <!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/link.gif"/>-->
</div> <!-- </div>-->
<div class="uk-margin-top"> <!-- <div class="uk-margin-top">-->
<div> <!-- <div>-->
<h4 class="">Link your research output with your community, funding, and other research <!-- <h4 class="">Link your research output with your community, funding, and other research-->
products</h4> <!-- products</h4>-->
<div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research <!-- <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
communities, both established and emerging ones. Our service helps you reach out and engage all your <!-- 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. <!-- researchers to practice open science out-of-the-box.-->
</div> <!-- </div>-->
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase" <!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
routerLink="/about/learn-how">learn more</a></div> <!-- routerLink="/about/learn-how">learn more</a></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<li tabindex="-1"> <!-- <li tabindex="-1">-->
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid=""> <!-- <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<div class="uk-first-column"> <!-- <div class="uk-first-column">-->
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/overview.gif"/> <!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/overview.gif"/>-->
</div> <!-- </div>-->
<div class="uk-margin-top"> <!-- <div class="uk-margin-top">-->
<div> <!-- <div>-->
<h4 class="">View community&#39;s overview at a glance</h4> <!-- <h4 class="">View community&#39;s overview at a glance</h4>-->
<div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research <!-- <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
communities, both established and emerging ones. Our service helps you reach out and engage all your <!-- 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. <!-- researchers to practice open science out-of-the-box.-->
</div> <!-- </div>-->
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase" <!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
routerLink="/about/learn-how">learn more</a></div> <!-- routerLink="/about/learn-how">learn more</a></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<li tabindex="-1"> <!-- <li tabindex="-1">-->
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid=""> <!-- <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<div class="uk-first-column"> <!-- <div class="uk-first-column">-->
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/results.gif"/> <!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/results.gif"/>-->
</div> <!-- </div>-->
<div class="uk-margin-top"> <!-- <div class="uk-margin-top">-->
<div> <!-- <div>-->
<h4 class="">Search &amp; browse your community&#39;s research products.</h4> <!-- <h4 class="">Search &amp; browse your community&#39;s research products.</h4>-->
<div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research <!-- <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
communities, both established and emerging ones. Our service helps you reach out and engage all your <!-- 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. <!-- researchers to practice open science out-of-the-box.-->
</div> <!-- </div>-->
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase" <!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
routerLink="/about/learn-how">learn more</a></div> <!-- routerLink="/about/learn-how">learn more</a></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<li tabindex="-1"> <!-- <li tabindex="-1">-->
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid=""> <!-- <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<div class="uk-first-column"> <!-- <div class="uk-first-column">-->
<img class="uk-border-rounded uk-box-shadow-large" <!-- <img class="uk-border-rounded uk-box-shadow-large"-->
src="assets/connect-assets/home/gifs/graph-analysis.gif"/> <!-- src="assets/connect-assets/home/gifs/graph-analysis.gif"/>-->
</div> <!-- </div>-->
<div class="uk-margin-top"> <!-- <div class="uk-margin-top">-->
<div> <!-- <div>-->
<h4 class="">View statistics for your community&#39;s research products.</h4> <!-- <h4 class="">View statistics for your community&#39;s research products.</h4>-->
<div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research <!-- <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
communities, both established and emerging ones. Our service helps you reach out and engage all your <!-- 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. <!-- researchers to practice open science out-of-the-box.-->
</div> <!-- </div>-->
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase" <!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
routerLink="/about/learn-how">learn more</a></div> <!-- routerLink="/about/learn-how">learn more</a></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
</ul> <!-- </ul>-->
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"> <!-- <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">-->
<!-- <li class="uk-active" uk-slider-item="0"></li>--> <!--&lt;!&ndash; <li class="uk-active" uk-slider-item="0"></li>&ndash;&gt;-->
<!-- <li uk-slider-item="1"></li>--> <!--&lt;!&ndash; <li uk-slider-item="1"></li>&ndash;&gt;-->
<!-- <li uk-slider-item="2"></li>--> <!--&lt;!&ndash; <li uk-slider-item="2"></li>&ndash;&gt;-->
<!-- <li uk-slider-item="3"></li>--> <!--&lt;!&ndash; <li uk-slider-item="3"></li>&ndash;&gt;-->
<!-- <li uk-slider-item="4"></li>--> <!--&lt;!&ndash; <li uk-slider-item="4"></li>&ndash;&gt;-->
</ul> <!-- </ul>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!--</div>-->
<!--<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <!--<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>--> [texts]="pageContents['bottom']"></helper>-->
<!--<div class="uk-section" style="background-color: #D9D8E8;">--> <!--<div class="uk-section" style="background-color: #D9D8E8;">-->
<div class="uk-section contactUsBackground"> <div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<div class="uk-container uk-text-center"> <h2 class="uk-h2 uk-margin-medium-top">
<!-- <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">--> Let us Help you Develop a<br/>Collaborative Science<br/>
<!-- <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-first-column"><img--> Gateway<span class="uk-text-primary">.</span>
<!-- src="assets/connect-assets/contact/1.png" style="width:237px"/></div>--> It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span>
<!-- <div class="uk-width-expand">--> </h2>
<h3>Let us Help you Develop a <a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">CONTACT US</a>
<!-- <br/>-->
Collaborative Science
<br/>
Gateway.
<!-- <br/>-->
It is fast. It is reliable.</h3>
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
<div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a></div>
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<div class="uk-section-muted">
<div class="uk-container uk-container-large">
<other-portals [properties]="properties"></other-portals>
</div> </div>
</div> </div>
<!--<div class="uk-section-muted">-->
<!-- <div class="uk-container uk-container-large">-->
<!-- <other-portals [properties]="properties"></other-portals>-->
<!-- </div>-->
<!--</div>-->

16
src/app/communities/communities.component.ts
View File

@ -14,6 +14,8 @@ import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {properties} from "../../environments/environment"; import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {Session, User} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
@Component({ @Component({
selector: 'communities', selector: 'communities',
@ -22,6 +24,7 @@ import {Subscriber} from "rxjs";
export class CommunitiesComponent { export class CommunitiesComponent {
private subscriptions = []; private subscriptions = [];
private user: User;
public pageTitle = "OpenAIRE" public pageTitle = "OpenAIRE"
public researchCommunities: CommunityInfo[] = []; public researchCommunities: CommunityInfo[] = [];
@ -47,7 +50,8 @@ export class CommunitiesComponent {
private _piwikService: PiwikService, private _piwikService: PiwikService,
private _communitiesService: CommunitiesService, private _communitiesService: CommunitiesService,
private helper: HelperService, private helper: HelperService,
private seoService: SEOService) { private seoService: SEOService,
private userManagementService: UserManagementService) {
var description = "OpenAIRE - Connect, Community Dashboard, research community"; var description = "OpenAIRE - Connect, Community Dashboard, research community";
var title = "OpenAIRE - Connect"; var title = "OpenAIRE - Connect";
@ -70,7 +74,13 @@ export class CommunitiesComponent {
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subscriptions.push(this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe()); this.subscriptions.push(this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe());
} }
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
this.getCommunities(); this.getCommunities();
},
error => {
this.getCommunities();
}));
this.createGifs(); this.createGifs();
//this.getDivContents(); //this.getDivContents();
this.getPageContents(); this.getPageContents();
@ -97,6 +107,8 @@ export class CommunitiesComponent {
this.subscriptions.push(this._communitiesService.getCommunitiesState().subscribe( this.subscriptions.push(this._communitiesService.getCommunitiesState().subscribe(
communitiesResults => { communitiesResults => {
console.log("getCommunitiesState", communitiesResults);
if(!communitiesResults){ if(!communitiesResults){
return; return;
} }
@ -107,6 +119,8 @@ export class CommunitiesComponent {
this.sort(communitiesResults); this.sort(communitiesResults);
communitiesResults.forEach((community, index) => { communitiesResults.forEach((community, index) => {
let showCommunity: boolean = true; let showCommunity: boolean = true;
community.isSubscribed = Session.isSubscribedTo('community', community.communityId, this.user);
if (community['status'] == "hidden" || community['status'] == "manager") { if (community['status'] == "hidden" || community['status'] == "manager") {
showCommunity = false; showCommunity = false;
} }

4
src/app/communities/communities.module.ts
View File

@ -18,13 +18,15 @@ import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.mo
import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module"; import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module";
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module"; import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard"; import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
import {SectionScrollModule} from "../openaireLibrary/utils/section-scroll/section-scroll.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, CommonModule, FormsModule, RouterModule,
ManageModule, ErrorMessagesModule, ManageModule, ErrorMessagesModule,
SearchFormModule, BrowseCommunityModule, GifSliderModule, OtherPortalsModule, SearchFormModule, BrowseCommunityModule, GifSliderModule, OtherPortalsModule,
HelperModule, SEOServiceModule HelperModule, SEOServiceModule, SectionScrollModule, IconsModule
], ],
declarations: [ declarations: [
CommunitiesComponent CommunitiesComponent

16
src/assets/connect-custom.css
View File

@ -8,6 +8,7 @@ Custom connect css
--button-primary-background-image: none; --button-primary-background-image: none;
--button-secondary-background: var(--secondary-color); --button-secondary-background: var(--secondary-color);
--button-secondary-background-image: none; --button-secondary-background-image: none;
--button-primary-color: var(--font-default-color);
/*backgrounds*/ /*backgrounds*/
--primary-background: #2C2C2C; --primary-background: #2C2C2C;
@ -19,6 +20,21 @@ Custom connect css
/*--secondary-background: var(--secondary-color);*/ /*--secondary-background: var(--secondary-color);*/
} }
.whiteBackground {
background-color: #fff;
}
.homeBackgroundImage {
background-image: url(~src/assets/connect-assets/home/connect_long_image.png);
}
.community-logo img {
max-height: 76px;
max-width: 100%;
height: auto;
}
/*OLD css*/ /*OLD css*/
/*:root {*/ /*:root {*/