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

Add uikit in angular.json and remove from index.html. Some justifications in about, faqs, contact-us, my-communities

This commit is contained in:
Konstantinos Triantafyllou 2022-05-31 23:18:58 +03:00
parent 480f057247
commit f15692c79b
14 changed files with 243 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@ -49,6 +49,8 @@
"src/material.scss"
],
"scripts": [
"src/assets/openaire-theme/js/uikit.min.js",
"src/assets/openaire-theme/js/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js"
]
},

57
src/app/app.component.ts
View File

@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
@ -21,6 +21,9 @@ import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {Meta} from "@angular/platform-browser";
import {CommunityInfo} from "./openaireLibrary/connect/community/communityInfo";
import {SEOService} from "./openaireLibrary/sharedComponents/SEO/SEO.service";
import {FormBuilder, FormGroup} from "@angular/forms";
import {QuickContactService} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.service";
import {EmailService} from "./openaireLibrary/utils/email/email.service";
@Component({
selector: 'app-root',
@ -40,7 +43,7 @@ import {SEOService} from "./openaireLibrary/sharedComponents/SEO/SEO.service";
<customization *ngIf="properties && showMenu && communityId && communityId.length > 0 && layout" [properties]="properties"
[communityId]="communityId" [layout]="layout" ></customization>
<schema2jsonld *ngIf="properties && showMenu && !community" [URL]="properties.domain + properties.baseLink"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-connect.png'"
[logoURL]="properties.domain + properties.baseLink + logoPath + 'main.svg'"
type="home"
[searchActionRoute]="properties.searchLinkToCommunities" [searchAction]="true"
name="OpenAIRE Connect"
@ -78,6 +81,8 @@ import {SEOService} from "./openaireLibrary/sharedComponents/SEO/SEO.service";
[showSocialButtons]="true" [showMenuItems]="true" [grantAdvance]="false" [showOpenaire]="true"
[communityId]="community.communityId" [menuItems]=bottomMenuItems [properties]="properties"
[darkBackground]="true" [centered]="true"></bottom>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending"></quick-contact>
<role-verification *ngIf="community" service="connect"
[id]="community.communityId" [name]="community.title" [type]="'community'"></role-verification>
</div>
@ -96,26 +101,31 @@ export class AppComponent {
user: User;
communityId: string = "";
header: Header;
logoPath: string = 'assets/common-assets/';
logoPath: string = 'assets/common-assets/logo-services/connect/';
/* Contact */
public showQuickContact: boolean;
public showGetStarted: boolean = true;
public contactForm: FormGroup;
subscriptions = [];
layout: CustomizationOptions = null;
constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
private _communitiesService: CommunitiesService, private smoothScroll: SmoothScroll,
private router: Router, private userManagementService: UserManagementService,
private configurationService: ConfigurationService, private _communityService: CommunityService, private _layoutService: LayoutService, private _meta: Meta, private seoService: SEOService) {
private configurationService: ConfigurationService, private _communityService: CommunityService,
private _layoutService: LayoutService, private _meta: Meta, private seoService: SEOService,
private quickContactService: QuickContactService,
private fb: FormBuilder,
private emailService: EmailService) {
this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) {
if (event.url === '/contact-us') {
this.quickContactService.setDisplay(false);
} else if (event.url !== '/contact-us' && !this.showQuickContact) {
this.quickContactService.setDisplay(true);
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
this.showGetStarted = event.url !== '/get-started';
}
});
this._communitiesService.clearSubscriptions();
this.userManagementService.clearSubscriptions();
this.configurationService.clearSubscriptions();
this._communityService.clearSubscriptions();
this.smoothScroll.clearSubscriptions();
}));
}
ngOnInit() {
@ -140,6 +150,19 @@ export class AppComponent {
this.init()}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
this._communitiesService.clearSubscriptions();
this.userManagementService.clearSubscriptions();
this.configurationService.clearSubscriptions();
this._communityService.clearSubscriptions();
this.smoothScroll.clearSubscriptions();
}
get isManager() {
return Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user) || (this.communityId && Session.isManager('community', this.communityId, this.user))
}
@ -311,8 +334,8 @@ export class AppComponent {
route: restrictedData ? "" : "/",
url: restrictedData ? url : "",
title: 'connect',
logoUrl: this.logoPath + 'logo-large-connect.png',
logoSmallUrl: this.logoPath + 'logo-small-connect.png',
logoUrl: this.logoPath + 'main.svg',
logoSmallUrl: this.logoPath + 'small.svg',
position: 'left',
badge: true
};

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

