diff --git a/angular.json b/angular.json index 89ed376..00528f4 100644 --- a/angular.json +++ b/angular.json @@ -25,6 +25,9 @@ "node_modules/datatables.net-dt/css/jquery.dataTables.css" ], "scripts": [ + "src/assets/common-assets/common/jquery.js", + "src/assets/common-assets/common/uikit.min.js", + "src/assets/common-assets/common/uikit-icons.min.js", "node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js" ] @@ -94,6 +97,9 @@ "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ + "src/assets/common-assets/common/jquery.js", + "src/assets/common-assets/common/uikit.min.js", + "src/assets/common-assets/common/uikit-icons.min.js", "node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js" ], diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 8ac2835..14f59b1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -35,6 +35,7 @@ const routes: Routes = [ resolve: {envSpecific: EnvironmentSpecificResolver} }, {path: 'error', component: OpenaireErrorPageComponent, resolve: {envSpecific: EnvironmentSpecificResolver}}, + { path: 'theme', loadChildren: './openaireLibrary/utils/theme/theme.module#ThemeModule'}, { path: '**', pathMatch: 'full', diff --git a/src/app/app.component.ts b/src/app/app.component.ts index efa1de8..5d7be21 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -57,7 +57,6 @@ export class AppComponent { } ngOnInit() { - console.log(properties); this.propertiesService.loadEnvironment() .then(es => { this.properties = this.propertiesService.envSpecific; @@ -84,7 +83,7 @@ export class AppComponent { items: [] }); this.menuItems.push({ - rootItem: new MenuItem("stakeholders", "Members in Action", "", "/search/find/stakeholders", false, [], null, {}), + rootItem: new MenuItem("stakeholders", "Browse Members", "", "/search/find/stakeholders", false, [], null, {}), items: [] }); this.menuItems.push({ diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html index 1735753..8e50ae0 100644 --- a/src/app/contact/contact.component.html +++ b/src/app/contact/contact.component.html @@ -1,15 +1,4 @@ - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
-
@@ -18,18 +7,14 @@
- - - - +
+
+

Contact us to learn more

