[develop | DONE | CHANGED]: In deposit page, move "Go to repository" button to top, aligned with the title when possible.

1. searchResultsForOrcid.component.html & searchMyOrcidResults.component.html: Removed [promoteWebsiteURL]="true", since this should be true only in deposit cards.
2. searchResultsInDeposit.component.ts: Added @Input() isMobile: boolean = false;
3. searchResultsInDeposit.component.html: Set parameter [isMobile]="isMobile" to <result-preview>.
4. newSearchPage.component.html: Set parameter [isMobile]="mobile" to <deposit-result>.
5. result-preview.component.html: In deposit cards align on the right of the title the "Go to repository" button and in mobile screens show it on the top right of the card.
This commit is contained in:
Konstantina Galouni 2023-11-08 22:40:04 +02:00
parent 32a34d5a12
commit 68c352d3d2
6 changed files with 73 additions and 57 deletions

View File

@ -19,7 +19,7 @@
<li *ngFor="let result of results">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true" deposit="true">
[isCard]="true" deposit="true" [isMobile]="isMobile">
</result-preview>
</li>
</ul>

View File

@ -19,6 +19,7 @@ export class SearchResultsInDepositComponent {
@Input() status: number;
@Input() type: string;
@Input() properties:EnvProperties;
@Input() isMobile: boolean = false;
public urlParam: string;

View File

@ -23,7 +23,7 @@
<div class = "uk-position-relative">
<div class = "uk-width-1-1">
<result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
[showSubjects]="true" [result]="result"
[isCard]="false">
</result-preview>
</div>

View File

@ -10,7 +10,7 @@
<ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[showSubjects]="true" [result]="getResultPreview(result)"
[isCard]="true">
</result-preview>
</li>

View File

@ -345,7 +345,8 @@
[status]="searchUtils.status"
[type]="entityType"
[zenodoInformation]="zenodoInformation"
[properties]=properties>
[properties]=properties
[isMobile]="mobile">
</deposit-result>
<orcid-result *ngIf="usedBy == 'orcid'"
[results]="results"

View File

@ -20,51 +20,65 @@
<div class="uk-margin-small-bottom">
<!-- Title -->
<div class="uk-grid">
<div class="multi-line-ellipsis lines-3 uk-width-expand">
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand" [class.uk-disabled]="result.id == '-1'">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
<div [ngClass]="result.websiteURL && promoteWebsiteURL && !isMobile ? 'uk-flex uk-flex-between uk-width-1-1' : 'uk-width-expand'">
<div *ngIf="result.websiteURL && promoteWebsiteURL" class="uk-flex uk-flex-right"
[ngClass]="isMobile ? 'uk-width-1-1 uk-margin-small-bottom' : 'uk-flex-last uk-margin-left uk-width-auto'">
<span>
<a href="{{result.websiteURL}}" target="_blank" type="submit"
class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
<icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
<span>Go to repository</span>
</span>
</a>
</span>
</div>
<div class="multi-line-ellipsis lines-3 uk-width-expand">
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand" [class.uk-disabled]="result.id == '-1'">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</a>
<a *ngIf="externalUrl && result.id" (click)="onClick()"
target="_blank" [href]="externalUrl+result.id"
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
<span *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</a>
<a *ngIf="externalUrl && result.id" (click)="onClick()"
target="_blank" [href]="externalUrl+result.id"
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
<span *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
<span *ngIf="!result.title && !result.acronym">
[no title available]
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</span>
<span *ngIf="!result.title && !result.acronym">
[no title available]
</span>
</a>
<div *ngIf="!result.id" class="uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</a>
<div *ngIf="!result.id" class="uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</div>
</h2>
</h2>
</div>
</div>
<div *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0" class="uk-hidden@m uk-width-auto">
<div class="uk-margin-small-bottom uk-flex uk-flex-middle"
@ -158,17 +172,17 @@
</div>
</div>
<!-- 5th section(deposit only) -->
<div>
<span *ngIf="result.websiteURL && promoteWebsiteURL" class="uk-flex uk-flex-right uk-margin-small-top">
<a href="{{result.websiteURL}}" target="_blank" type="submit"
class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
<span class="uk-flex uk-flex-middle">
<icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
<span>Go to repository</span>
</span>
</a>
</span>
</div>
<!-- <div>-->
<!-- <span *ngIf="result.websiteURL && promoteWebsiteURL" class="uk-flex uk-flex-right uk-margin-small-top">-->
<!-- <a href="{{result.websiteURL}}" target="_blank" type="submit"-->
<!-- class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">-->
<!-- <span class="uk-flex uk-flex-middle">-->
<!-- <icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>-->
<!-- <span>Go to repository</span>-->
<!-- </span>-->
<!-- </a>-->
<!-- </span>-->
<!-- </div>-->
</div>
</div>
<div *ngIf="(result.hostedBy_collectedFrom || hasActions || result.measure?.bip.length || result.measure?.counts.length) && !isDeletedByInferenceModal"