@ -27,6 +27,7 @@ import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.servi
import {IsCommunity} from "./openaireLibrary/connect/communityGuard/isCommunity.guard";
import {SubscribeService} from "./openaireLibrary/utils/subscribe/subscribe.service";
import {RoleVerificationModule} from "./openaireLibrary/role-verification/role-verification.module";
import {QuickContactModule} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.module";
@NgModule({
@ -45,7 +46,7 @@ import {RoleVerificationModule} from "./openaireLibrary/role-verification/role-v
AppRoutingModule,
BrowserTransferStateModule,
BrowserAnimationsModule,
PageURLResolverModule, Schema2jsonldModule, RoleVerificationModule
PageURLResolverModule, Schema2jsonldModule, RoleVerificationModule, QuickContactModule
],
declarations: [AppComponent, OpenaireErrorPageComponent],
exports: [AppComponent],

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

@ -1,26 +1,24 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div class="uk-container uk-container-large uk-section uk-padding-remove-bottom">
<div>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-section uk-padding-remove-top uk-container uk-container-large">
<div class="uk-section uk-padding-remove-top uk-container uk-container-large uk-flex uk-flex-center"
uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
<div class="uk-position-relative">
<contact-us [sending]="sending" [contactForm]="contactForm" (sendEmitter)="send($event)">
<h1 page-title class="uk-margin-auto">
<contact-us [sending]="sending" [scrollspy]="true"
[contactForm]="contactForm" (sendEmitter)="send($event)">
<h1 page-title class="uk-margin-auto uk-text-center" uk-scrollspy-class>
Contact us to <br> learn more<span class="uk-text-primary">.</span>
</h1>
</contact-us>
<div *ngIf="sending" class="uk-position-center uk-margin-medium-top">
<loading></loading>
</div>
</div>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToHome()">
<modal-alert #modal (alertOutput)="goToHome()">
<div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon.<br>
Press OK to redirect to OpenAIRE Connect home page.
Press OK to redirect to OpenAIRE Monitor home page.
</div>
</modal-alert>

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

@ -31,7 +31,7 @@ export class ContactComponent implements OnInit {
public divContents = null;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Contact us'}];
public contactForm: FormGroup;
@ViewChild('AlertModal') modal;
@ViewChild('modal') modal;
private subscriptions = [];
ngOnDestroy() {

22
src/app/learn-how/faqs/faqs.component.ts
View File

@ -25,7 +25,7 @@ import {properties} from "../../../environments/environment";
<div class="uk-container">
<ul class="uk-accordion" uk-accordion="">
<li>
<a class="uk-accordion-title color" href="#">What is a &quot;Research community&quot;?</a>
<a class="uk-accordion-title" href="#">What is a &quot;Research community&quot;?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>A research community is a community of practice that gathers together researchers and practitioners
with common research interests (e.g. a research discipline or a specific research topic) and,
@ -36,7 +36,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">What is the difference between a Community Gateway and the
<a class="uk-accordion-title" href="#">What is the difference between a Community Gateway and the
Research Community Dashboard (RCD)?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>The RCD offers on demand Community Gateways that communities can customize to fit their sharing,
@ -46,7 +46,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">How can Research Community thematic services integrate with
<a class="uk-accordion-title" href="#">How can Research Community thematic services integrate with
the Research Community Dashboard (RCD)?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>Once a Community Gateway has been created, several thematic service integration patterns are
@ -79,7 +79,7 @@ import {properties} from "../../../environments/environment";
</ol>
</div>
</li>
<li><a class="uk-accordion-title color" href="#">What does my Research Community gain in terms of Open
<li><a class="uk-accordion-title" href="#">What does my Research Community gain in terms of Open
Science?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-grid uk-margin-medium-bottom" hidden="" uk-grid="">
<div class="uk-width-1-1 uk-first-column"><span
@ -108,7 +108,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">How is the service part of the European Open Science Cloud?</a>
<a class="uk-accordion-title" href="#">How is the service part of the European Open Science Cloud?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>OpenAIRE has onboarded in the EOSC Market Place both the RCD, as a service that offers on-demand
Community Gateways, and the Gateways as services openly accessible by researchers to explore specific
@ -117,13 +117,13 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">Who owns the gateway?</a>
<a class="uk-accordion-title" href="#">Who owns the gateway?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>The community owns the portal, OpenAIRE operates it.</p>
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">How is the gateway operated?</a>
<a class="uk-accordion-title" href="#">How is the gateway operated?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>The gateway is hosted on a virtual machine operated by OpenAIRE and hosted at the <a
href="https://icm.edu.pl/en/centre-of-technology/" target="_blank">ICM data centre</a>. The Gateway
@ -136,7 +136,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">What is the SLA of the service?</a>
<a class="uk-accordion-title" href="#">What is the SLA of the service?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<p>The RCD and the gateways are subject to the generic <a class="uk-link"
href="https://www.openaire.eu/service-level-agreement"
@ -145,7 +145,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">What are the costs?</a>
<a class="uk-accordion-title" href="#">What are the costs?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-margin-medium-bottom" hidden="">
<div>Researchers of the community shall not pay to access the Community Gateway.</div>
<div>For the deployment and maintenance of a gateway, OpenAIRE may need support to cover part of the
@ -158,7 +158,7 @@ import {properties} from "../../../environments/environment";
</div>
</li>
<li>
<a class="uk-accordion-title color" href="#">In what other areas can my Research community collaborate with
<a class="uk-accordion-title" href="#">In what other areas can my Research community collaborate with
OpenAIRE?</a>
<div aria-hidden="true" class="uk-accordion-content text-small uk-grid uk-margin-medium-bottom" hidden="" uk-grid="">
<div class="uk-width-1-1">
@ -201,7 +201,7 @@ import {properties} from "../../../environments/environment";
export class FaqsComponent {
public pageTitle: string = "OpenAIRE - Connect | FAQs";
public pageDescription: string = "Frequently asked questions about OpenAIRE Connect research gateway";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about', route: '/about'}, {name: 'FAQs'}];
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About', route: '/about'}, {name: 'FAQs'}];
private subscriptions = [];
public pageContents = null;
public divContents = null;

213
src/app/learn-how/learn-how.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
@ -8,59 +8,46 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {Subscriber} from "rxjs";
import {properties} from "../../environments/environment";
import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
@Component({
selector: 'learn-how',
template: `
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<!-- Redesign start -->
<div class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-margin-top uk-margin-large-bottom">
<div class="uk-grid" uk-grid>
<div class="uk-width-1-3">
<h1 title>
Learn the <br> process<span class="uk-text-primary">.</span>
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3@m uk-width-1-1">
<h1>
Learn the process<span class="uk-text-primary">.</span>
</h1>
<div>
Build a <span class="uk-text-secondary">Gateway to your <br> community's</span> open and linked <br> research outcomes. Customized <br> your needs.
<div class="uk-width-3-4 uk-text-large">
Build a <span class="uk-text-secondary uk-text-bold">Gateway to your community's</span> open and linked research outcomes. Customized your needs.
</div>
</div>
<div class="uk-width-2-3">
<my-tabs>
<my-tab [tabTitle]="'All 4 Steps'" [tabId]="'allSteps'" [tabIcon]="aboutAll" class="uk-active">
<ng-container *ngTemplateOutlet="allSteps;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'1st Step'" [tabId]="'step1'" [tabIcon]="about1">
<ng-container *ngTemplateOutlet="step1;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'2nd Step'" [tabId]="'step2'" [tabIcon]="about2">
<ng-container *ngTemplateOutlet="step2;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'3rd Step'" [tabId]="'step3'" [tabIcon]="about3">
<ng-container *ngTemplateOutlet="step3;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'4th Step'" [tabId]="'step4'" [tabIcon]="about4">
<ng-container *ngTemplateOutlet="step4;"></ng-container>
</my-tab>
</my-tabs>
<!-- Tab content -->
<div>
<ng-template #allSteps>
<div class="uk-width-expand">
<ul class="uk-tab" uk-tab>
<li *ngFor="let step of steps; let i=index" [class.uk-active]="i === activeStep">
<a class="uk-flex uk-flex-column uk-flex-middle" (click)="activeStep = i">
<icon [svg]="step.icon" ratio="1.5" [customClass]="i === activeStep?'uk-text-primary':null" class="uk-margin-bottom"></icon>
<span>{{step.name}}</span>
</a>
</li>
</ul>
<div *ngIf="activeStep == 0">
<div class="uk-margin-medium-bottom uk-margin-large-top">
You don’t have to go alone.
</div>
<div class="uk-margin-medium-bottom">
We work with you in <span class="uk-text-secondary">4 collaborative steps</span> to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIRE’s operational services.
We work with you in <span class="uk-text-secondary uk-text-bold">4 collaborative steps</span> to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIRE’s operational services.
</div>
<div class="uk-grid uk-child-width-1-2 uk-grid-large" uk-grid>
<div>
<div class="uk-margin-small-bottom uk-text-lead">
<div class="uk-margin-small-bottom uk-text-large uk-text-bold">
1. Understanding your needs
</div>
<div>
@ -68,33 +55,33 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
</div>
</div>
<div>
<div class="uk-margin-small-bottom uk-text-lead">
2. Develop a pilot <br>
<div class="uk-margin-small-bottom uk-text-large uk-text-bold">
2. Develop a pilot
</div>
<div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway.
</div>
</div>
<div>
<div class="uk-margin-small-bottom uk-text-lead">
3. Test and Validate <br>
<div class="uk-margin-small-bottom uk-text-large uk-text-bold">
3. Test and Validate
</div>
<div>
You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
</div>
</div>
<div>
<div class="uk-margin-small-bottom uk-text-lead">
4. Roll out the service <br>
<div class="uk-margin-small-bottom uk-text-large uk-text-bold">
4. Roll out the service
</div>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
</div>
</div>
</div>
</ng-template>
<ng-template #step1>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
</div>
<div *ngIf="activeStep == 1">
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-large uk-text-bold">
1. Understanding your needs
</div>
<div class="uk-margin-medium-bottom">
@ -119,9 +106,9 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
How can the OpenAIRE team identify the research products of your community, among all those available in the OpenAIRE Graph? Through a series of steps: set of keywords, acknowledgment statements, set of projects, set of repositories, etc. This can be partial and provisional information that will serve as a starting point to the OpenAIRE team. You will be able to refine and update this information, in the second phase “Develop a pilot”.
</li>
</ul>
</ng-template>
<ng-template #step2>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
</div>
<div *ngIf="activeStep == 2">
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-large uk-text-bold">
2. Develop a pilot
</div>
<div class="uk-margin-medium-bottom">
@ -135,9 +122,9 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
<div>
The OpenAIRE team will give you a demo of the Community Gateway, with details on how to refine and update the configuration of the Community Gateway, both in terms of criteria for including research products and in terms of logo and visible portal pages.
</div>
</ng-template>
<ng-template #step3>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
</div>
<div *ngIf="activeStep == 3">
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-large uk-text-bold">
3. Test and Validate
</div>
<div class="uk-margin-medium-bottom">
@ -154,9 +141,9 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
<div>
For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms (e.g. to find acknowledgement statements to your community/infrastructure in the full-texts of research articles) that may require several rounds of application, validation, and fine-tuning, before it reaches a high precision and recall. Your feedback is very important to minimize the effort and time needed for this process to complete.
</div>
</ng-template>
<ng-template #step4>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
</div>
<div *ngIf="activeStep == 4">
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-large uk-text-bold">
4. Roll out the service
</div>
<div class="uk-margin-medium-bottom">
@ -176,96 +163,53 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
<div>
Remember that you don’t have to go alone: the dedicated issue tracker you used in the “Test and Validate” phase is always available for you to contact the OpenAIRE team and ask for support.
</div>
</ng-template>
</div>
<!-- <ul class="uk-navbar-nav grid-gap uk-margin-large-bottom">
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('all')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='aboutAll' [ngClass]="step === 'all' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === 'all' ? 'uk-text-secondary' : 'uk-text-muted'">All 4 Steps</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('1')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about1' [ngClass]="step === '1' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '1' ? 'uk-text-secondary' : 'uk-text-muted'">1st Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('2')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about2' [ngClass]="step === '2' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '2' ? 'uk-text-secondary' : 'uk-text-muted'">2nd Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('3')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about3' [ngClass]="step === '3' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '3' ? 'uk-text-secondary' : 'uk-text-muted'">3rd Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('4')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about4' [ngClass]="step === '4' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '4' ? 'uk-text-secondary' : 'uk-text-muted'">4th Step</span>
</div>
</a>
</li>
</ul> -->
</div>
</div>
</div>
</div>
<div id="canvas" class="uk-section uk-padding-remove-top">
</div>
<div class="uk-section">
<div class="uk-container uk-container-large uk-margin-top">
<div class="uk-margin-large-bottom">
<h2 class="uk-h1">Find the best <br> for your community<span class="uk-text-primary">.</span></h2>
<div class="uk-margin-large-bottom uk-width-2-5@m">
<h2 class="uk-h1">Find the best for your community<span class="uk-text-primary">.</span></h2>
</div>
<div class="uk-grid uk-grid-large uk-child-width-1-3" uk-grid>
<div class="left" uk-scrollspy="target: .left-text; cls: uk-animation-fade; delay: 600; repeat:true;">
<div class="uk-grid uk-grid-large uk-child-width-1-3 uk-text-large" uk-grid>
<div class="left" uk-scrollspy="target: .left-text; cls: uk-animation-fade; delay: 600;">
<div class="left-text uk-margin-medium-bottom uk-padding uk-margin-medium-left uk-padding-remove-right">
<h4 class="uk-margin-small-bottom">Profile</h4>
<h6 class="uk-margin-small-bottom">Profile</h6>
<div>Edit community information, change logo url, add community managers or organizations related to community.</div>
</div>
<div class="left-text uk-margin-medium-bottom uk-padding" uk-scrollspy-class="uk-animation-slide-left">
<h4 class="uk-margin-small-bottom">Content</h4>
<h6 class="uk-margin-small-bottom">Content</h6>
<div>Manage projects, content providers, subjects and zenodo communities that are related to the research community.</div>
</div>
<div class="left-text uk-margin-medium-bottom uk-padding uk-margin-medium-left uk-padding-remove-right">
<h4 class="uk-margin-small-bottom">Statistics & Charts</h4>
<h6 class="uk-margin-small-bottom">Statistics & Charts</h6>
<div>Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views.</div>
</div>
</div>
<div class="mid">
<img src="assets/connect-assets/about/placeholder-img.png" alt="">
</div>
<div class="right" uk-scrollspy="target: .right-text; cls: uk-animation-fade; delay: 600; repeat:true;">
<div class="right" uk-scrollspy="target: .right-text; cls: uk-animation-fade; delay: 600;">
<div class="right-text uk-margin-medium-bottom uk-padding uk-margin-right-left uk-padding-remove-left">
<h4 class="uk-margin-small-bottom">Links</h4>
<h6 class="uk-margin-small-bottom">Links</h6>
<div>Manage user claims related to the research community.</div>
</div>
<div class="right-text uk-margin-medium-bottom uk-padding" uk-scrollspy-class="uk-animation-slide-right">
<h4 class="uk-margin-small-bottom">Help texts</h4>
<h6 class="uk-margin-small-bottom">Help texts</h6>
<div>Add or edit help text in research community pages.</div>
</div>
<div class="right-text uk-margin-medium-bottom uk-padding uk-margin-right-left uk-padding-remove-left">
<h4 class="uk-margin-small-bottom">Users</h4>
<h6 class="uk-margin-small-bottom">Users</h6>
<div>Invite more users to subscribe, manage community subscribers, your personal info and notification settings.</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h2 uk-margin-medium-top">We look forward to working <br> together and helping you unlock <br> the full potential of your research <br> community through open science<span class="uk-text-primary">.</span></h2>
<div class="uk-section uk-container uk-container-large uk-text-center uk-flex uk-flex-column uk-flex-middle">
<h2 class="uk-h2 uk-margin-medium-top uk-width-3-5@m">We look forward to working together and helping you unlock the full potential of your research community through open science<span class="uk-text-primary">.</span></h2>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">Contact us</a>
</div>
`
@ -273,45 +217,20 @@ import {TabIcon} from "../openaireLibrary/utils/tabs/tab.component";
export class LearnHowComponent implements OnInit {
public pageContents = null;
public divContents = null;
// public step: string = 'all';
public aboutAll: TabIcon = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 234.82 236.48"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="48.45" cy="48.45" r="48.45"/><circle class="cls-1" cx="186.37" cy="48.45" r="48.45"/><circle class="cls-1" cx="48.45" cy="188.03" r="48.45"/><circle class="cls-1" cx="186.37" cy="188.03" r="48.45"/></g></g></svg>',
active: 'uk-text-primary'
};
public about1: TabIcon = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M75.47,30.67h77a4.7,4.7,0,0,0,4.6-4.79V4.78A4.7,4.7,0,0,0,152.48,0h-77a4.7,4.7,0,0,0-4.6,4.78v21.1A4.7,4.7,0,0,0,75.47,30.67Z"/><rect class="cls-1" x="49.23" y="122.53" width="42.79" height="30.11" rx="5.57"/><polygon class="cls-1" points="173.33 99.65 151.52 129.09 147.3 124.17 136.14 133.74 152.37 152.65 185.14 108.39 173.33 99.65"/></g></g></svg>',
active: 'uk-text-primary'
};
public about2: TabIcon = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M162.75,210.23V176.77L137.8,150S142.05,85.75,114,65.62C85.91,85.75,90.16,150,90.16,150l-25,26.8v33.46s39.13-33.17,32.32-23.82.57,16.45.57,16.45l-8.51,9.64h48.77l-8.5-9.64s7.37-7.09.56-16.45S162.75,210.23,162.75,210.23Z"/><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M76.4,30.67h75.15A4.65,4.65,0,0,0,156,25.88V4.78A4.65,4.65,0,0,0,151.55,0H76.4a4.65,4.65,0,0,0-4.49,4.78v21.1A4.66,4.66,0,0,0,76.4,30.67Z"/></g></g></svg>',
active: 'uk-text-primary'
};
public about3: TabIcon = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 293.74 263.39"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M123,155.32V132.26l-17.19-18.47s2.93-44.26-16.42-58.13C70.05,69.53,73,113.79,73,113.79l-17.2,18.47v23.06s27-22.86,22.28-16.41.39,11.33.39,11.33l-5.86,6.65h33.61l-5.87-6.65s5.09-4.88.4-11.33S123,155.32,123,155.32Z"/><rect class="cls-1" x="164.94" y="117.66" width="15.88" height="39.22"/><rect class="cls-1" x="215.69" y="99.44" width="15.88" height="57.44"/><rect class="cls-1" x="190.27" y="75.62" width="15.88" height="81.26"/></g></g></svg>',
active: 'uk-text-primary'
};
public about4: TabIcon = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 177.86 248.05"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M177.86,236.27V197.84A25.23,25.23,0,0,0,170.48,180l-38.12-38.11s7.4-104-40-140.7a5.62,5.62,0,0,0-6.92,0c-47.37,36.67-40,140.7-40,140.7L7.39,180A25.24,25.24,0,0,0,0,197.84v38.43a3.86,3.86,0,0,0,6.23,3c17.1-13.33,62.85-48.53,52.71-35.55-12.41,15.88,1,27.92,1,27.92L47.13,245.23a1.67,1.67,0,0,0,1.21,2.82h81.18a1.67,1.67,0,0,0,1.21-2.82l-12.84-13.55s13.44-12,1-27.92c-10.13-13,35.61,22.22,52.71,35.55A3.86,3.86,0,0,0,177.86,236.27Z"/></g></g></svg>',
active: 'uk-text-primary'
};
public activeStep = 0;
steps: any[] = [
{name: 'All 4 Steps', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 234.82 236.48"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="48.45" cy="48.45" r="48.45"/><circle class="cls-1" cx="186.37" cy="48.45" r="48.45"/><circle class="cls-1" cx="48.45" cy="188.03" r="48.45"/><circle class="cls-1" cx="186.37" cy="188.03" r="48.45"/></g></g></svg>'},
{name: '1st Step', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M75.47,30.67h77a4.7,4.7,0,0,0,4.6-4.79V4.78A4.7,4.7,0,0,0,152.48,0h-77a4.7,4.7,0,0,0-4.6,4.78v21.1A4.7,4.7,0,0,0,75.47,30.67Z"/><rect class="cls-1" x="49.23" y="122.53" width="42.79" height="30.11" rx="5.57"/><polygon class="cls-1" points="173.33 99.65 151.52 129.09 147.3 124.17 136.14 133.74 152.37 152.65 185.14 108.39 173.33 99.65"/></g></g></svg>'},
{name: '2ng Step', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M162.75,210.23V176.77L137.8,150S142.05,85.75,114,65.62C85.91,85.75,90.16,150,90.16,150l-25,26.8v33.46s39.13-33.17,32.32-23.82.57,16.45.57,16.45l-8.51,9.64h48.77l-8.5-9.64s7.37-7.09.56-16.45S162.75,210.23,162.75,210.23Z"/><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M76.4,30.67h75.15A4.65,4.65,0,0,0,156,25.88V4.78A4.65,4.65,0,0,0,151.55,0H76.4a4.65,4.65,0,0,0-4.49,4.78v21.1A4.66,4.66,0,0,0,76.4,30.67Z"/></g></g></svg>'},
{name: '3rd Step', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 293.74 263.39"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M123,155.32V132.26l-17.19-18.47s2.93-44.26-16.42-58.13C70.05,69.53,73,113.79,73,113.79l-17.2,18.47v23.06s27-22.86,22.28-16.41.39,11.33.39,11.33l-5.86,6.65h33.61l-5.87-6.65s5.09-4.88.4-11.33S123,155.32,123,155.32Z"/><rect class="cls-1" x="164.94" y="117.66" width="15.88" height="39.22"/><rect class="cls-1" x="215.69" y="99.44" width="15.88" height="57.44"/><rect class="cls-1" x="190.27" y="75.62" width="15.88" height="81.26"/></g></g></svg>'},
{name: '4th Step', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 177.86 248.05"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M177.86,236.27V197.84A25.23,25.23,0,0,0,170.48,180l-38.12-38.11s7.4-104-40-140.7a5.62,5.62,0,0,0-6.92,0c-47.37,36.67-40,140.7-40,140.7L7.39,180A25.24,25.24,0,0,0,0,197.84v38.43a3.86,3.86,0,0,0,6.23,3c17.1-13.33,62.85-48.53,52.71-35.55-12.41,15.88,1,27.92,1,27.92L47.13,245.23a1.67,1.67,0,0,0,1.21,2.82h81.18a1.67,1.67,0,0,0,1.21-2.82l-12.84-13.55s13.44-12,1-27.92c-10.13-13,35.61,22.22,52.71,35.55A3.86,3.86,0,0,0,177.86,236.27Z"/></g></g></svg>'},
];
public url: string = null;
public pageTitle: string = "OpenAIRE - Connect | Learn How";
public pageDescription: string = "Learn the process: Build a Gateway to your community's open and linked research outcomes. Customized to your needs.";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About'}];
// @HostListener('document:keydown.arrowup', ['$event'])
// @HostListener('document:keydown.arrowdown', ['$event'])
// @HostListener('window:scroll', ['$event'])
// onEvent(event) {
// const canvas = document.getElementById('canvas');
// if(window.pageYOffset >= canvas.offsetTop) {
// window.scrollTo(canvas.offsetLeft, canvas.offsetTop);
// }
// }
properties: EnvProperties;
properties: EnvProperties = properties;
subscriptions = [];
constructor(
private route: ActivatedRoute,
@ -324,9 +243,6 @@ export class LearnHowComponent implements OnInit {
}
public ngOnInit() {
this.properties = properties;
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
}
@ -335,7 +251,6 @@ export class LearnHowComponent implements OnInit {
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription(this.pageDescription);
//this.getDivContents();
this.getPageContents();
}
@ -375,8 +290,4 @@ export class LearnHowComponent implements OnInit {
private updateUrl(url: string) {
this._meta.updateTag({content: url}, "property='og:url'");
}
// public changeViewTo(step: string) {
// this.step = step;
// }
}

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

@ -36,7 +36,7 @@ export class MyCommunitiesComponent {
public subscriberErrorMessage: string = "";
public errorCodes: ErrorCodes;
private errorMessages: ErrorMessagesComponent;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'my Communities'}];
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'My Communities'}];
properties: EnvProperties;
private user: User;

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 8559aa439f68090de4dc6934e351424928d18894
Subproject commit 5859789119322e48814a3a90c38265e31523be8e

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 29bdacee147bbf1bd28957457221d20969bd3f44
Subproject commit 170a0490e6ecf0d2e31d5a4cea3967cc14efa5af

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

@ -2,7 +2,7 @@
Define variables for connect
Custom connect css
*/
:root {
.connectApp {
/*buttons*/
--button-primary-background: var(--connect-color);
--button-primary-background-image: none;
@ -18,6 +18,7 @@ Custom connect css
/*fonts*/
--text-primary-color:var(--connect-color);
--text-secondary-color: var(--primary-color);
}
/*.whiteBackground {

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit d45f01647f43b9e729bfc7adb3d639a8f2364995
Subproject commit 46e2d2d0ce2ea045c627fa676e555dade9247620

12
src/index.html
View File

@ -40,19 +40,7 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="assets/common-assets/common/jquery.js"></script>
<script src="assets/common-assets/common/uikit.min.js?v=1"></script>
<script src="assets/common-assets/common/uikit-icons.min.js?v=1"></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?v=1");
$.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
});
</script>
</head>
<body>
<div class="uk-offcanvas-content uk-height-viewport">

12
src/prod/index.html
View File

@ -41,19 +41,7 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="assets/common-assets/common/jquery.js"></script>
<script src="assets/common-assets/common/uikit.min.js?v=1"></script>
<script src="assets/common-assets/common/uikit-icons.min.js?v=1"></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?v=1");
$.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
});
</script>
<link id="customCssfile" rel="stylesheet" href="">
<style id="customCss">
</style>