+
We’d be happy to provide more information on OpenAIRE Monitor – please fill in your details below to send your questions to our team.
+
+ +
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts index 4a5ceb6..2733194 100644 --- a/src/app/contact/contact.component.ts +++ b/src/app/contact/contact.component.ts @@ -9,13 +9,12 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; import {HelperService} from "../openaireLibrary/utils/helper/helper.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "@angular/forms"; @Component({ selector: 'contact', templateUrl: './contact.component.html', }) - export class ContactComponent implements OnInit { public url: string = null; public pageTitle: string = "OpenAIRE - Monitor | Contact Us"; @@ -26,6 +25,11 @@ export class ContactComponent implements OnInit { public properties: EnvProperties = null; public pageContents = null; public divContents = null; + public organizationTypes: string[] = [ + 'Funding agency', 'University / Research Center', + 'Research Infrastructure', 'Government', + 'Non-profit', 'Industry', 'Other' + ]; public contactForm: FormGroup; @ViewChild('AlertModal') modal; @@ -47,7 +51,6 @@ export class ContactComponent implements OnInit { this.route.data.subscribe((data: { envSpecific: EnvProperties }) => { this.properties = data.envSpecific; this.email = {body: '', subject: '', recipients: []}; - if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe(); } @@ -84,25 +87,35 @@ export class ContactComponent implements OnInit { this.errorMessage = 'Please fill in all the required fields!'; } } + + private validatorType(options: string[]): ValidatorFn { + return (control: AbstractControl): { [key: string]: boolean } | null => { + if (options.filter(type => type === control.value).length === 0) { + return {'type': false}; + } + return null; + } + } public reset() { this.contactForm = this.fb.group( { name: this.fb.control('', Validators.required), surname: this.fb.control('', Validators.required), email: this.fb.control('', [Validators.required, Validators.email]), - affiliation: this.fb.control('', Validators.required), - stakeholder: this.fb.control('', Validators.required), + job: this.fb.control('', Validators.required), + organization: this.fb.control('', Validators.required), + organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]), subject: this.fb.control('', Validators.required), message: this.fb.control('', Validators.required), recaptcha: this.fb.control('', Validators.required), }); this.errorMessage = ''; } - + private sendMail(admins: any) { this.showLoading = true; this._emailService.contact(this.properties, - Composer.composeEmailForNewStakeholder(this.contactForm.value, admins), + Composer.composeEmailForMonitor(this.contactForm.value, admins), this.contactForm.value.recaptcha).subscribe( res => { if (res) { diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index 8a0f73f..e7918ba 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -69,6 +69,30 @@ width: 16%; } +.dashboard-section .info > div { + opacity: 0.4; + position: relative; +} + +.dashboard-section .info > div:hover { + opacity: 1; +} + +.dashboard-section .info > div > span { + position: absolute; + top: -5px; + left: 0; + display: none; +} + +.dashboard-section .info > div > span polygon { + color: var(--portal-main-color); +} + +.dashboard-section .info > div.uk-active > span { + display: inline-block; +} + @media (min-width: 1200px) { .boat-section { position: relative; @@ -210,13 +234,47 @@ } } - -.stakeholder-section .stakeholders .header { - position: relative; - height: 150px; +.stakeholder-section .stakeholders .stakeholder { + height: 250px; } -.stakeholder-section .stakeholders .header > img { +.stakeholder-section .stakeholders .stakeholder.small { + height: 250px; + box-shadow: 0 3px 6px #00000029; +} + +.stakeholder-section .stakeholders .stakeholder.medium { + height: 275px; + box-shadow: 0 3px 6px #00000029; +} + +.stakeholder-section .stakeholders .stakeholder.large { + height: 300px; + box-shadow: 0 3px 6px #00000029; +} + +.stakeholder-section .stakeholders .stakeholder.funder { + background-color: #F8D5E3; +} + +.stakeholder-section .stakeholders .stakeholder.ri { + background-color: #9AD5CA; +} + +.stakeholder-section .stakeholders .stakeholder.organization { + background-color: #C5E0E9; +} + +.stakeholder-section .stakeholders .stakeholder .header { + position: relative; + height: 150px; + background-size: 450px; + background-position: bottom center; + background-repeat: no-repeat; + background-image: url("/assets/monitor-assets/home/stakeholder.svg"); +} + +.stakeholder-section .stakeholders .stakeholder .header > img { max-width: 50%; max-height: 50%; position: absolute; @@ -225,7 +283,7 @@ transform: translate(-50%, -50%); } -.stakeholder-section .stakeholders .header > div { +.stakeholder-section .stakeholders .stakeholder .header > div { width: 100%; position: absolute; left: 50%; @@ -234,35 +292,11 @@ text-align: center; } -.stakeholder-section .stakeholders .header > div > img { +.stakeholder-section .stakeholders .stakeholder .header > div > img { max-width: 50%; max-height: 50%; } -.stakeholder-section .stakeholders .header.small { - height: 150px; -} - -.stakeholder-section .stakeholders .header.medium { - height: 200px; -} - -.stakeholder-section .stakeholders .header.large { - height: 300px; -} - -.stakeholder-section .stakeholders .funder .header { - background-color: #F8D5E3; -} - -.stakeholder-section .stakeholders .ri .header { - background-color: #9AD5CA; -} - -.stakeholder-section .stakeholders .organization .header { - background-color: #C5E0E9; -} - @media (min-width: 640px) { .stakeholder-section .tabs > ul > li { diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index a20e2de..edb0d10 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,11 +3,11 @@ name="OpenAIRE Monitor">
-
-

A new era of monitoring research.

-

Open data. Open methodologies.

-
+

A new era of monitoring research.

+

Open data. Open methodologies.

+
Work together with us to view, understand and visualize
research statistics and indicators.
@@ -18,80 +18,97 @@
-
+
-
-
-
+
+
+
Get a complete picture
-
- Track and discover your organization’s research output. Use the OpenAIRE Research Graph to get a 360o +
+ Track and discover your organization’s research output. Use the OpenAIRE Research Graph to get a 360° view of your publications-data-code.
+ + + + +
-
-
+
+
Monitor open science compliance
-
- Work with us, the OS expert community, for open and transparent metrics. Discover open science trends +
+ Work with the open science expert community for open and transparent metrics. Discover open science trends for your organization and see how you fare in EOSC.
+ + + + +
-
-
+
+
Turn research results to insights
-
+
Understand your community. Measure impact, discover trends, connections and collaborations to improve and optimize your future actions.
+ + + + +
-
-
-
-
-
-
-

Global outlook

+
+

Why use OpenAIRE Monitor Dashboard?

+
+
+
+
+
- Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data - resource - from open initiatives around the world, of global interest. +

Global outlook

+
+ Monitor is built on the OpenAIRE Research Graph. Linked scholarly information from open initiatives around + the world. Beyond publications. +
-
-
-
-

Transparent methodology

+
- We base our service on open science principles. We rely on open data sources, and document our algorithms for - every metric and indicator we publish. +

Transparent methodology

