MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

landing mobile: view all modal for FoS & SDGs. update how they appear

This commit is contained in:
Alex Martzios 2023-07-20 11:50:10 +03:00
parent d6cc4d4e42
commit 73d6a9f32f
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
landingPages/landing-utils/fos.component.ts
View File

@ -39,7 +39,7 @@ import {StringUtils} from "../../utils/string-utils.class";
</div> </div>
</div> </div>
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div class="uk-grid uk-grid-small uk-grid-divider" uk-grid> <div *ngIf="!viewAll" class="uk-grid uk-grid-small uk-grid-divider" uk-grid>
<div class="uk-width-1-4 uk-text-meta"> <div class="uk-width-1-4 uk-text-meta">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div> <div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
{{title}} {{title}}
@ -57,6 +57,18 @@ import {StringUtils} from "../../utils/string-utils.class";
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="viewAll">
<div *ngFor="let subject of subjects; let i=index" class="uk-text-truncate">
<a *ngIf="properties.adminToolsPortalType != 'eosc'"
[routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subject.id)}">
{{subject.label}}
</a>
<a *ngIf="properties.adminToolsPortalType == 'eosc'" class="custom-external" target="_blank"
[href]="'https://explore.openaire.eu'+properties.searchLinkToResults+'?fos='+urlEncodeAndQuote(subject.id)">
{{subject.label}}
</a>
</div>
</div>
<div class="uk-text-right uk-margin-small-top"> <div class="uk-text-right uk-margin-small-top">
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate"> (click)="viewAllClick();" class="view-more-less-link uk-text-truncate">

29
landingPages/landing-utils/sdg.component.ts
View File

@ -46,19 +46,26 @@ import {StringUtils} from "../../utils/string-utils.class";
</div> </div>
</div> </div>
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div> <div *ngIf="!viewAll">
<div class="uk-flex uk-flex-middle uk-flex-wrap"> <div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
<img src="assets/common-assets/common/The_Global_Goals_Icon_Color.svg" <div class="uk-flex uk-flex-middle uk-flex-wrap">
loading="lazy" alt="sdg_colors" style="width:18px; height:18px"> <img src="assets/common-assets/common/The_Global_Goals_Icon_Color.svg"
<span class="uk-margin-xsmall-left uk-margin-xsmall-right uk-text-meta">SDGs:</span> loading="lazy" alt="sdg_colors" style="width:18px; height:18px">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate"> <span class="uk-margin-xsmall-left uk-margin-xsmall-right uk-text-meta">SDGs:</span>
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
<a [routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">{{subject}}</a>
<span *ngIf="(viewAll && i<subjects.length-1) || i<threshold-1">, &nbsp;</span>
</div>
<!-- <div>
{{subjects.slice(0, viewAll?subjects.length:threshold).join(", ")}}
</div> -->
</div>
</div>
<div *ngIf="viewAll">
<div *ngFor="let subject of subjects; let i=index" class="uk-text-truncate">
<a [routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">{{subject}}</a> <a [routerLink]=" properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(subject)}">{{subject}}</a>
<span *ngIf="(viewAll && i<subjects.length-1) || i<threshold-1">, &nbsp;</span>
</div> </div>
<!-- <div> </div>
{{subjects.slice(0, viewAll?subjects.length:threshold).join(", ")}}
</div> -->
</div>
<div class="uk-text-right uk-margin-small-top"> <div class="uk-text-right uk-margin-small-top">
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-text-truncate"> (click)="viewAllClick();" class="view-more-less-link uk-link uk-text-truncate">