Add color coding in stakeholders. Reduce breadcrumbs margin from top. Some UI changes in home

This commit is contained in:
Konstantinos Triantafyllou 2022-02-23 00:39:14 +02:00
parent f0388a8578
commit aca976da06
14 changed files with 75 additions and 72 deletions

View File

@ -1,11 +1,24 @@
.uk-card {
--border-color: none;
--type-color: none;
border-bottom: 4px solid var(--border-color);
}
.uk-card .type {
color: var(--type-color);
}
.funder { .funder {
color: var(--funder-color); --border-color: rgba(60, 159, 148, 0.3);
--type-color: #3C9F94;
} }
.ri { .ri {
color: var(--ri-color); --border-color: rgba(208, 35, 174, 0.3);
--type-color: #D023AE;
} }
.organization { .organization {
color: var(--organization-color); --border-color: rgba(226, 139, 108, 0.3);
--type-color: #E28B6C;
} }

View File

@ -1,23 +1,23 @@
<a *ngIf="directLink && stakeholder" [href]="getStakeholderPageUrl()" target="_blank" <a *ngIf="directLink && stakeholder" [href]="getStakeholderPageUrl()" target="_blank"
class="uk-height-1-1 uk-link-reset" [class.uk-disabled]="!hasPermission()"> class="uk-height-1-1 uk-link-reset uk-display-block" [class.uk-disabled]="!hasPermission()">
<ng-container [ngTemplateOutlet]="card"></ng-container> <ng-container [ngTemplateOutlet]="card"></ng-container>
</a> </a>
<a *ngIf="!directLink && stakeholder" (click)="confirmModalOpen()" <a *ngIf="!directLink && stakeholder" (click)="confirmModalOpen()"
class="uk-height-1-1 uk-link-reset" [class.uk-disabled]="!hasPermission()"> class="uk-height-1-1 uk-link-reset uk-display-block" [class.uk-disabled]="!hasPermission()">
<ng-container [ngTemplateOutlet]="card"></ng-container> <ng-container [ngTemplateOutlet]="card"></ng-container>
</a> </a>
<ng-template #card> <ng-template #card>
<div class="uk-padding"> <div class="uk-card uk-card-default uk-card-hover uk-card-body" [ngClass]="stakeholder.type" [class.uk-disabled]="!hasPermission()">
<div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'" <div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle"> class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.2" [flex]="true"></icon> <icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span> <span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</div> </div>
<div class="uk-card-media-top uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall"> <div class="uk-card-media-top uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall"> <img *ngIf="stakeholder.logoUrl" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
</div> </div>
<div class="uk-card-body uk-padding-remove-horizontal"> <div class="uk-card-body uk-padding-remove-horizontal">
<div class="uk-text-capitalize uk-text-small" [ngClass]="stakeholder.type">{{mapType(stakeholder.type)}}</div> <div class="uk-text-capitalize uk-text-small type">{{mapType(stakeholder.type)}}</div>
<div class="uk-h6 uk-link uk-margin-remove multi-line-ellipsis lines-2"> <div class="uk-h6 uk-link uk-margin-remove multi-line-ellipsis lines-2">
<p *ngIf="stakeholder.name" class="uk-margin-remove"> <p *ngIf="stakeholder.name" class="uk-margin-remove">
{{stakeholder.name}} {{stakeholder.name}}

View File

@ -19,7 +19,7 @@ export class BrowseStakeholderComponent {
public directLink: boolean = true; public directLink: boolean = true;
public visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([ public visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'incognito'], ["PRIVATE", 'incognito'],
["RESTRICTED", 'group'] ["RESTRICTED", 'restricted']
]); ]);
private subscriptions: any[] = []; private subscriptions: any[] = [];

View File

@ -7,7 +7,7 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {BrowseStakeholderComponent} from "./browse-stakeholder.component"; import {BrowseStakeholderComponent} from "./browse-stakeholder.component";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service"; import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {incognito} from "../openaireLibrary/utils/icons/icons"; import {incognito, restricted} from "../openaireLibrary/utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
@ -25,6 +25,6 @@ import {incognito} from "../openaireLibrary/utils/icons/icons";
}) })
export class BrowseStakeholderModule { export class BrowseStakeholderModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([incognito]); this.iconsService.registerIcons([incognito, restricted]);
} }
} }

