[master]: Add colors in five monitors cards and align engagement tags with mocks
This commit is contained in:
parent
31d1d5b7cc
commit
06e099c85c
|
|
@ -20,24 +20,24 @@ import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service
|
|||
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-padding-small">
|
||||
<span class="uk-label webinar uk-padding-xsmall">Webinar</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-xsmall-top">1st Stakeholder Webinar</div>
|
||||
<span class="uk-label uk-label-small webinar uk-padding-xsmall">Webinar</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-small-top">1st Stakeholder Webinar</div>
|
||||
<a href="https://zenodo.org/records/8370579" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-padding-small">
|
||||
<span class="uk-label training uk-padding-xsmall">Training</span>
|
||||
<span class="uk-label funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-xsmall-top">RFO Training</div>
|
||||
<span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
|
||||
<span class="uk-label uk-label-small funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-small-top">RFO Training</div>
|
||||
<a href="https://zenodo.org/records/10202641" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-padding-small">
|
||||
<span class="uk-label training uk-padding-xsmall">Training</span>
|
||||
<span class="uk-label organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-xsmall-top">RPO Training</div>
|
||||
<span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
|
||||
<span class="uk-label uk-label-small organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
|
||||
<div class="uk-text-large uk-text-bold uk-margin-small-top">RPO Training</div>
|
||||
<a href="https://zenodo.org/records/10143613" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-position-relative">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes" uk-height-match=".uk-card">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
National Monitor
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes">
|
||||
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle country uk-height-small">
|
||||
{{entities.country}} {{entities.stakeholder}}
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Research Performing Organisation (RPO)
|
||||
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle organization uk-height-small">
|
||||
Research Performing Organisation ({{entities.organization}})
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Research Funding Organisation (RFO)
|
||||
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle funder uk-height-small">
|
||||
Research Funding Organisation ({{entities.funder}})
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle researcher uk-height-small">
|
||||
Researcher
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Repository
|
||||
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle datasource uk-height-small">
|
||||
{{entities.datasource}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -510,4 +510,4 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import (reference) "~src/assets/extend-theme/less/_import-variables";
|
||||
|
||||
.custom-translate-bottom-left {
|
||||
transform: translate(-20%, 20%);
|
||||
}
|
||||
|
|
@ -5,4 +7,29 @@
|
|||
.five-boxes {
|
||||
grid-gap: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.country {
|
||||
background-color: @country-color;
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
||||
.funder {
|
||||
background: @funder-color;
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
||||
.organization {
|
||||
background-color: @organization-color;
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
||||
.researcher {
|
||||
background-color: @researcher-color;
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
||||
.datasource {
|
||||
background-color: @datasource-color;
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,20 @@
|
|||
import {ChangeDetectorRef, Component} from "@angular/core";
|
||||
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
|
||||
import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
|
||||
|
||||
@Component({
|
||||
selector: 'the-five-monitors',
|
||||
templateUrl: 'the-five-monitors.component.html',
|
||||
styleUrls: ['the-five-monitors.component.less']
|
||||
})
|
||||
export class TheFiveMonitorsComponent extends BaseComponent{
|
||||
export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
|
||||
title = 'The 5 Monitors';
|
||||
description = 'The 5 Monitors';
|
||||
public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
|
||||
public offset: number;
|
||||
public stakeholderEntities = StakeholderEntities;
|
||||
public shouldSticky: boolean = true;
|
||||
|
||||
constructor(protected _route: ActivatedRoute,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
AfterContentChecked, AfterViewInit,
|
||||
AfterContentChecked,
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
|
|
@ -7,7 +8,6 @@ import {
|
|||
OnDestroy,
|
||||
ViewChild
|
||||
} from "@angular/core";
|
||||
import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ declare var UIkit;
|
|||
})
|
||||
export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
|
||||
@Input()
|
||||
public type: StakeholderEntities.FUNDER | StakeholderEntities.RI | StakeholderEntities.ORGANIZATION = StakeholderEntities.FUNDER;
|
||||
public type: string;
|
||||
@Input()
|
||||
public id;
|
||||
@ViewChild('sticky') sticky: ElementRef;
|
||||
|
|
@ -65,7 +65,7 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes
|
|||
public offset: number
|
||||
public height: number;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue