[master | DONE]: Add style for different stakeholders. Fix routes active in menu. Change style also in admin base stakeholder's type.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-15 17:40:20 +02:00
parent ccbd4654fe
commit b02758e19c
15 changed files with 210 additions and 226 deletions

View File

@ -9,14 +9,16 @@ import {MenuItem} from "../openaireLibrary/sharedComponents/menu";
@Component({
selector: 'admin',
template: `
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading" class="sidebar_main_swipe uk-flex uk-background-default"
[class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar)"
[class.sidebar_mini]="!open && (hasSidebar || hasInternalSidebar)"
[class.sidebar_hover]="hover">
<dashboard-sidebar *ngIf="hasSidebar && !hasInternalSidebar && sideBarItems.length > 0" [items]="sideBarItems" [backItem]="backItem"></dashboard-sidebar>
<div class="uk-width-1-1">
<router-outlet></router-outlet>
<div [ngClass]="stakeholder?stakeholder.type:null">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading" class="sidebar_main_swipe uk-flex uk-background-default"
[class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar)"
[class.sidebar_mini]="!open && (hasSidebar || hasInternalSidebar)"
[class.sidebar_hover]="hover">
<dashboard-sidebar *ngIf="hasSidebar && !hasInternalSidebar && sideBarItems.length > 0" [items]="sideBarItems" [backItem]="backItem"></dashboard-sidebar>
<div class="uk-width-1-1">
<router-outlet></router-outlet>
</div>
</div>
</div>
`

View File

@ -69,10 +69,10 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit {
initialize() {
this.menuItems = [
new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/", false, [], null, {}, null, null, null, null),
new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, null),
new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, null),
new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, null),
new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/", false, [], null, {}, null, null, null, '/search'),
new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
/*
new MenuItem("repository", "Repository Monitors", "", "/", false, [], null, {}, null, null, null, null),
*/

View File

@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s
@Component({
selector: 'national',
template: `
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading && stakeholder">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 class="uk-h2">{{entities.country}} {{entities.stakeholder}}</h1>
</div>
</div>
<div class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="'/'" (click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="'/search/find/research-outcomes'">Browse Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
<h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
No {{entities.country}} {{entities.stakeholder}} yet.
</h3>
<div class="country">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading && stakeholder">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 class="uk-h2">{{entities.country}} {{entities.stakeholder}}</h1>
</div>
</div>
<div class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="'/'" (click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="'/search/find/research-outcomes'">Browse Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</div>
<h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
No {{entities.country}} {{entities.stakeholder}} yet.
</h3>
</div>
`
})
export class NationalComponent extends StakeholderBaseComponent implements OnInit {

View File

@ -8,7 +8,7 @@ const routes: Route[] = [
path: '', component: NationalComponent, children: [
{path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)},
{path: '', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)},
], data: {stakeholder: 'irish'}
], data: {stakeholder: 'tubitak'}
}
];

View File

@ -16,45 +16,50 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
@Component({
selector: 'researcher',
template: `
<div style="background: transparent radial-gradient(closest-side at 50% 38%, #3086ED 0%,#184377 100%) 0% 0% no-repeat padding-box; height: 200px" class="uk-light uk-padding">
<div *ngIf="authorId && author" class="">
<div class="uk-margin-top uk-margin-bottom uk-grid uk-flex uk-flex-middle">
<div>
<span class="uk-border uk-border-circle uk-padding-small uk-text-meta uk-margin-small-right"
width="16px" height="16px">
<span uk-icon="user"></span></span>
</div>
<div class="uk-padding-remove-left">
{{author.authorGivenName}} {{author.authorFamilyName}}
<br>
<span *ngIf="totalResults > 0">{{totalResults}} research outcomes <span *ngIf="openResults && totalResults">({{getPercentage()}}% open access)</span></span>
<span *ngIf="author.institutions">{{author.institutions.join(", ")}} </span>
</div>
</div>
<div class="researcher">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<div *ngIf="authorId && author">
<div class="uk-margin-top uk-margin-bottom uk-grid uk-flex uk-flex-middle">
<div>
<span class="uk-border uk-border-circle uk-padding-small uk-text-meta uk-margin-small-right"
width="16px" height="16px">
<span uk-icon="user"></span></span>
</div>
<div class="uk-padding-remove-left">
{{author.authorGivenName}} {{author.authorFamilyName}}
<br>
<span *ngIf="totalResults > 0">{{totalResults}} research outcomes <span
*ngIf="openResults && totalResults">({{getPercentage()}}% open access)</span></span>
<span *ngIf="author.institutions">{{author.institutions.join(", ")}} </span>
</div>
<div class="uk-text-xsmall uk-text-secondary uk-margin-medium-top">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
<a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link uk-text-primary">
</div>
{{properties.orcidURL + author.id}}</a></div>
<div class="uk-text-xsmall uk-text-secondary uk-margin-medium-top">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
<a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link uk-text-primary">
{{properties.orcidURL + author.id}}</a></div>
</div>
<h1 *ngIf="!authorId" class="uk-h2">Researchers</h1>
</div>
</div>
</div>
<div class="uk-section uk-container">
<router-outlet></router-outlet>
</div>
</div>
</div>
<div *ngIf="!authorId">
<div class="uktext-large">Researcher Monitors</div>
<div>Lorem ipsum...</div>
</div>
<loading *ngIf="authorId && !author && loading"></loading>
</div>
<div class="uk-section uk-container">
<router-outlet></router-outlet>
</div>
`
})
export class ResearcherComponent extends BaseComponent implements OnInit {
author;
authorId;
properties = properties;
totalResults;
openResults;
loading = false;
@ -74,7 +79,6 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
ngOnInit() {
this.params.subscribe(params => {
this.authorId = params['stakeholder'];
this.author = null;
this._customFilterService.setCustomFilter([]);
@ -90,7 +94,6 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
]);
this.getResultsForAuthor();
// TODO not correct id/ no author // no irish author?
}, err => {
this._router.navigate([properties.errorLink]);
}));

