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

[Library & common-assets | develop]: Minor updates in mobile screens in icons/ paddings in landing pages. 

1. resultLanding.component.html & project.component.html & dataProvider.component.html & organization.component.html: In mobile (small) screens, change ratio of icons in bottom action bar from 2 to 1.4.
2. showIdentifiers.component.ts: In mobile (small) screens, added in fs-modal classTitle="uk-tile-default uk-border-bottom".
3. landing.less: Added variable @landing-action-bar-mobile-border: @global-border; to use it in border-top of landing-action-bar-mobile > div | Changed padding of landing-action-bar-mobile > div to 8px in top and bottom.
This commit is contained in:
Konstantina Galouni 2023-08-21 13:59:20 +03:00
parent 36a2f54193
commit 587297a1c8
5 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
landingPages/dataProvider/dataProvider.component.html
View File

@ -442,19 +442,19 @@
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="note_add" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<icon name="note_add" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.DATASOURCE}}</span>
</a>
</div>
<div *ngIf="dataProviderInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<icon name="pending" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>

2
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -53,7 +53,7 @@ import {properties} from "../../../../environments/environment";
</div>
</modal-alert>
<fs-modal *ngIf="isMobile" #identifiersModal>
<fs-modal *ngIf="isMobile" #identifiersModal classTitle="uk-tile-default uk-border-bottom">
<div class="uk-text-small">
<ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
</div>

4
landingPages/organization/organization.component.html
View File

@ -377,13 +377,13 @@
<div class="uk-container uk-grid uk-flex-middle uk-child-width-1-2 uk-text-xsmall uk-text-meta">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="corporate_fare" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<icon name="corporate_fare" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.ORGANIZATION}}</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<icon name="pending" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>

6
landingPages/project/project.component.html
View File

@ -583,19 +583,19 @@
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<icon name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.PROJECT}}</span>
</a>
</div>
<div *ngIf="projectInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<icon name="pending" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>

18
landingPages/result/resultLanding.component.html
View File

@ -697,26 +697,26 @@
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; egiTransferModalOpen = false; scroll();">
<span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'other research product'" name="apps" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'other research product'" name="apps" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="1.4"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="1.4"></icon>
</span>
<span>{{getTypeName()}}</span>
</a>
</div>
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<icon name="pending" type="outlined" [flex]="true" [ratio]="1.4" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</div>