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

[Trunk|Connect]: 1. Create about component. 2. Change connect start page view. 3. Add temp imgs 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56185 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-06-24 14:11:27 +00:00
parent 3f12c19efa
commit 8db7e10f95
19 changed files with 421 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -8,7 +8,7 @@ import { OpenaireErrorPageComponent } from './error/errorPage.component';
const routes: Routes = [
{ path: '', loadChildren: './communitywrapper/communityWrapper.module#CommunityWrapperModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'how-to-create-community', loadChildren: './createCommunity/community-creation-instructions.module#CommunityCreationInstructionsModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'learn-how', loadChildren: './learn-how/learn-how.module#LearnHowModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'contact', loadChildren: './contact/contact.module#ContactModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'invite', loadChildren: './utils/subscribe/invite/invite.module#InviteModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
{ path: 'about', loadChildren: './htmlPages/about/aboutPage.module#AboutPageModule', resolve: { envSpecific: EnvironmentSpecificResolver }},

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

@ -1,24 +1,22 @@
<div class="uk-container" *ngIf="community" >
<span>
<div class="uk-card-media-top">
<a (click)="confirmModalOpen()">
<div style="" class="uk-margin-auto communitiesImageBox">
<div *ngIf="community.status =='manager'" class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
Private
</div>
<div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<span>Subscribed</span>
</div>
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-small uk-responsive-height uk-padding-small">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-padding-small">
<svg width="50" height="37" 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>
</span>
<div class="uk-text-center community-main">
<p class="uk-text-small uk-text-bold uk-margin-small community-title">
<div *ngIf="community.status =='manager'" class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
Private
</div>
<div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<span>Subscribed</span>
</div>
<div class="uk-card-media-top uk-margin-top community uk-padding">
<a (click)="confirmModalOpen()">
<div class="communitiesImageBox uk-position-relative">
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-responsive-height uk-height-small uk-position-center">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-responsive-height uk-height-small uk-position-center">
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
</span>
</div>
</a>
</div>
<div class="community uk-margin">
<div class="uk-text-center uk-text-small uk-text-bold">
<a (click)="confirmModalOpen()">
<span class="uk-text-small uk-margin-small" *ngIf="community.title" >
{{community.title.slice(0,thresholdTitle)}}
@ -29,15 +27,15 @@
<span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
</span>
</a>
</p>
<p class="uk-text-small uk-margin-small community-title2" *ngIf="community.description != null && showDescription">
<span>{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></span>
</p>
</div>
<div class="uk-text-center uk-text-small uk-margin" *ngIf="community.description != null && showDescription">
<span>{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></span>
</div>
</div>
<div *ngIf="community.isManager" class=" uk-margin-small">
<manage [communityId]="community.communityId"></manage>
<div class="uk-position-bottom-right uk-padding-small uk-padding-remove-bottom">
<a (click)="confirmModalOpen()" class="portal-color uk-text-uppercase uk-text-bold">
Visit
</a>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">

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

@ -1,153 +1,232 @@
<div *ngIf="loading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!loading" class="image-front-topbar uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
<div *ngIf="!loading" class="image-front-topbar uk-section-large banner-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class=" uk-section uk-padding-remove-bottom">
<div class="uk-position-cover" style=""></div>
<div class="uk-position-relative uk-panel">
<div class="uk-container uk-section">
<div class="uk-container uk-container-large">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<h3 class="uk-margin-large-top">My Communities</h3>
<div *ngIf="managerOfCommunities.length > 0">
<h5 class="uk-margin-small-bottom">You are managing</h5>
<div class="uk-container">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
<div *ngIf="managerOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
<div class="uk-width-1-2">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
<a [queryParams]="{role: quote('manager')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all {{managerOfCommunities.length | number}} ></u>
</a>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{role: quote('manager')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{managerOfCommunities.length | number}}) ></div>
</a>
</div>
</div>
</div>
<div class="uk-container uk-margin uk-margin-small-left uk-width-4-5">
<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>
<div *ngIf="subscriberOfCommunities.length > 0">
<h5 class="uk-margin-small-bottom uk-margin-small-top">You are subscribed to</h5>
<div class="uk-container">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
<div *ngIf="subscriberOfCommunities.length > 0" uk-grid>
<h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
<div class="uk-width-1-2">
<div class="uk-grid-match uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default communityCard"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
<browse-community [community]=community [showDescription]=false></browse-community>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
<a [queryParams]="{status: quote('subscribed')}" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
<div>View all ({{subscriberOfCommunities.length | number}}) ></div>
</a>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
<a [queryParams]="{status: quote('subscribed')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all {{subscriberOfCommunities.length | number}} ></u>
</a>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0">
<h3 class="uk-margin-remove-bottom uk-margin-large-top">Embrace Open Science with OpenAIRE Connect</h3>
<h5 class="uk-margin-remove-top">A platform to manage your community profile and to share, access and link community research results</h5>
<!--div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">
<h5>Create and manage your research community page</h5>
<div>
<a class="uk-button portal-button" [queryParams]="" routerLinkActive="router-link-active" routerLink="/how-to-create-community"> LEARN HOW</a>
</div>
</div-->
<div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom">
<div class="uk-position-center ">
<div class="uk-width-medium uk-text-center">
<h5>Create and manage your research community page</h5>
<div>
<a class="uk-button portal-button" routerlink="/how-to-create-community" routerlinkactive="router-link-active" ng-reflect-router-link="/how-to-create-community" ng-reflect-router-link-active="router-link-active" href="/how-to-create-community"> LEARN HOW</a>
</div>
</div>
</div>
<br>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
<div class="uk-width-2-5">
<h1 style="font-size: 41px">A <b>Gateway</b> to the future of your <b>Community</b></h1>
<div class="uk-text-large">Turn Open Science into Practice. It takes your open and linked research outcomes. A service customized to your needs.</div>
</div>
<div class="uk-width-1-1 uk-inline uk-margin-large-top uk-margin-large-bottom">
<a class="uk-button portal-button" routerLink="/learn-how" routerLinkActive="router-link-active"> LEARN HOW</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!loading" class="uk-margin-top">
<div class="">
<div class="uk-margin-bottom uk-margin-medium-top">
<div class="uk-container uk-margin-small-bottom">
<h3>Search, share, link results of your research community</h3>
</div>
<div class="uk-container">
<h5 class=" uk-width-expand uk-margin-remove-bottom uk-text-bold">Find your community</h5>
<search-form [setFormCentered]=false placeholderText="Search for Research Communities and Initiatives" link="/search/find/communities"></search-form>
<div class="uk-container uk-container-large uk-margin-large-bottom">
<h1 class="uk-text-center uk-text-bold" style="font-size: 28px">Our mission for an Open and FAIR science</h1>
</div>
<div class="uk-container uk-container-large" uk-height-match=".target">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/2.png" class="uk-align-center" width="111" height="153">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">A Virtual Research Environment</h5>
<div>An overlay platform making it easy to share, link, disseminate and monitor all your publications, data, software, methods. In one place.</div>
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Access to OpenAIRE resources
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Moderated, front-end linking
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Cross-platform search
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/3.png" class="uk-align-center" width="162" height="155">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">Open Science in action</h5>
<div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral part of the European Open Science Cloud.</div>
<div class="uk-container">
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Use of OpenAIRE Guidelines
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
DOIs via Zenodo
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
EOSC Single Sign-On
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
<div class="uk-card-media-top target">
<img src="../../assets/1.png" class="uk-align-center" width="180" height="130">
</div>
<div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
<div class="uk-width-1-1 uk-text-center target">
<h5 class="uk-text-bold">Customized to your needs</h5>
<div>A Gateway with your own brand, rules for aggregation, text & data mining, and presentation. Run by you via a simple, yet powerful backend administration tool.</div>
</div>
<div class="uk-width-1-1">
<ul class="uk-list">
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Access control
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Analytics: rich set of indicators
</li>
<li>
<span class="uk-border-circle connectCheckIcon" uk-icon="check">
</span>
Look & feel to match your brand
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<gif-slider></gif-slider>
</div>
</div>
<div class="uk-container uk-container-large">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf= "researchCommunities.length > 0" class="uk-container uk-margin-medium-top">
<h5 class="uk-width-expand uk-text-bold">Browse Research Communities</h5>
<div [class]="'uk-container uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div *ngIf= "researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-medium-top">
<h1 class="uk-text-bold" style="font-size: 28px">Community Gateways already in action</h1>
<div [class]="'uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
<div *ngFor="let community of researchCommunities.slice(0,5); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
<div *ngFor="let community of researchCommunities; let i = index">
<div class="uk-padding uk-padding-remove-vertical uk-height-max-large uk-card uk-card-default communityCard">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
</div>
<div class="uk-text-right">
<a *ngIf="researchCommunities.length > 5"
[queryParams]="{type: quote('community')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all <span *ngIf="researchCommunities.length > 1">{{researchCommunities.length | number}}</span> Research Communities ></u>
</a>
</div>
</div>
<div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr">
<h5 class="uk-width-expand"><b>Browse Research Initiatives</b></h5>
<div [class]="'uk-container uk-margin-top' + (researchInitiatives.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
<div *ngFor="let community of researchInitiatives.slice(0,5); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
<browse-community [community]=community></browse-community>
</div>
</div>
</div>
</div>
<div class="uk-text-right">
<a *ngIf="researchInitiatives.length > 5"
[queryParams]="{type: quote('ri')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all <span *ngIf="researchInitiatives.length > 1">{{researchInitiatives.length | number}}</span> Research Initiatives ></u>
<div class="uk-text-right uk-margin-top">
<!--[queryParams]="{type: quote('community')}"-->
<a *ngIf="researchCommunities.length > 5" class="portal-color uk-text-uppercase uk-text-bold"
routerLinkActive="router-link-active" routerLink="/search/find/communities">
Browse All >
</a>
</div>
</div>
</div>
</div>
</div>
<div class="eventsBackground uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<helper div="test1-connect-first-page"></helper>
</div>
</div>
<div class="banner2-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
<div class="uk-width-1-2"></div>
<div class="uk-width-1-2">
<h1 style="font-size: 28px">Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
<div class="uk-text-large">Get in touch with our team to find out how.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">
<a class="uk-button portal-button" routerLink="/contact" routerLinkActive="router-link-active"> CONTACT US</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<div uk-grid="" class="uk-grid uk-margin-large-top uk-margin-large-bottom">

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

@ -22,6 +22,7 @@ export class CommunitiesComponent {
public piwiksub: any;
public pageTitle = "OpenAIRE"
// TODO remove initiatives
public researchCommunities = [];
public researchInitiatives = [];
public subscriberOfCommunities = [];
@ -112,12 +113,13 @@ export class CommunitiesComponent {
}
if(showCommunity) {
if(community.type == "community"){
// TODO remove
/*if(community.type == "community"){
this.researchCommunities.push(community);
} else if(community.type == "ri") {
this.researchInitiatives.push(community);
}
}*/
this.researchCommunities.push(community);
if(isManager) {
community.isManager = true;
this.managerOfCommunities.push(community);

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

@ -16,11 +16,12 @@ import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.m
import {SearchFormModule} from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
import {BrowseCommunityModule} from './browseCommunity/browse-community.module';
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
ManageModule, ErrorMessagesModule,
SearchFormModule, BrowseCommunityModule, HelperModule
SearchFormModule, BrowseCommunityModule, HelperModule, GifSliderModule
],
declarations: [
CommunitiesComponent

2
src/app/contact/contact.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!showLoading" class="image-front-topbar uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div *ngIf="!showLoading" class="image-front-topbar background uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div style=" min-height: 350px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="uk-margin-top uk-align-center">
<div class="uk-section uk-section-large">

16
src/app/learn-how/learn-how-routing.module.ts Normal file
View File

@ -0,0 +1,16 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {LearnHowComponent} from "./learn-how.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: LearnHowComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
])
]
})
export class LearnHowRoutingModule { }

128
src/app/learn-how/learn-how.component.ts Normal file
View File

@ -0,0 +1,128 @@
import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
@Component({
selector: 'learn-how',
template: `
<div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class="uk-section uk-padding-remove-bottom" >
<div class="uk-container uk-container-large uk-section">
<div class="uk-margin-large-top" uk-grid>
<h1 class="uk-width-1-1" style="font-size: 52px">Learn the process</h1>
<h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5>
</div>
</div>
<div class="uk-section-muted"> <!--background-->
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2">
<h1>Our main features</h1>
<span>OpenAIRE offers the Research Community Dashboard as a key service for research communities, whether they are established or emerging, helping you reach out and engage all your researchers to practice open science out-of-the-box.</span>
</div>
<div class="uk-width-1-2">
eikona
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2">
<h1>Our main features</h1>
<span>OpenAIRE offers the Research Community Dashboard as a key service for research communities, whether they are established or emerging, helping you reach out and engage all your researchers to practice open science out-of-the-box.</span>
</div>
<div class="uk-width-1-2 uk-flex-first">
eikona
</div>
</div>
</div>
<div class="uk-section-muted"> <!--background-->
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2">
<h1>We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
<span>Get in touch with our team to find out how.</span>
<div class="uk-margin-top">
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
</div>
</div>
<div class="uk-width-1-2">
eikona
</div>
</div>
</div>
</div>
<div *ngIf="questions.length > 0" class="uk-container">
<h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
<div class="uk-width-1-1 uk-section">
<ul uk-accordion>
<li *ngFor="let question of questions; let i=index" [ngClass]="(i===0)?'uk-open':''">
<a class="uk-accordion-title">{{question.question}}</a>
<div class="uk-accordion-content uk-height-max-small uk-overflow-auto">
<p>{{question.answer}}
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
`
})
export class LearnHowComponent {
public piwiksub: any;
questions: FAQ[] = [
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
}
];
private pageTitle = "OpenAIRE - Connect | Learn How";
properties:EnvProperties;
constructor (
private route: ActivatedRoute,
private _router: Router,
private _title: Title,
private _piwikService: PiwikService) {
var description = "OpenAIRE - Connect, Community Dashboard, research community";
this._title.setTitle(this.pageTitle);
}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
}
});
}
public ngOnDestroy() {
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
}

