[Library | explore-redesign]: Mobile redesign minor fixes for actions icons.

1. availableOn.component.ts: Make "arrow_right" and access right icons bigger in for mobile.
2. resultLanding.component.html: Set same ratio in all actions icons.
3. orcid-work.component.ts: Add margin small (not xsmall) when isMobile and landing.
This commit is contained in:
Konstantina Galouni 2023-02-21 17:07:23 +02:00
parent f9ff62f188
commit 44e521cc8e
3 changed files with 8 additions and 17 deletions

View File

@ -14,7 +14,7 @@ declare var UIkit;
<ng-container *ngIf="availableOn[0].downloadUrl">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
</span>
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
<a uk-tooltip="Source" target="_blank"
@ -35,7 +35,7 @@ declare var UIkit;
<a class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link" (click)="openAvailableListFsModal()">
<span uk-tooltip="Source">{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span>
<icon [flex]="true" name="arrow_right"></icon>
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
</span>
</a>
<fs-modal #availableListFsModal classTitle="uk-tile-default uk-border-bottom">

View File

@ -565,7 +565,7 @@
<ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="deleteByInferenceOpened = true; openFsModal(alertModalDeletedByInferenceFS, 'Other versions')">
<icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>
<icon [flex]="true" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-small-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span>
@ -575,7 +575,7 @@
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(addThisFsModal, 'Share this '+getTypeName()+' in your social networks')">
<icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
<icon [flex]="true" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-small-left">Share</span>
</div>
<hr class="uk-margin-remove">
@ -583,7 +583,7 @@
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="citeThisClicked=true; openFsModal(citeFsModal, 'Cite this '+getTypeName())">
<icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
<icon [flex]="true" name="cite" visuallyHidden="cite"></icon>
<span class="uk-margin-small-left">Cite</span>
</div>
<hr class="uk-margin-remove">
@ -596,20 +596,11 @@
</div>
<hr class="uk-margin-remove">
</ng-container>
<!-- <ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">-->
<!-- <div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6" (click)="onSelectActiveTab('orcid')">-->
<!-- <icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>-->
<!-- <span class="uk-margin-small-left">-->
<!-- ORCID-->
<!-- </span>-->
<!-- </div>-->
<!-- <hr>-->
<!-- </ng-container>-->
<ng-container *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
<icon [flex]="true" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-small-left"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: bottom-left; cls: uk-active uk-text-small uk-padding-small'">

View File

@ -31,7 +31,7 @@ declare var UIkit: any;
<icon [class.text-orcid]="!showLoading && isLoggedIn && pids"
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids" name="orcid_add" ratio="1"
visuallyHidden="add"></icon>
<span class="uk-margin-xsmall-left">Claim</span>
<span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Claim</span>
</a>
<span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading
[top_margin]="false" [size]="'small'"></loading></span>
@ -49,7 +49,7 @@ declare var UIkit: any;
<icon [class.text-orcid]="!showLoading && isLoggedIn && pids"
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids" name="orcid_bin" ratio="1"
visuallyHidden="delete"></icon>
<span class="uk-margin-xsmall-left">Remove</span>
<span [ngClass]="(isMobile && pageType == 'landing') ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Remove</span>
</a>
<span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading
[top_margin]="false" [size]="'small'"></loading></span>