View File

@ -52,12 +52,11 @@
</div>
</div>
</div>
<div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<loading></loading>
<div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-height-medium uk-position-relative" role="alert">
<loading class="uk-position-center"></loading>
</div>
<div class="uk-flex uk-flex-center">
<button *ngIf="authorsToShow.length > 0 && orcidStatus != errorCodes.LOADING && (authorsToShow.length > page*size || authors.length > authorsRendered)" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
</div>
</div>
</div>

View File

@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s
@Component({
selector: 'rfo',
template: `
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.funders}}</h1>
</div>
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="funder">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.funders}}</h1>
</div>
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
</div>
`
})
export class RfoComponent extends StakeholderBaseComponent implements OnInit {

View File

@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s
@Component({
selector: 'rpo',
template: `
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.organizations}}</h1>
</div>
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="organization">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.organizations}}</h1>
</div>
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</div>
</div>
`
})
export class RpoComponent extends StakeholderBaseComponent implements OnInit {

View File

@ -2,6 +2,7 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {Route, RouterModule} from "@angular/router";
import {RpoComponent} from "./rpo.component";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
const routes: Route[] = [
{
path: '', component: RpoComponent, children: [
@ -13,7 +14,7 @@ const routes: Route[] = [
];
@NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
declarations: [RpoComponent],
exports: [RpoComponent],
})

View File

@ -1,6 +1,5 @@
import {Directive, OnInit} from "@angular/core";
import {SearchCustomFilter} from "../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
import {properties} from "../../../environments/environment";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {CustomFilterService} from "../../shared/customFilter.service";
import {ActivatedRoute, Router} from "@angular/router";

View File

@ -1,4 +1,5 @@
@banner-background: @irish-thin-color;
@banner-background: @ciel-color;
@banner-background-gradient: none;
@banner-mode: dark;
@banner-footer-background: transparent;
@ -7,7 +8,6 @@
@banner-tab-margin-bottom: @global-small-margin;
@banner-tab-divider: @global-border-width solid @global-border;
@banner-tab-divider-height: @global-line-height;
@banner-tab-item-color: @global-color;
@banner-tab-item-hover-color: @global-secondary-background;
@banner-tab-item-active-color: @global-secondary-background;
@banner-tab-item-active-indicator: @global-background;
@ -43,7 +43,6 @@
}
a {
color: @banner-tab-item-color;
text-transform: uppercase;
text-decoration: none;
}

View File

@ -1,12 +1,14 @@
@irish-primary-color: #009A49;
@irish-light-color: #25AE7A;
@irish-dark-color: #002B1A;
@irish-secondary-color: #FF7901;
@irish-thin-color: #DCE9E3;
@irish-global-background: #F9FBFC;
@primary-color: #009A49;
@primary-light-color: #25AE7A;
@primary-dark-color: #002B1A;
@secondary-color: #FF7901;
@ciel-color: #DCE9E3;
@default-color: #F9FBFC;
@muted-color: @gray-300;
@funder-color: #4D276F;
@organization-color: #f5cc1c;
@country-color: @irish-primary-color;
@country-color: @primary-color;
@datasource-color: #D45E50;
@researcher-color: #184377;

View File

@ -1,14 +1,7 @@
@import "color";
/** Backgrounds */
@global-primary-background: @irish-primary-color;
@global-secondary-background: @irish-secondary-color;
@global-background: @irish-global-background;
@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @irish-light-color 0%, @irish-dark-color 100%);
@global-muted-background: @gray-300;
/** Borders */
@global-border: @gray-300;
@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @primary-light-color 0%, @primary-dark-color 100%);
/* Controls */
@global-control-small-height: 25px;

View File

