[Monitor | Trunk]: Add mobile view for stakeholders and message if there are no stakeholder of a type.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@58869 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
b73abe4541
commit
231c4ae4db
|
|
@ -163,46 +163,62 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.stakeholder-section ul {
|
||||
.stakeholder-section .tabs > ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stakeholder-section ul li {
|
||||
.stakeholder-section .tabs > ul > li {
|
||||
display: inline-block;
|
||||
color: #707070;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
margin-left: 25px;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.stakeholder-section ul li:hover {
|
||||
.stakeholder-section .tabs > ul > li:hover {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.stakeholder-section ul li.uk-active {
|
||||
color: #1a1a1a;
|
||||
border: #E3E3E3 solid 1px;
|
||||
border-bottom: #F9F9F9 solid 1px;;
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders {
|
||||
border-top: #E3E3E3 solid 1px;
|
||||
margin-top: -1px;
|
||||
padding-top: 20px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
|
||||
.stakeholder-section .tabs > ul > li:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.stakeholder-section .tabs > ul > li.uk-active {
|
||||
color: #1a1a1a;
|
||||
border-bottom: var(--portal-main-color) solid 2px;
|
||||
}
|
||||
|
||||
.stakeholders.uk-grid-small > * {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.stakeholders.uk-grid-small > .uk-grid-margin {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stakeholder-section .stakeholders .header {
|
||||
background-color: #00a0de;
|
||||
position: relative;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders .header img{
|
||||
.stakeholder-section .stakeholders .header > img {
|
||||
max-width: 50%;
|
||||
max-height: 50%;
|
||||
position: absolute;
|
||||
|
|
@ -211,6 +227,20 @@
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders .header > div {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders .header > div > img {
|
||||
max-width: 50%;
|
||||
max-height: 50%;
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders .header.small {
|
||||
height: 150px;
|
||||
}
|
||||
|
|
@ -222,3 +252,17 @@
|
|||
.stakeholder-section .stakeholders .header.large {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
||||
.stakeholder-section .tabs > ul > li.uk-active {
|
||||
color: #1a1a1a;
|
||||
border: #E3E3E3 solid 1px;
|
||||
border-bottom: #F9F9F9 solid 1px;
|
||||
}
|
||||
|
||||
.stakeholder-section .stakeholders {
|
||||
border-top: #E3E3E3 solid 1px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-text-large uk-text-justify uk-position-relative">
|
||||
<div
|
||||
class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-text-large uk-text-justify uk-position-relative">
|
||||
<div class="uk-grid uk-grid-match uk-margin-left uk-margin-right uk-child-width-1-2@m" uk-grid>
|
||||
<div class="boat uk-hidden@m"></div>
|
||||
<div class="boat uk-visible@l"></div>
|
||||
|
|
@ -128,25 +129,77 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="stakeholders && stakeholders.length > 0"
|
||||
<div *ngIf="loading && stakeholders.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
|
||||
<errorMessages [status]="[status]" [type]="'stakeholders'"></errorMessages>
|
||||
</div>
|
||||
<div *ngIf="!loading && stakeholders && stakeholders.length > 0"
|
||||
class="uk-section uk-section-large uk-margin-right uk-margin-left uk-margin-large-top stakeholder-section">
|
||||
<div class="uk-container uk-visible@m" uk-filter="target: .stakeholders">
|
||||
<div class="uk-container uk-visible@s" uk-filter="target: .stakeholders">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="uk-active" uk-filter-control>All</li>
|
||||
<li uk-filter-control="[data-type='funder']">Funders</li>
|
||||
<li uk-filter-control="[data-type='ri']">Research Initiatives</li>
|
||||
<!--<li uk-filter-control="[data-type='project']">Projects</li>-->
|
||||
<li uk-filter-control="[data-type='organization']">Organizations</li>
|
||||
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
|
||||
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
|
||||
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
|
||||
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
|
||||
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="stakeholders uk-child-width-1-2 uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
|
||||
uk-grid="masonry: true">
|
||||
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" class="uk-margin-medium-bottom">
|
||||
<div class="header" [ngClass]="stakeholder.size">
|
||||
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
|
||||
</div>
|
||||
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
|
||||
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
|
||||
<div class="header" [ngClass]="stakeholder.size">
|
||||
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
|
||||
</div>
|
||||
</a>
|
||||
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
|
||||
<div class="header" [ngClass]="stakeholder.size">
|
||||
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
|
||||
</div>
|
||||
</a>
|
||||
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
|
||||
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
|
||||
</a>
|
||||
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
|
||||
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top">
|
||||
Nothing here yet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-hidden@s" uk-filter="target: .stakeholders">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
|
||||
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
|
||||
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
|
||||
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
|
||||
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="stakeholders uk-child-width-1-2 uk-grid uk-grid-small" uk-grid="">
|
||||
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
|
||||
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
|
||||
<div class="header">
|
||||
<div>
|
||||
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
|
||||
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
|
||||
<div class="header">
|
||||
<div>
|
||||
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
|
||||
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top">
|
||||
Nothing here yet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -172,3 +225,8 @@
|
|||
<other-portals [properties]="properties"></other-portals>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
|
||||
<div class="uk-text-left">
|
||||
You will be navigated to a new tab. Are you sure that you want to proceed?
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,9 @@ 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 {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
|
||||
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
||||
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
|
||||
import {Stakeholder, StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
@Component({
|
||||
selector: 'home',
|
||||
|
|
@ -93,6 +94,7 @@ export class HomeComponent {
|
|||
|
||||
public pageTitle = "OpenAIRE | Monitor";
|
||||
public stakeholders: any[] = [];
|
||||
public selected: Stakeholder = null;
|
||||
public pageContents = null;
|
||||
public divContents = null;
|
||||
// Message variables
|
||||
|
|
@ -104,7 +106,7 @@ export class HomeComponent {
|
|||
|
||||
properties: EnvProperties;
|
||||
public keyword: string = "";
|
||||
public type: string = "all";
|
||||
public type: string = null;
|
||||
|
||||
public publicationsSize: any = null;
|
||||
public datasetsSize: any = null;
|
||||
|
|
@ -117,6 +119,8 @@ export class HomeComponent {
|
|||
public observer: IntersectionObserver;
|
||||
public captains: boolean = false;
|
||||
@ViewChild('ref') ref: ElementRef;
|
||||
@ViewChild('AlertModal') modal;
|
||||
private directLink: boolean = true;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -125,6 +129,7 @@ export class HomeComponent {
|
|||
private _title: Title,
|
||||
private _piwikService: PiwikService,
|
||||
private _stakeholderService: StakeholderService,
|
||||
private localStorageService: LocalStorageService,
|
||||
private helper: HelperService,
|
||||
private seoService: SEOService,
|
||||
private _refineFieldResultsService: RefineFieldResultsService, private _searchResearchResultsService: SearchResearchResultsService) {
|
||||
|
|
@ -158,6 +163,9 @@ export class HomeComponent {
|
|||
// this.createGifs();
|
||||
//this.getDivContents();
|
||||
this.getPageContents();
|
||||
this.localStorageService.get().subscribe(value => {
|
||||
this.directLink = value;
|
||||
})
|
||||
});
|
||||
this.initAnimations();
|
||||
this.startCaptainsAnimation();
|
||||
|
|
@ -176,7 +184,7 @@ export class HomeComponent {
|
|||
this.clearTimeouts();
|
||||
this.state = state;
|
||||
this.timeouts.push(setTimeout(() => {
|
||||
if(this.state < 3) {
|
||||
if (this.state < 3) {
|
||||
this.startCaptainsAnimation(this.state + 1);
|
||||
} else {
|
||||
this.startCaptainsAnimation();
|
||||
|
|
@ -202,6 +210,15 @@ export class HomeComponent {
|
|||
})
|
||||
}
|
||||
|
||||
public get stakeholdersNumber(): number {
|
||||
if(this.type === null) {
|
||||
return this.stakeholders.length;
|
||||
} else {
|
||||
console.log(this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length);
|
||||
return this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length;
|
||||
}
|
||||
}
|
||||
|
||||
getNumbers() {
|
||||
this.numberSubs.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
|
||||
data => {
|
||||
|
|
@ -303,16 +320,41 @@ export class HomeComponent {
|
|||
|
||||
private setSizeOfStakeholder(index) {
|
||||
let mod = index % 9;
|
||||
if(mod === 0 || mod === 4 || mod === 8) {
|
||||
if (mod === 0 || mod === 4 || mod === 8) {
|
||||
this.stakeholders[index].size = 'large';
|
||||
console.log(this.stakeholders[index]);
|
||||
} else if(mod === 1 || mod === 5 || mod === 6) {
|
||||
} else if (mod === 1 || mod === 5 || mod === 6) {
|
||||
this.stakeholders[index].size = 'small';
|
||||
} else {
|
||||
this.stakeholders[index].size = 'medium';
|
||||
}
|
||||
}
|
||||
|
||||
public confirmModalOpen(result: Stakeholder) {
|
||||
this.selected = result;
|
||||
this.modal.cancelButton = true;
|
||||
this.modal.okButton = true;
|
||||
this.modal.alertTitle = 'You are going to visit ' + result.name + ' Monitor Dashboard';
|
||||
this.modal.alertMessage = false;
|
||||
this.modal.okButtonLeft = false;
|
||||
this.modal.okButtonText = 'Yes';
|
||||
this.modal.cancelButtonText = 'No';
|
||||
this.modal.choice = true;
|
||||
this.modal.open();
|
||||
}
|
||||
|
||||
public getStakeholderPageUrl(stakeholder: Stakeholder) {
|
||||
return this.properties.baseLink + '/dashboard/' + stakeholder.alias;
|
||||
}
|
||||
|
||||
public goToPage(data: any) {
|
||||
if (data.value == true) {
|
||||
let url = this.getStakeholderPageUrl(this.selected);
|
||||
this.localStorageService.setCommunityDirectLink(data.choice);
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
public quote(param: string): string {
|
||||
return StringUtils.quote(param);
|
||||
}
|
||||
|
|
@ -322,7 +364,6 @@ export class HomeComponent {
|
|||
this.piwiksub.unsubscribe();
|
||||
}
|
||||
this.clearTimeouts();
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
private handleError(message: string, error): number {
|
||||
|
|
|
|||
|
|
@ -17,12 +17,13 @@ import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOServi
|
|||
import {HomeRoutingModule} from "./home-routing.module";
|
||||
import {RefineFieldResultsServiceModule} from "../openaireLibrary/services/refineFieldResultsService.module";
|
||||
import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/searchResearchResultsService.module";
|
||||
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule,
|
||||
HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, SearchResearchResultsServiceModule,
|
||||
RefineFieldResultsServiceModule
|
||||
RefineFieldResultsServiceModule, AlertModalModule
|
||||
],
|
||||
declarations: [
|
||||
HomeComponent
|
||||
|
|
|
|||
Loading…
Reference in New Issue