MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 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

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

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

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 {properties} from "../../../environments/environment";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
import {Visibility} from "../../openaireLibrary/monitor/entities/stakeholder";
@Component({
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";
// cut title too
// 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;
properties: EnvProperties;
public directLink: boolean = true;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'],
["RESTRICTED", 'group']
]);
constructor(private route: ActivatedRoute,
private router: Router,
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 {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module";
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
SearchFormModule, ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule
SearchFormModule, ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule, IconsModule
],
declarations: [
BrowseCommunityComponent

522
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="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-grid uk-flex uk-flex-bottom">
<div class="uk-width-1-2@m uk-width-1-1@s uk-margin-bottom">
<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="image-front-topbar">
<!-- style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)">-->
<div class="uk-section whiteBackground
uk-background-fixed uk-background-bottom-right uk-background-norepeat
homeBackgroundImage">
<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>
<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>It takes your open and linked research outcomes.</li>
<li>A service customized to your needs.</li>
</ul>
<div class="uk-inline uk-margin-top" style="margin-bottom: 50px"><a class="uk-button uk-button-primary"
routerLink="/about/learn-how">LEARN
HOW</a></div>
</div>
<div class="uk-width-expand"><img src="assets/connect-assets/home/dashboard.svg" style="height:370px"/>
<div class="uk-inline uk-margin-top">
<a class="uk-button uk-button-primary" routerLink="/about/learn-how">LEARN MORE</a>
</div>
</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 *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-container uk-container-large uk-section">
<div class="uk-padding-small">
<h3 class="uk-text-center">Community Gateways already in action</h3>
<div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<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-grid-match uk-grid-small 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 portalSearchCard">
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>
</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>
</div>
</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="uk-text-right uk-margin-top">
<a *ngIf="researchCommunities.length > 5"
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> Browse All</span>
<span uk-icon="chevron-right"></span>
</span>
</a>
<div class="">
<section-scroll [customClass]="'uk-margin-large-top uk-section uk-section-primary uk-padding-remove-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>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<h3 class="uk-text-center">Our mission for an Open and FAIR science</h3>
<div class="uk-margin-medium-top">
<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=""
uk-height-match=".target">
<div class="uk-first-column">
<div class="uk-card uk-card-default uk-card-body">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target" style="min-height: 110px;"><img src="assets/connect-assets/home/1.svg"
style="height:80px; width:94px"/></div>
<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>
<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="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,
data, software, methods. In one place.
</div>
</div>
<hr/>
<div>
<ul class="uk-list text-small">
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<ul class="uk-list uk-text-small">
<!-- <li>-->
<!-- <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"-->
<!-- 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>-->
<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
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Moderated, front-end linking
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Cross-platform search
</li>
</ul>
@ -104,45 +158,31 @@
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target"><img src="assets/connect-assets/home/2.svg" style="height:110px; width:101px"/></div>
<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>
<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="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
part of the&nbsp;European Open Science Cloud.
</div>
</div>
<hr>
<div>
<ul class="uk-list text-small">
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<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>
Use of OpenAIRE Guidelines
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Publish and get DOIs with Zenodo
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
EOSC Single Sign-On
</li>
</ul>
@ -151,46 +191,32 @@
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target" style="min-height: 110px;"><img src="assets/connect-assets/home/3.svg"
style="height:100px; width:107px"/></div>
<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>
<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="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
by you via a simple, yet powerful backend administration tool.
</div>
</div>
<hr>
<div>
<ul class="uk-list text-small">
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<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>
Access control
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Analytics: rich set of indicators
</li>
<li>
<div class="circle connect-background uk-margin-small-right uk-icon" uk-icon="check">
<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>
<li class="uk-flex uk-flex-middle">
<icon class="uk-flex uk-margin-small-right uk-text-primary" name="done"></icon>
Look &amp; feel to match your brand
</li>
</ul>
@ -202,140 +228,130 @@
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-slider"
uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">
<div class="uk-slider-container">
<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">
<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">
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/deposit.gif"/>
</div>
<div class="uk-margin-top">
<div>
<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
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.
</div>
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"
routerLink="/about/learn-how">learn more</a></div>
</div>
</div>
</div>
</li>
<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-first-column">
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/link.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Link your research output with your community, funding, and other research
products</h4>
<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
researchers to practice open science out-of-the-box.
</div>
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"
routerLink="/about/learn-how">learn more</a></div>
</div>
</div>
</div>
</li>
<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-first-column">
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/overview.gif"/>
</div>
<div class="uk-margin-top">
<div>
<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
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.
</div>
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"
routerLink="/about/learn-how">learn more</a></div>
</div>
</div>
</div>
</li>
<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-first-column">
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/results.gif"/>
</div>
<div class="uk-margin-top">
<div>
<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
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.
</div>
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"
routerLink="/about/learn-how">learn more</a></div>
</div>
</div>
</div>
</li>
<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-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/home/gifs/graph-analysis.gif"/>
</div>
<div class="uk-margin-top">
<div>
<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
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.
</div>
<div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"
routerLink="/about/learn-how">learn more</a></div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">
<!-- <li class="uk-active" uk-slider-item="0"></li>-->
<!-- <li uk-slider-item="1"></li>-->
<!-- <li uk-slider-item="2"></li>-->
<!-- <li uk-slider-item="3"></li>-->
<!-- <li uk-slider-item="4"></li>-->
</ul>
</div>
</div>
</div>
</div>
<!--<div class="uk-section uk-container uk-container-large">-->
<!-- <div class="uk-padding-small">-->
<!-- <div class="uk-slider"-->
<!-- uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">-->
<!-- <div class="uk-slider-container">-->
<!-- <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">-->
<!-- <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">-->
<!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/deposit.gif"/>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div>-->
<!-- <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-->
<!-- 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.-->
<!-- </div>-->
<!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!-- routerLink="/about/learn-how">learn more</a></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <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-first-column">-->
<!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/link.gif"/>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div>-->
<!-- <h4 class="">Link your research output with your community, funding, and other research-->
<!-- products</h4>-->
<!-- <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-->
<!-- researchers to practice open science out-of-the-box.-->
<!-- </div>-->
<!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!-- routerLink="/about/learn-how">learn more</a></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <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-first-column">-->
<!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/overview.gif"/>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div>-->
<!-- <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-->
<!-- 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.-->
<!-- </div>-->
<!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!-- routerLink="/about/learn-how">learn more</a></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <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-first-column">-->
<!-- <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/results.gif"/>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div>-->
<!-- <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-->
<!-- 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.-->
<!-- </div>-->
<!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!-- routerLink="/about/learn-how">learn more</a></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <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-first-column">-->
<!-- <img class="uk-border-rounded uk-box-shadow-large"-->
<!-- src="assets/connect-assets/home/gifs/graph-analysis.gif"/>-->
<!-- </div>-->
<!-- <div class="uk-margin-top">-->
<!-- <div>-->
<!-- <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-->
<!-- 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.-->
<!-- </div>-->
<!-- <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!-- routerLink="/about/learn-how">learn more</a></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">-->
<!--&lt;!&ndash; <li class="uk-active" uk-slider-item="0"></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li uk-slider-item="1"></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li uk-slider-item="2"></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li uk-slider-item="3"></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li uk-slider-item="4"></li>&ndash;&gt;-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!--<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>-->
<!--<div class="uk-section" style="background-color: #D9D8E8;">-->
<div class="uk-section contactUsBackground">
<div class="uk-container uk-text-center">
<!-- <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">-->
<!-- <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-first-column"><img-->
<!-- src="assets/connect-assets/contact/1.png" style="width:237px"/></div>-->
<!-- <div class="uk-width-expand">-->
<h3>Let us Help you Develop 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 class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h2 uk-margin-medium-top">
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>
</h2>
<a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">CONTACT US</a>
</div>
</div>
<!--<div class="uk-section-muted">-->
<!-- <div class="uk-container uk-container-large">-->
<!-- <other-portals [properties]="properties"></other-portals>-->
<!-- </div>-->
<!--</div>-->

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

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

@ -8,6 +8,7 @@ Custom connect css
--button-primary-background-image: none;
--button-secondary-background: var(--secondary-color);
--button-secondary-background-image: none;
--button-primary-color: var(--font-default-color);
/*backgrounds*/
--primary-background: #2C2C2C;
@ -19,6 +20,21 @@ Custom connect css
/*--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*/
/*:root {*/