View File

@ -1,6 +1,6 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div id="contact-us" class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain uk-background-blend-multiply"> <div id="contact-us" class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
<div class="uk-container uk-container-large uk-section uk-padding-remove-bottom"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small"> <div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>

View File

@ -1,22 +1,27 @@
.home-background { .home-background {
position: relative;
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
background-image: url("~src/assets/monitor-assets/home/monitor.jpg");
background-color: white; background-color: white;
height: calc(100vh - 1px);
} }
.home-background .mask { @media only screen and (min-width: 960px) {
position: absolute; .home-background {
top: 0; position: relative;
left: 50vw; background-repeat: no-repeat;
bottom: 0; background-position: 80% center;
right: 0; background-size: contain;
background-image: url("~src/assets/monitor-assets/home/mask.svg"); background-image: url("~src/assets/monitor-assets/home/monitor.jpg");
background-repeat: no-repeat; height: calc(100vh - 1px);
background-position: right center; }
background-size: contain;
background-attachment: fixed; .home-background .mask {
position: absolute;
top: 0;
left: 30%;
bottom: 0;
right: 0;
background-image: url("~src/assets/monitor-assets/home/mask.svg");
background-repeat: no-repeat;
background-position: 80% center;
background-size: contain;
background-attachment: fixed;
}
} }

View File

@ -14,8 +14,8 @@
</div> </div>
</div> </div>
</div> </div>
<section-scroll [customClass]="'uk-section uk-section-primary monitor-dark-logo-background uk-padding-remove-bottom'" <section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom'"
[childrenCustomClass]="'uk-container uk-container-large'" [map]="map"> [childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1"> <div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large"> <div class="top-content uk-container uk-container-large">
<span class="uk-h6 uk-text-primary">Benefits</span> <span class="uk-h6 uk-text-primary">Benefits</span>
@ -23,12 +23,9 @@
class="uk-text-primary">.</span></h2> class="uk-text-primary">.</span></h2>
</div> </div>
</div> </div>
<div left class="uk-width-1-1 uk-width-1-2@m"> <div left class="uk-width-1-1 uk-width-1-2@m uk-background-primary monitor-dark-logo-background">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center"> <div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
<img id="ipad-1" src="assets/monitor-assets/home/ipad-1.png" alt="ipad-1" loading="lazy"> <img id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
<img id="ipad-2" src="assets/monitor-assets/home/ipad-2.png" alt="ipad-2" loading="lazy">
</div> </div>
</div> </div>
<div scroll class="uk-width-expand"> <div scroll class="uk-width-expand">
@ -76,7 +73,7 @@
<div class="uk-text-center"> <div class="uk-text-center">
<div <div
class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div> class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
<div class="uk-margin-small uk-text-large">{{name}}</div> <div class="uk-margin-small-top uk-text-large">{{name}}</div>
</div> </div>
</div> </div>
</a> </a>
@ -217,9 +214,7 @@
<div class="uk-padding-small"> <div class="uk-padding-small">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m"> <div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide"> <div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-hover"> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,9 +1,11 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div class="uk-background-norepeat about-background"> <div class="uk-background-norepeat about-background">
<div class="uk-section 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"> <div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div>
<div class="uk-container uk-container-large">
<div class="uk-grid uk-grid-medium uk-padding-small" uk-grid> <div class="uk-grid uk-grid-medium uk-padding-small" uk-grid>
<div class="uk-width-2-3@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center"> <div class="uk-width-2-3@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
<h1>Learn the process<span class="uk-text-primary">.</span></h1> <h1>Learn the process<span class="uk-text-primary">.</span></h1>
@ -19,7 +21,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">0</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">0</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Starting from the OpenAIRE <br> RESEARCH GRAPH Starting from the OpenAIRE <br> RESEARCH GRAPH
@ -32,7 +34,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">1</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">1</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Provide us some information Provide us some information
@ -45,7 +47,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">2</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">2</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
We get the ball rolling We get the ball rolling
@ -58,7 +60,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">3</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">3</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You validate You validate
@ -71,7 +73,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">4</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">4</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You set up your portal You set up your portal
@ -84,7 +86,7 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<h4 class="uk-text-primary-gradient uk-margin-remove">5</h4> <h5 class="uk-text-primary-gradient uk-margin-remove">5</h5>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You track, monitor, report You track, monitor, report
@ -97,7 +99,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large"> <div class="uk-section uk-margin-top uk-container uk-container-large">
<div class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</div> <div class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</div>
<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2> <h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large"> <div class="uk-padding-large">

View File

@ -15,13 +15,11 @@
<div *ngIf="manager.length > 0 || member.length > 0"> <div *ngIf="manager.length > 0 || member.length > 0">
<div *ngIf="manager.length > 0" [class.uk-margin-xlarge-bottom]="member.length > 0"> <div *ngIf="manager.length > 0" [class.uk-margin-xlarge-bottom]="member.length > 0">
<h1 class="uk-h1">You are managing</h1> <h1 class="uk-h1">You are managing</h1>
<div class="uk-margin-large-top"> <div class="uk-margin-large-top" uk-height-match="target: .uk-card">
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 4); let i = index"> <div *ngFor="let stakeholder of manager.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div> </div>
</div> </div>
<div *ngIf="manager.length > 4" class="uk-text-center uk-margin-large-top"> <div *ngIf="manager.length > 4" class="uk-text-center uk-margin-large-top">
@ -37,9 +35,7 @@
<div class="uk-hidden@xl"> <div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 3); let i = index"> <div *ngFor="let stakeholder of manager.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div> </div>
</div> </div>
<div *ngIf="manager.length > 3" class="uk-text-center uk-margin-large-top"> <div *ngIf="manager.length > 3" class="uk-text-center uk-margin-large-top">
@ -56,13 +52,11 @@
</div> </div>
<div *ngIf="member.length > 0"> <div *ngIf="member.length > 0">
<h1 class="uk-h1">You are member of</h1> <h1 class="uk-h1">You are member of</h1>
<div class="uk-margin-large-top"> <div class="uk-margin-large-top" uk-height-match="target: .uk-card">
<div class="uk-visible@xl"> <div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 4); let i = index"> <div *ngFor="let stakeholder of member.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div> </div>
</div> </div>
<div *ngIf="member.length > 4" class="uk-text-center uk-margin-large-top"> <div *ngIf="member.length > 4" class="uk-text-center uk-margin-large-top">
@ -78,9 +72,7 @@
<div class="uk-hidden@xl"> <div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid> <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 3); let i = index"> <div *ngFor="let stakeholder of member.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover"> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div> </div>
</div> </div>
<div *ngIf="member.length > 3" class="uk-text-center uk-margin-large-top"> <div *ngIf="member.length > 3" class="uk-text-center uk-margin-large-top">

