Change numbers in home and about with css class instead of gradient of icons.
This commit is contained in:
parent
c5934683b0
commit
b49efdbe27
|
|
@ -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'">
|
||||
</schema2jsonld>
|
||||
<div class="custom-main-content">
|
||||
<div class="uk-background-default">
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -66,45 +66,63 @@
|
|||
<h2 class="uk-h1 uk-text-center">
|
||||
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
|
||||
</h2>
|
||||
<div class="uk-flex uk-flex-center uk-margin-large-top">
|
||||
<div class="uk-width-3-4@m uk-flex uk-flex-center uk-flex-middle grid-gap uk-child-width-1-5@m uk-child-width-1-2">
|
||||
<div *ngIf="publicationsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
|
||||
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
|
||||
<icon gradient="monitor-gradient" degrees="110" ratio="2.5" [svg]="((publicationsSize.number|number) + publicationsSize.size) | textAsSvg"></icon>
|
||||
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom">
|
||||
<loading *ngIf="loading"></loading>
|
||||
<div *ngIf="!loading" class="uk-width-1-1 uk-flex-center uk-grid" uk-grid>
|
||||
<div *ngIf="publicationsSize">
|
||||
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target="_blank">
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(publicationsSize.number|number) + publicationsSize.size}}</h3>
|
||||
<div class="uk-margin-small uk-text-large">Publications</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="uk-margin-small uk-text-large">Publications</div>
|
||||
</div>
|
||||
<div *ngIf="datasetsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
|
||||
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
|
||||
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
|
||||
<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="uk-margin-small uk-text-large">Datasets</div>
|
||||
<div *ngIf="datasetsSize">
|
||||
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets" target="_blank">
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(datasetsSize.number|number) + datasetsSize.size}}</h3>
|
||||
<div class="uk-margin-small uk-text-large">Datasets</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="softwareSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
|
||||
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
|
||||
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
|
||||
<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="uk-margin-small uk-text-large">Software</div>
|
||||
<div *ngIf="softwareSize">
|
||||
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
href="https://explore.openaire.eu/search/find/research-outcomes?type=software" target="_blank">
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(softwareSize.number|number) + softwareSize.size}}</h3>
|
||||
<div class="uk-margin-small uk-text-large">Software</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="otherSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
|
||||
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
|
||||
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
|
||||
<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="uk-margin-small uk-text-large">Other</div>
|
||||
<div *ngIf="otherSize">
|
||||
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
href="https://explore.openaire.eu/search/find/research-outcomes?type=other" target="_blank">
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(otherSize.number|number) + otherSize.size}}</h3>
|
||||
<div class="uk-margin-small uk-text-large">Other</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="fundersSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
|
||||
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
|
||||
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
|
||||
<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="uk-margin-small uk-text-large">Funders</div>
|
||||
<div *ngIf="fundersSize">
|
||||
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||||
href="https://explore.openaire.eu/search/find/projects" target="_blank">
|
||||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||||
<div class="uk-text-center">
|
||||
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(fundersSize.number|number) + fundersSize.size}}</h3>
|
||||
<div class="uk-margin-small uk-text-large">Funders</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,8 +141,8 @@
|
|||
</div>
|
||||
<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
|
||||
<div class="">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
|
||||
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook" customClass="uk-text-primary-gradient"></icon>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Global outlook
|
||||
|
|
@ -134,8 +152,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
|
||||
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join" customClass="uk-text-primary-gradient"></icon>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Minimum effort to join
|
||||
|
|
@ -145,8 +163,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
|
||||
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology" customClass="uk-text-primary-gradient"></icon>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Transparent methodology
|
||||
|
|
@ -156,8 +174,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
|
||||
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs" customClass="uk-text-primary-gradient"></icon>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Customised to your needs
|
||||
|
|
|
|||
|
|
@ -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<Visibility, string> = new Map<Visibility, string> ([
|
||||
["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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'0' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">0</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Starting from the OpenAIRE <br> RESEARCH GRAPH
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'1' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">1</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
Provide us some information
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'2' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">2</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
We get the ball rolling
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'3' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">3</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
You validate
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'4' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">4</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
You set up your portal
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<div>
|
||||
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
|
||||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||||
<icon [svg]="'5' | textAsSvg" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
|
||||
<h4 class="uk-text-primary-gradient uk-margin-remove">5</h4>
|
||||
</div>
|
||||
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
|
||||
You track, monitor, report
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 4e49e7f4895797731cc82a039987db0b0448f5b0
|
||||
Subproject commit 4e9981f24f2f9bc7ac0f49897e987a26528b82f8
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 042475cdc6156a8f56e4591109f14e2d2d9f6b12
|
||||
Subproject commit 9f0b25ae591095b9b9a31aa4cba7c98e3d012899
|
||||
Loading…
Reference in New Issue