26
src/app/learn-how/learn-how.module.ts Normal file
View File

@ -0,0 +1,26 @@
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {LearnHowComponent} from "./learn-how.component";
import {LearnHowRoutingModule} from "./learn-how-routing.module";
@NgModule({
imports: [
CommonModule, RouterModule, LearnHowRoutingModule
],
declarations: [
LearnHowComponent
],
exports: [
LearnHowComponent
],
providers:[
FreeGuard, PreviousRouteRecorder, PiwikService
]
})
export class LearnHowModule { }

BIN
src/assets/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
src/assets/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

BIN
src/assets/Connect animations.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
src/assets/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 699 KiB

BIN
src/assets/banner 2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/banner connect.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

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

@ -27,10 +27,6 @@
.communitiesImageBox{
/*width:284px; height:109px;*/
width:107px; height:57px;
}
.tm-toolbar .uk-subnav-line .custom-connect-li {
background:var(--portal-main-color) !important;
}
@ -43,12 +39,51 @@
.mainPageSearchForm {
background-image: url("./home.jpg") !important;
background-image: url("./banner connect.jpg") !important;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
min-height: calc(100vh - 412.767px);
}
.banner-connect {
background-image: url("./banner connect.jpg") !important;
background-color: rgb(255, 255, 255);
}
.banner2-connect {
background-image: url("./banner 2.jpg") !important;
background-color: rgb(255, 255, 255);
}
.background {
background-image: url("./background.jpg") !important;
background-color: rgb(255, 255, 255);
}
.eventsBackground {
background-color: rgb(255, 239, 150);
}
.communitiesImageBox{
width:107px; height:57px;
}
.connectInfoCard {
background: #ECF3FD;
border: #707070 solid 1px;
border-radius: 10px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.24);
}
.connectCheckIcon {
background: rgba(0, 0, 0, 0.60);
color: white;
}
.communityCard {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.rc-label{
color:black !important;
background-color: #FFC700 !important;

2
src/assets/env-properties.json
View File

@ -56,7 +56,7 @@
"cacheUrl" :"http://scoobydoo.di.uoa.gr:3000/get?url=",
"adminToolsAPIURL" :"http://duffy.di.uoa.gr:8080/uoa-admin-tools",
"adminToolsAPIURL" :"http://mpagasas.di.uoa.gr:8080/uoa-admin-tools",
"adminToolsCommunity" :"connect",
"datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",

6
src/index.html
View File

@ -49,7 +49,7 @@
if((errorMsg && errorMsg.indexOf("uikit.js") != -1) || url.indexOf("uikit.js") != -1 ){
console.log("********UIKIT Error ***********");
$.getScript("assets/common-assets/common/uikit.min.js");
$.getScript("assets/common-assets/common/uikit-icons-min.js");
$.getScript("assets/common-assets/common/uikit-icons.min.js");
}
}
@ -58,13 +58,13 @@
<script src="assets/common-assets/common/jquery.js"></script>
<script src="assets/common-assets/citeproc.js"></script>
<!-- <script src="assets/common-assets/common/uikit.js"></script> -->
<script src="assets/common-assets/common/uikit-icons-min.js"></script>
<script src="assets/common-assets/common/uikit-icons.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<script>
$(document).ready(function(){
console.log("Is ready - load uikit ***")
$.getScript("assets/common-assets/common/uikit.min.js");
$.getScript("assets/common-assets/common/uikit-icons-min.js");
$.getScript("assets/common-assets/common/uikit-icons.min.js");
});
</script>