+
+ Based on open science principles: open data sources, well documented metrics and indicators. Open APIs. + Built together with the OS community. +
-
-
-
-

Customised to your needs

+
- Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. - Use our advanced tools and expertise add add your own metrics. +

Customised to your needs

+
+ A variety of predefined metrics to choose from. Add your own metrics. Select how to visualize them, and who + to share with. +
-
-
-
-

Minimum effort to join

+
- You only share some information with us to include in out backend aggregating and data mining, - and we deliver a view of your world. As you see fit. +

Minimum effort to join

+
+ You only share some information with us to include in out backend aggregating and data mining, + and we deliver a view of your world. As you see fit. +
@@ -102,29 +119,29 @@
-
-

Tap into the OpenAIRE Research Graph

+
+

Tap into the OpenAIRE Research Graph

-
{{publicationsSize.count|number}}
-
publications
+

{{publicationsSize.count|number}}

+
publications
-
{{datasetsSize.count|number}}
-
research data
+

{{datasetsSize.count|number}}

+
research data
-
{{softwareSize.count|number}}
-
software
+

{{softwareSize.count|number}}

+
software
-
{{otherSize.count|number}}
-
other research products
+

{{otherSize.count|number}}

+
other
-
{{fundersSize.count|number}}
-
Funders
+

{{fundersSize.count|number}}

+
Funders
@@ -146,25 +163,28 @@
-
- -
- -
- - -
- -
- - -
{{stakeholder.name}}
- - -
{{stakeholder.name}}
- +
+
+ +
+ +
+
+
{{stakeholder.name}}
+
+ + +
+ +
+
+
{{stakeholder.name}}
+
+ +
-
+
Nothing here yet.
@@ -180,32 +200,39 @@
-
- -
-
+
+
+ +
-
{{stakeholder.name}}
-
- +
+
{{stakeholder.name}}
+
+ +
-
+
Nothing here yet.
-
+
-

Contact us to help you.

-
Are you looking for more? Get in touch with our team and let us help - you. +

Contact us

+
+

We invite all organizations involved in scholarly communications and research monitoring to join our + services.

+

Minimum effort to join: You share basic information with us. We aggregate + and data/text mine, you validate.

+

Would you like to know more?

