[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"> <li *ngFor="let result of results">
<result-preview [properties]="properties" [showOrganizations]="true" <result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true" [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true" deposit="true"> [isCard]="true" deposit="true" [isMobile]="isMobile">
</result-preview> </result-preview>
</li> </li>
</ul> </ul>

View File

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

View File

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

View File

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

View File

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

View File

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