@ -1 +1 @@
Subproject commit f3ff37c74cf06a703b31927ee9322cc65917dcf0 Subproject commit 13fee133e4725be6e33872e50f72975bbe35d881

Binary file not shown.

Before

Width:  |  Height:  |  Size: 970 KiB

View File

Before

Width:  |  Height:  |  Size: 553 KiB

After

Width:  |  Height:  |  Size: 553 KiB

View File

@ -1,7 +1,7 @@
:root { :root {
/*buttons*/ /*buttons*/
--button-primary-background: transparent; --button-primary-background: transparent;
--button-primary-background-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%); --button-primary-background-image: linear-gradient(110deg, var(--monitor-light-color) 50%, var(--monitor-dark-color) 100%);
--button-secondary-background: var(--secondary-color); --button-secondary-background: var(--secondary-color);
--button-secondary-background-image: none; --button-secondary-background-image: none;
@ -20,9 +20,6 @@
/*Monitor specific*/ /*Monitor specific*/
--monitor-contrast-color: #FFE7D6; --monitor-contrast-color: #FFE7D6;
--funder-color: #3C9F94;
--ri-color: #D023AE;
--organization-color: #E28B6C;
} }
/*:root {*/ /*:root {*/
@ -60,9 +57,8 @@ main {
.monitor-dark-logo-background { .monitor-dark-logo-background {
background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg"); background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left bottom; background-position: left 97%;
background-size: auto; background-size: contain;
background-attachment: fixed;
} }

@ -1 +1 @@
Subproject commit ad9442d4d2a8eecaaff284f59fc973aaf806517b Subproject commit 0d784875161cd5e74900a229ab995aabc79221a1