Get in Touch
-
+
@@ -214,7 +241,7 @@
- +
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index f91ec26..cad2b68 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -14,7 +14,6 @@ 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 {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; import {LocalStorageService} from "../openaireLibrary/services/localStorage.service"; import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder"; import {Session, User} from "../openaireLibrary/login/utils/helper.class"; @@ -52,37 +51,19 @@ import {UserManagementService} from "../openaireLibrary/services/user-management state('1', style({ opacity: 1 })), - state('2', style({ - opacity: 0.4 - })), - state('3', style({ - opacity: 0.4 - })), transition('* => *', [ animate('0.3s') ]) ]), trigger('2', [ - state('1', style({ - opacity: 0.4 - })), state('2', style({ opacity: 1 })), - state('3', style({ - opacity: 0.4 - })), transition('* => *', [ animate('0.3s') ]) ]), trigger('3', [ - state('1', style({ - opacity: 0.4 - })), - state('2', style({ - opacity: 0.4 - })), state('3', style({ opacity: 1 })), diff --git a/src/app/learn-how/learn-how.component.css b/src/app/learn-how/learn-how.component.css index fe9897f..889311e 100644 --- a/src/app/learn-how/learn-how.component.css +++ b/src/app/learn-how/learn-how.component.css @@ -1,7 +1,3 @@ -.steps { - color: #666666; -} - .steps.uk-visible\@l { position: relative; height: 1600px; @@ -21,7 +17,7 @@ background-size: contain; background-repeat: no-repeat; position: absolute; - top: 260px; + top: 250px; left: 270px; width: 193px; height: 177px; @@ -40,7 +36,7 @@ background-repeat: no-repeat; position: absolute; top: 510px; - left: 680px; + left: 700px; width: 125px; height: 137px; } @@ -57,8 +53,8 @@ background-size: contain; background-repeat: no-repeat; position: absolute; - right: 200px; - bottom: 500px; + right: 180px; + bottom: 470px; width: 161px; height: 266px; } @@ -75,8 +71,8 @@ background-size: contain; background-repeat: no-repeat; position: absolute; - left: 250px; - bottom: 150px; + left: 300px; + bottom: 120px; width: 233px; height: 178px; } diff --git a/src/app/learn-how/learn-how.component.html b/src/app/learn-how/learn-how.component.html index 8b20715..2ae6437 100644 --- a/src/app/learn-how/learn-how.component.html +++ b/src/app/learn-how/learn-how.component.html @@ -1,10 +1,10 @@
-

See how it works

-
Use the Monitor Dashboard to view your research results, open science…
+

See how it works

+
Use the Monitor Dashboard to view your research results, open science…
-
+
diff --git a/src/assets/monitor-assets/home/dashboard.png b/src/assets/monitor-assets/home/dashboard.png index 6bc47e0..5570a37 100644 Binary files a/src/assets/monitor-assets/home/dashboard.png and b/src/assets/monitor-assets/home/dashboard.png differ diff --git a/src/assets/monitor-assets/home/lighthouse.png b/src/assets/monitor-assets/home/lighthouse.png index d2b763f..7f684b6 100644 Binary files a/src/assets/monitor-assets/home/lighthouse.png and b/src/assets/monitor-assets/home/lighthouse.png differ diff --git a/src/assets/monitor-assets/home/stakeholder.svg b/src/assets/monitor-assets/home/stakeholder.svg new file mode 100644 index 0000000..9345e97 --- /dev/null +++ b/src/assets/monitor-assets/home/stakeholder.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css index a039510..c32e13c 100644 --- a/src/assets/monitor-custom.css +++ b/src/assets/monitor-custom.css @@ -1,24 +1,23 @@ :root { - --portal-main-color: #9ABB55; + --portal-main-color: #8DCA26; --portal-main-contrast: white; - --portal-dark-color: #7c9144; + --portal-dark-color: #7cb021; --openaire-main-color: #313179; --explore-portal-color: #D95F2D; --provide-portal-color: #37C7E9; - --monitor-portal-color: #9ABB55; + --monitor-portal-color: #8DCA26; --connect-portal-color: #EBB13E; --develop-portal-color: #DA65AB; --explore-portal-lower-tone: #a0462c; --provide-portal-lower-tone: #3A8FA3; - --monitor-portal-lower-tone: #7c9144; + --monitor-portal-lower-tone: #7cb021; --connect-portal-lower-tone: #b48536; --develop-portal-lower-tone: #9f4e7e; } - .generalSearchForm, .publicationsSearchForm, .projectsSearchForm, .projectsTableSearchForm, @@ -32,7 +31,6 @@ background: /*url('search-background.svg')*/ #F7FCFF no-repeat center bottom ; background-size: cover !important; height: inherit; - } .monitorApp, .searchForm { @@ -44,17 +42,15 @@ fill: white; } -.monitorApp .uk-text-large { - font-size: 18px; -} - -.monitorApp h1, .monitorApp h2, .monitorApp h3, -.monitorApp h4, .monitorApp h5, .monitorApp h6 { - color: #212121; +.monitorApp h1, .monitorApp .uk-h1, .monitorApp h2, .monitorApp .uk-h2, +.monitorApp h3, .monitorApp .uk-h3, .monitorApp h4, .monitorApp .uk-h4, +.monitorApp h5, .monitorApp .uk-h5, .monitorApp h6 .monitorApp .uk-h6 { + color: #1a1a1a; } .monitorApp , .monitorApp .uk-card, .monitorApp .color { - color: #707070; + color: #424242; + font-size: 16px; } .monitorApp .portal-button { diff --git a/src/assets/theme-changes.css b/src/assets/theme-changes.css new file mode 100644 index 0000000..fee7371 --- /dev/null +++ b/src/assets/theme-changes.css @@ -0,0 +1,36 @@ +.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, +.uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, +.uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; + line-height: 1.2; +} + +.uk-h1, h1 { + font-size: 54px; + font-weight: 400; +} + +.uk-h2, h2 { + font-size: 45px; + font-weight: 400; +} + +.uk-h3, h3 { + font-size: 36px; + font-weight: 400; +} + +.uk-h4, h4 { + font-size: 27px; + font-weight: 400; +} + +.uk-h5, h5 { + font-size: 22px; + font-weight: 500; +} + +.uk-h6, h6 { + font-size: 18px; + font-weight: 500; +} diff --git a/src/index.html b/src/index.html index d9be906..b3d4940 100644 --- a/src/index.html +++ b/src/index.html @@ -40,38 +40,10 @@ - - - - - - - - - -
-
diff --git a/src/styles.css b/src/styles.css index c73d3af..f5b2cad 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,6 +1,9 @@ /* You can add global styles to this file, and also import other style files */ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; -@import "assets/common-assets/common/theme.css"; -@import "assets/common-assets/common/custom.css"; @import "assets/common-assets/library.css"; +@import "assets/common-assets/common/custom.css"; +@import "assets/common-assets/common/theme.css"; @import "assets/monitor-custom.css"; + +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); +@import "assets/theme-changes.css";