@ -1,87 +1,67 @@
@general-search-form-background: none;
.irish-monitor {
/* Import OpenAIRE theme*/
@import (multiple) "~src/assets/openaire-theme/less/_import";
@import (multiple) "~src/assets/common-assets/less/general";
@import (multiple) "~src/assets/common-assets/less/dashboard";
@import (multiple) "~src/assets/common-assets/less/landing";
.country {
@import (multiple) "~src/assets/extend-theme/less/_import-variables";
@import (multiple) "~src/assets/extend-theme/less/banner";
@monitor-dashboard-background: #F3F3F3;
/** Global */
@global-primary-gradient: linear-gradient(110deg, @monitor-light-color 0%, @monitor-dark-color 100%);
/** Background */
@background-primary-background: @monitor-color;
@background-primary-background-gradient: none;
/** Button */
@button-primary-background: @monitor-color;
@button-secondary-border: @monitor-color;
@button-secondary-color: @monitor-color;
@button-secondary-hover-background: @global-secondary-background;
@button-secondary-hover-background-gradient: none;
@button-secondary-active-background: @global-secondary-background;
@button-secondary-active-background-gradient: none;
/** Label */
@label-secondary-color: @monitor-color;
@label-secondary-border: @monitor-color;
/** List */
@list-primary-color: @monitor-color;
/* Navbar */
@inverse-navbar-background: @monitor-color;
/** Text */
@text-primary-color: @monitor-color;
@text-background-color: @monitor-color;
@inverse-text-primary-color: @monitor-color;
/* Slider */
@dotnav-item-background: fade(@monitor-color, 50%);
@dotnav-item-hover-background: @monitor-color;
@dotnav-item-onclick-background: @monitor-color;
@dotnav-item-active-background: @monitor-color;
/* General */
@general-search-form-background: @monitor-dashboard-background;
@general-tab-featured-tab: @monitor-color;
/* Landing */
@landing-portal-color: @monitor-color;
/* Dashboard */
@dashboard-page-content-background: @monitor-dashboard-background;
@dashboard-primary-background: @monitor-color;
@dashboard-menu-section-sublist-border: fade(@monitor-color, 30%);
& #filters_icon .start {
stop-color: @monitor-light-color;
}
& #filters_icon .end {
stop-color: @monitor-dark-color;
}
.preview {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
background: @global-inverse-color;
border: 2px solid @background-primary-background;
border-radius: @global-border-radius;
box-shadow: @global-large-box-shadow;
padding: 20px 25px;
z-index: @global-z-index;
}
@banner-mode: light;
@banner-background: @global-primary-gradient;
}
#print_toggle {
top: 320px !important;
.funder {
@import (multiple) "~src/assets/extend-theme/less/_import";
@import (multiple) "~src/assets/common-assets/less/general";
@import (multiple) "~src/assets/common-assets/less/landing";
@import (multiple) "~src/assets/common-assets/less/dashboard";
@primary-color: @funder-color;
@primary-light-color: #9A4DDD;
@primary-dark-color: #480088;
@ciel-color: #dab6ff;
@banner-mode: light;
@banner-background: @global-primary-gradient;
}
.organization {
@import (multiple) "~src/assets/extend-theme/less/_import";
@import (multiple) "~src/assets/common-assets/less/general";
@import (multiple) "~src/assets/common-assets/less/landing";
@import (multiple) "~src/assets/common-assets/less/dashboard";
@primary-color: @organization-color;
@primary-light-color: #ffe165;
@primary-dark-color: #9c7d00;
@ciel-color: #fff1cb;
@banner-mode: light;
@banner-background: @global-primary-gradient;
}
.datasource {
@import (multiple) "~src/assets/extend-theme/less/_import";
@import (multiple) "~src/assets/common-assets/less/general";
@import (multiple) "~src/assets/common-assets/less/landing";
@import (multiple) "~src/assets/common-assets/less/dashboard";
@primary-color: @datasource-color;
@primary-light-color: #D45E50;
@primary-dark-color: #6A2F28;
@ciel-color: #ffc3bf;
@banner-mode: light;
@banner-background: @global-primary-gradient;
}
.researcher {
@import (multiple) "~src/assets/extend-theme/less/_import";
@import (multiple) "~src/assets/common-assets/less/general";
@import (multiple) "~src/assets/common-assets/less/landing";
@import (multiple) "~src/assets/common-assets/less/dashboard";
@primary-color: @researcher-color;
@primary-light-color: #3086ED;
@primary-dark-color: #184377;
@ciel-color: #ddeaff;
@banner-mode: light;
@banner-background: @global-primary-gradient;
}
#filters_switcher_toggle {

View File

@ -1,5 +1,5 @@
/* You can add global styles to this file, and also import other style files */
/* Import OpenAIRE theme*/
/* Import Irish theme*/
@import "~src/assets/extend-theme/less/_import";
@import "~src/assets/common-assets/less/general";
@import "~src/assets/common-assets/less/user";