MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/browse-stakeholder/browse-stakeholder.component.css
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 {
color: var(--funder-color);
--border-color: rgba(60, 159, 148, 0.3);
--type-color: #3C9F94;
}
.ri {
color: var(--ri-color);
--border-color: rgba(208, 35, 174, 0.3);
--type-color: #D023AE;
}
.organization {
color: var(--organization-color);
--border-color: rgba(226, 139, 108, 0.3);
--type-color: #E28B6C;
}

10
src/app/browse-stakeholder/browse-stakeholder.component.html
View File

@ -1,23 +1,23 @@
<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>
</a>
<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>
</a>
<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'"
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>
<span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</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">
<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 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">
<p *ngIf="stakeholder.name" class="uk-margin-remove">
{{stakeholder.name}}

2
src/app/browse-stakeholder/browse-stakeholder.component.ts
View File

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

4
src/app/browse-stakeholder/browse-stakeholder.module.ts
View File

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

4
src/app/contact/contact.component.html
View File

@ -1,6 +1,6 @@
<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 class="uk-container uk-container-large uk-section uk-padding-remove-bottom">
<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-section-small uk-padding-remove-bottom">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>

39
src/app/home/home.component.css
View File

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

17
src/app/home/home.component.html
View File

@ -14,8 +14,8 @@
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary monitor-dark-logo-background uk-padding-remove-bottom'"
[childrenCustomClass]="'uk-container uk-container-large'" [map]="map">
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom'"
[childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large">
<span class="uk-h6 uk-text-primary">Benefits</span>
@ -23,12 +23,9 @@
class="uk-text-primary">.</span></h2>
</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">
<img id="ipad-1" src="assets/monitor-assets/home/ipad-1.png" alt="ipad-1" 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">
<img id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
</div>
<div scroll class="uk-width-expand">
@ -76,7 +73,7 @@
<div class="uk-text-center">
<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>
</a>
@ -217,9 +214,7 @@
<div class="uk-padding-small">
<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 class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>

18
src/app/learn-how/learn-how.component.html
View File

@ -1,9 +1,11 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<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">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large">
<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">
<h1>Learn the process<span class="uk-text-primary">.</span></h1>
@ -19,7 +21,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Starting from the OpenAIRE <br> RESEARCH GRAPH
@ -32,7 +34,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Provide us some information
@ -45,7 +47,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
We get the ball rolling
@ -58,7 +60,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You validate
@ -71,7 +73,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You set up your portal
@ -84,7 +86,7 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-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 class="uk-text-lead uk-text-bold uk-margin-small-bottom">
You track, monitor, report
@ -97,7 +99,7 @@
</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>
<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large">

20
src/app/my-stakeholders/my-stakeholders.component.html
View File

@ -15,13 +15,11 @@
<div *ngIf="manager.length > 0 || member.length > 0">
<div *ngIf="manager.length > 0" [class.uk-margin-xlarge-bottom]="member.length > 0">
<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-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 class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
<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-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 class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
<div *ngIf="manager.length > 3" class="uk-text-center uk-margin-large-top">
@ -56,13 +52,11 @@
</div>
<div *ngIf="member.length > 0">
<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-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 class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
<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-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 class="uk-card uk-card-default uk-card-hover">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
<div *ngIf="member.length > 3" class="uk-text-center uk-margin-large-top">

2
src/app/openaireLibrary

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

BIN
src/assets/monitor-assets/home/ipad-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 970 KiB

0
src/assets/monitor-assets/home/ipad-2.png → src/assets/monitor-assets/home/ipad.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 553 KiB

After

Width:  |  Height:  |  Size: 553 KiB

10
src/assets/monitor-custom.css
View File

@ -1,7 +1,7 @@
:root {
/*buttons*/
--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-image: none;
@ -20,9 +20,6 @@
/*Monitor specific*/
--monitor-contrast-color: #FFE7D6;
--funder-color: #3C9F94;
--ri-color: #D023AE;
--organization-color: #E28B6C;
}
/*:root {*/
@ -60,9 +57,8 @@ main {
.monitor-dark-logo-background {
background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto;
background-attachment: fixed;
background-position: left 97%;
background-size: contain;
}

2
src/assets/openaire-theme

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