diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8ad8ce1..d1cc0b4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,11 +1,10 @@ import {Component} from '@angular/core'; -import {ActivatedRoute, NavigationEnd, NavigationStart, Params, Router} from '@angular/router'; +import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router'; import {EnvProperties} from './openaireLibrary/utils/properties/env-properties'; import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu'; import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service'; import {Session, User} from './openaireLibrary/login/utils/helper.class'; -import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class"; import {UserManagementService} from "./openaireLibrary/services/user-management.service"; import {properties} from "../environments/environment"; import {BehaviorSubject, Subscriber} from "rxjs"; @@ -26,7 +25,7 @@ import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll"; description="OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. " name="OpenAIRE Monitor" [searchAction]="true" [searchActionRoute]="properties.domain + properties.baseLink + '/browse'"> -
+
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index b5c0f70..e69de29 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -1,102 +0,0 @@ -@media only screen and (min-width:1200px) { - .girl-background { - background-size: 210px; - background-repeat: no-repeat; - background-position: 95% 50%; - background-image: url("/assets/monitor-assets/home/girl.png"); - padding-bottom: 100px; - } - - .dashboard-section .dashboard { - background-image: url("/assets/monitor-assets/home/dashboard-background.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } -} - -.dashboard-section .info > div { - opacity: 0.3; -} - -.dashboard-section .info > .uk-active > h5 { - color: var(--portal-main-color); -} - -.dashboard-section .info > div:hover { - opacity: 1; -} - -@media only screen and (min-width:960px) { - .hologram { - background-image: url("/assets/monitor-assets/home/hologram.png"); - background-size: 20%; - background-repeat: no-repeat; - background-position: bottom center; - padding-bottom: 50px; - } -} - -.hologram .part { - max-width: 370px; -} - - -.graph-section { - background-image: url("/assets/monitor-assets/home/graph-background.svg"); - background-size: cover; - background-repeat: no-repeat; - padding: 5vh 0; -} - -.stakeholder-section .stakeholders { - min-height: 300px; -} - -.stakeholder-section .uk-subnav-pill > li > a { - color: currentColor; - font-size: 13px; - text-transform: none; - opacity: 0.5; - border-radius: 40px; - border: 1px solid currentColor; - padding: 6px 18px; - line-height: 18px; -} - -.stakeholder-section .uk-subnav-pill > li:hover > a { - border-color: var(--portal-main-color); - color: var(--portal-main-color); - background-color: var(--portal-main-contrast); - opacity: 1; -} - -.stakeholder-section .uk-subnav-pill > li.uk-active > a { - opacity: 1; - border-color: var(--portal-main-color); - color: var(--portal-main-contrast); - background-color: var(--portal-main-color); - font-weight: bold; -} - -.stakeholder-section .uk-card { - border-radius: 20px; - color: currentColor; - font-family: "Roboto", sans-serif; - padding: 70px 20px; -} - -.stakeholder-section .uk-card img { - max-height: 60px; -} - -@media only screen and (max-width:639px) { - .stakeholder-section .uk-subnav-pill { - flex-wrap: nowrap; - overflow-x: auto; - } -} - -.grid-gap { - grid-gap: 50px; -} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 50855c6..49485da 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -66,45 +66,63 @@

Tap into the OpenAIRE
Research Graph.

-
-
-
- - +
+ +
+ -
-

- - {{datasetsSize.number|number}}{{datasetsSize.size}} - -

-
Datasets
+ -
-

- - {{softwareSize.number|number}}{{softwareSize.size}} - -

-
Software
+ -
-

- - {{otherSize.number|number}}{{otherSize.size}} - -

-
Other
+ -
-

- - {{fundersSize.number|number}}{{fundersSize.size}} - -

-
Funders
+
@@ -123,8 +141,8 @@
-
- +
+
Global outlook @@ -134,8 +152,8 @@
-
- +
+
Minimum effort to join @@ -145,8 +163,8 @@
-
- +
+
Transparent methodology @@ -156,8 +174,8 @@
-
- +
+
Customised to your needs diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 312d561..bc58cb6 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -12,7 +12,6 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {RefineFieldResultsService} from "../openaireLibrary/services/refineFieldResults.service"; import {NumberUtils} from "../openaireLibrary/utils/number-utils.class"; import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service"; -import {animate, state, style, transition, trigger} from "@angular/animations"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; import {LocalStorageService} from "../openaireLibrary/services/localStorage.service"; import {Stakeholder, Visibility} from "../openaireLibrary/monitor/entities/stakeholder"; @@ -24,36 +23,11 @@ import {Subscriber} from "rxjs"; @Component({ selector: 'home', templateUrl: 'home.component.html', - styleUrls: ['home.component.css'], - animations: [ - trigger('1', [ - state('1', style({ - opacity: 1 - })), - transition('* => *', [ - animate('0.3s') - ]) - ]), - trigger('2', [ - state('2', style({ - opacity: 1 - })), - transition('* => *', [ - animate('0.3s') - ]) - ]), - trigger('3', [ - state('3', style({ - opacity: 1 - })), - transition('* => *', [ - animate('0.3s') - ]) - ]) - ] + styleUrls: ['home.component.css'] }) export class HomeComponent { public pageTitle = "OpenAIRE | Monitor"; + public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators."; public stakeholders: Stakeholder[] = []; public selected: Stakeholder = null; public pageContents = null; @@ -61,25 +35,18 @@ export class HomeComponent { // Message variables public status: number; public loading: boolean = true; - public subscriberErrorMessage: string = ""; public errorCodes: ErrorCodes; - private errorMessages: ErrorMessagesComponent; - - properties: EnvProperties; - public keyword: string = ""; + public properties: EnvProperties = properties; public type: string = null; - + public directLink: boolean = true; public publicationsSize: any = null; public datasetsSize: any = null; public softwareSize: any = null; public otherSize: any = null; public fundersSize: any = null; - subscriptions = []; - - public state = 1; - private timeouts: any[] = []; @ViewChild('AlertModal') modal; - public directLink: boolean = true; + private errorMessages: ErrorMessagesComponent; + private subscriptions = []; private user: User; visibilityIcon: Map = new Map ([ ["PUBLIC", 'earth'], @@ -99,24 +66,17 @@ export class HomeComponent { private helper: HelperService, private seoService: SEOService, private _refineFieldResultsService: RefineFieldResultsService, private _searchResearchResultsService: SearchResearchResultsService) { - - - var description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. "; - var title = "OpenAIRE - Monitor"; - - this._meta.updateTag({content: description}, "name='description'"); - this._meta.updateTag({content: description}, "property='og:description'"); - this._meta.updateTag({content: title}, "property='og:title'"); - this._title.setTitle(title); - + this._meta.updateTag({content: this.description}, "name='description'"); + this._meta.updateTag({content: this.description}, "property='og:description'"); + this._meta.updateTag({content: this.pageTitle}, "property='og:title'"); + this._title.setTitle(this.pageTitle); this.errorCodes = new ErrorCodes(); this.errorMessages = new ErrorMessagesComponent(); this.status = this.errorCodes.LOADING; } public ngOnInit() { - this.properties = properties; - var url = this.properties.domain + this.properties.baseLink + this._router.url; + let url = this.properties.domain + this.properties.baseLink + this._router.url; this.seoService.createLinkForCanonicalURL(url, false); this._meta.updateTag({content: url}, "property='og:url'"); if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { @@ -124,37 +84,12 @@ export class HomeComponent { } this.getNumbers(); this.getStakeholders(); - // this.createGifs(); - //this.getDivContents(); - // this.getPageContents(); this.subscriptions.push(this.localStorageService.get().subscribe(value => { this.directLink = value; })); this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.user = user; })); - - if(typeof document != "undefined") { - this.startAnimation(); - } - } - - public startAnimation(state = 1) { - this.clearTimeouts(); - this.state = state; - this.timeouts.push(setTimeout(() => { - if (this.state < 3) { - this.startAnimation(this.state + 1); - } else { - this.startAnimation(); - } - }, 6000)); - } - - private clearTimeouts() { - this.timeouts.forEach(timeout => { - clearTimeout(timeout); - }); } private getPageContents() { @@ -241,7 +176,6 @@ export class HomeComponent { public getStakeholders() { this.loading = true; this.status = this.errorCodes.LOADING; - this.subscriberErrorMessage = ""; this.subscriptions.push(this._stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL).subscribe( stakeholders => { if (!stakeholders || stakeholders.length == 0) { @@ -275,12 +209,16 @@ export class HomeComponent { this.loading = false; }, error => { - this.status = this.handleError("Error getting funders", error); + this.status = this.handleError("Error getting stakeholders", error); this.loading = false; } )); } + get funders(): Stakeholder[] { + return this.stakeholders.filter(stakeholder => stakeholder.type === "funder"); + } + private isManager(stakeholder: Stakeholder) { return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isManager(stakeholder.type, stakeholder.alias, this.user); } @@ -324,7 +262,6 @@ export class HomeComponent { subscription.unsubscribe(); } }); - this.clearTimeouts(); } hasPermission(stakeholder: Stakeholder) { @@ -332,16 +269,14 @@ export class HomeComponent { } private handleError(message: string, error): number { - var code = ""; + let code = ""; if (!error.status) { - var error = error.json(); + error = error.json(); code = error.code; } else { code = error.status; } - console.error("Home Component: " + message, error); - return this.errorMessages.getErrorCode(code); } } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 0a40dd1..007a8b2 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -24,14 +24,14 @@ import {UrlPrefixModule} from "../openaireLibrary/utils/pipes/url-prefix.module" import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {SectionScrollModule} from '../openaireLibrary/utils/section-scroll/section-scroll.module'; import {TabsModule} from '../openaireLibrary/utils/tabs/tabs.module'; -import {TextAsSvgModule} from "../openaireLibrary/utils/pipes/text-as-svg.module"; +import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; @NgModule({ imports: [ CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule, HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, SearchResearchResultsServiceModule, RefineFieldResultsServiceModule, AlertModalModule, IconsModule, UrlPrefixModule, LogoUrlPipeModule, SectionScrollModule, - TabsModule, TextAsSvgModule + TabsModule, LoadingModule ], declarations: [ HomeComponent diff --git a/src/app/learn-how/learn-how.component.css b/src/app/learn-how/learn-how.component.css index 8386719..e69de29 100644 --- a/src/app/learn-how/learn-how.component.css +++ b/src/app/learn-how/learn-how.component.css @@ -1,197 +0,0 @@ -@media only screen and (min-width: 640px) { - .process .zero { - position: relative; - padding: 0 8% 0 3%; - } - - .process .zero::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/1.svg"); - top: 57%; - right: -6%; - width: 30%; - height: 21%; - background-size: contain; - background-repeat: no-repeat; - } - - .process .first { - position: relative; - padding: 3% 6% 0 4%; - } - - .process .first::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/2.svg"); - top: 78%; - right: -9%; - width: 30%; - height: 21%; - background-size: contain; - background-repeat: no-repeat; - } - - .process .second { - position: relative; - padding: 6% 6% 0 4.8%; - } - - .process .second::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/3.svg"); - top: 100%; - left: 50%; - width: 30%; - height: 48%; - background-size: contain; - background-repeat: no-repeat; - } - - .process .third { - position: relative; - padding: 8% 9% 0 3%; - } - - .process .third::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/4.svg"); - top: 68%; - left: -25%; - width: 30%; - height: 15%; - background-size: contain; - background-repeat: no-repeat; - } - - .process .fourth { - position: relative; - padding: 14% 8% 0 3%; - } - - .process .fourth::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/5.svg"); - top: 87%; - left: -25%; - width: 30%; - height: 15%; - background-size: contain; - background-repeat: no-repeat; - } - - .process .fifth { - padding: 16% 10% 0 2%; - } -} - -@media only screen and (max-width: 639px) { - .process .zero { - position: relative; - padding: 0 12% 0 12%; - } - - .process .zero::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/1.svg"); - top: 100%; - right: 11%; - width: 30%; - height: 21%; - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - background-size: contain; - background-repeat: no-repeat; - } - - .process .first { - position: relative; - padding: 20% 7% 0 12%; - } - - .process .first::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/2.svg"); - top: 105%; - left: 2%; - width: 30%; - height: 21%; - -moz-transform: rotate(35deg); - -o-transform: rotate(35deg); - -webkit-transform: rotate(35deg); - transform: rotate(35deg); - background-size: contain; - background-repeat: no-repeat; - } - - .process .second { - position: relative; - padding: 20% 7% 0 12%; - } - - .process .second::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/3.svg"); - top: 100%; - left: 66%; - width: 30%; - height: 48%;; - background-size: contain; - background-repeat: no-repeat; - } - - .process .third { - position: relative; - padding: 20% 7% 0 16%; - } - - .process .third::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/4.svg"); - top: 106%; - left: 5%; - width: 30%; - height: 15%; - -moz-transform: rotate(215deg) scaleY(-1); - -o-transform: rotate(215deg) scaleY(-1); - -webkit-transform: rotate(215deg) scaleY(-1); - transform: rotate(215deg) scaleY(-1); - background-size: contain; - background-repeat: no-repeat; - } - - .process .fourth { - position: relative; - padding: 20% 8% 0 16%; - } - - .process .fourth::after { - content: ""; - position: absolute; - background-image: url("/assets/monitor-assets/about/arrows/5.svg"); - top: 100%; - right: 0; - width: 30%; - height: 19%; - -moz-transform: rotate(310deg); - -o-transform: rotate(310deg); - -webkit-transform: rotate(310deg); - transform: rotate(310deg); - background-size: contain; - background-repeat: no-repeat; - } - - .process .fifth { - padding: 20% 7.6% 0 16%; - } -} diff --git a/src/app/learn-how/learn-how.component.html b/src/app/learn-how/learn-how.component.html index f1226f2..59c7d57 100644 --- a/src/app/learn-how/learn-how.component.html +++ b/src/app/learn-how/learn-how.component.html @@ -22,7 +22,7 @@
- +

0

Starting from the OpenAIRE
RESEARCH GRAPH @@ -35,7 +35,7 @@
- +

1

Provide us some information @@ -48,7 +48,7 @@
- +

2

We get the ball rolling @@ -61,7 +61,7 @@
- +

3

You validate @@ -74,7 +74,7 @@
- +

4

You set up your portal @@ -87,7 +87,7 @@
- +

5

You track, monitor, report diff --git a/src/app/learn-how/learn-how.module.ts b/src/app/learn-how/learn-how.module.ts index 7775f5c..cee5747 100644 --- a/src/app/learn-how/learn-how.module.ts +++ b/src/app/learn-how/learn-how.module.ts @@ -13,12 +13,11 @@ import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOServi import {HowModule} from "../openaireLibrary/monitor/how/how.module"; import {BreadcrumbsModule} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.module'; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; -import {TextAsSvgModule} from "../openaireLibrary/utils/pipes/text-as-svg.module"; @NgModule({ imports: [ CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule, HelperModule, - Schema2jsonldModule, SEOServiceModule, HowModule, BreadcrumbsModule, IconsModule, TextAsSvgModule + Schema2jsonldModule, SEOServiceModule, HowModule, BreadcrumbsModule, IconsModule ], declarations: [ LearnHowComponent diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 4e49e7f..4e9981f 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 4e49e7f4895797731cc82a039987db0b0448f5b0 +Subproject commit 4e9981f24f2f9bc7ac0f49897e987a26528b82f8 diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css index 1848115..0b1bba8 100644 --- a/src/assets/monitor-custom.css +++ b/src/assets/monitor-custom.css @@ -11,7 +11,8 @@ --secondary-background-image:none; /*fonts*/ - --font-primary-color:var(--monitor-color); + --font-primary-color: var(--monitor-color); + --font-gradient-color: linear-gradient(110deg, var(--monitor-gradient-start) 0%, var(--monitor-gradient-end) 100%); /*--secondary-background: var(--secondary-color);*/ } @@ -52,10 +53,6 @@ /* color: #1a1a1a;*/ /*}*/ -.custom-main-content { - background-color: var(--default-color) !important; -} - main { min-height: calc(100vh - 100px); } @@ -76,17 +73,3 @@ main { /*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/ /* border-left: 1px solid #DEDEDE;*/ /*}*/ - -#monitor-gradient .start { - stop-color: var(--monitor-gradient-start); -} - -#monitor-gradient .end { - stop-color: var(--monitor-gradient-end); -} - -.custom-gradient-text { - background: linear-gradient(110deg, var(--monitor-gradient-start), var(--monitor-gradient-end)); - -webkit-text-fill-color: transparent; - -webkit-background-clip: text; -} \ No newline at end of file diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme index 042475c..9f0b25a 160000 --- a/src/assets/openaire-theme +++ b/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit 042475cdc6156a8f56e4591109f14e2d2d9f6b12 +Subproject commit 9f0b25ae591095b9b9a31aa4cba7c98e3d012899