From 87577129058c9e3fa35d7dba03cc9f1d1f7b5d9f Mon Sep 17 00:00:00 2001 From: Jesiel Viana Date: Tue, 6 May 2025 14:21:18 -0300 Subject: [PATCH] Fix: Improve footer responsiveness and download button on the full item page (#4218) * fix: footer and download button responsiveness * Revert styling changes to the download button on the simple item page * fix: for restrict bitstrream show only lock icon * ix: display download icon consistently across all item pages * fix embargo label responsiveness * Recommit without json5 changes * Recommit without json5 changes * Recommit without json5 changes --- src/app/footer/footer.component.html | 8 +- src/app/footer/footer.component.scss | 11 +- .../full-file-section.component.html | 168 ++++++++++-------- .../file-download-link.component.html | 20 ++- .../file-download-link.component.scss | 4 + .../file-download-link.component.ts | 16 +- .../themed-file-download-link.component.ts | 3 + .../access-status-badge.component.html | 2 +- .../access-status-badge.component.scss | 4 +- src/app/thumbnail/thumbnail.component.html | 33 ++-- src/assets/i18n/en.json5 | 2 + 11 files changed, 170 insertions(+), 101 deletions(-) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index 1a995aaf01..8ad9ab643e 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -49,8 +49,8 @@ -
-
+
+

{{ 'footer.link.dspace' | translate}} @@ -85,7 +85,7 @@

@if (coarLdnEnabled$ | async) { -
+
{{ 'footer.link.coar-notify-support' | translate }} @@ -94,4 +94,4 @@ }
- + \ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 7b6c6ae239..9381d7378f 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -23,9 +23,8 @@ .bottom-footer { .notify-enabled { - position: absolute; - bottom: 4px; - right: 0; + position: relative; + margin-top: 4px; .coar-notify-support-route { padding: 0 calc(var(--bs-spacer) / 2); @@ -37,7 +36,11 @@ margin-bottom: 8.5px; } - margin-top: 20px; + @media screen and (min-width: map-get($grid-breakpoints, md)) { + position: absolute; + bottom: 4px; + right: 0; + } } ul { li { diff --git a/src/app/item-page/full/field-components/file-section/full-file-section.component.html b/src/app/item-page/full/field-components/file-section/full-file-section.component.html index b04d636a13..0d7a0ef6da 100644 --- a/src/app/item-page/full/field-components/file-section/full-file-section.component.html +++ b/src/app/item-page/full/field-components/file-section/full-file-section.component.html @@ -1,84 +1,108 @@
@if (hasValuesInBundle(originals)) { -
-

{{"item.page.filesection.original.bundle" | translate}}

- @if (originals?.page?.length > 0) { - - @for (file of originals?.page; track file) { -
-
- -
-
-
-
{{"item.page.filesection.name" | translate}}
-
{{ dsoNameService.getName(file) }}
-
{{"item.page.filesection.size" | translate}}
-
{{(file.sizeBytes) | dsFileSize }}
-
{{"item.page.filesection.format" | translate}}
-
{{(file.format | async)?.payload?.description}}
- @if (file.hasMetadata('dc.description')) { -
{{"item.page.filesection.description" | translate}}
-
{{file.firstMetadataValue("dc.description")}}
- } -
-
-
- - {{"item.page.filesection.download" | translate}} - -
-
- } - +
+

+ {{ "item.page.filesection.original.bundle" | translate }} +

+ @if (originals?.page?.length > 0) { + + @for (file of originals?.page; track file) { +
+
+ +
+
+
+
+ {{ "item.page.filesection.name" | translate }} +
+
{{ dsoNameService.getName(file) }}
+
+ {{ "item.page.filesection.size" | translate }} +
+
{{ file.sizeBytes | dsFileSize }}
+
+ {{ "item.page.filesection.format" | translate }} +
+
+ {{ (file.format | async)?.payload?.description }} +
+ @if (file.hasMetadata('dc.description')) { +
+ {{ "item.page.filesection.description" | translate }} +
+
+ {{ file.firstMetadataValue("dc.description") }} +
+ } +
+
+
+ + + {{ "item.page.filesection.download" | translate }} + + +
+
} -
+ + } +
}
@if (hasValuesInBundle(licenses)) { -
-

{{"item.page.filesection.license.bundle" | translate}}

- @if (licenses?.page?.length > 0) { - - @for (file of licenses?.page; track file) { -
-
- -
-
-
-
{{"item.page.filesection.name" | translate}}
-
{{ dsoNameService.getName(file) }}
-
{{"item.page.filesection.size" | translate}}
-
{{(file.sizeBytes) | dsFileSize }}
-
{{"item.page.filesection.format" | translate}}
-
{{(file.format | async)?.payload?.description}}
-
{{"item.page.filesection.description" | translate}}
-
{{file.firstMetadataValue("dc.description")}}
-
-
-
- - {{"item.page.filesection.download" | translate}} - -
-
- } - +
+

+ {{ "item.page.filesection.license.bundle" | translate }} +

+ @if (licenses?.page?.length > 0) { + + @for (file of licenses?.page; track file) { +
+
+ +
+
+
+
+ {{ "item.page.filesection.name" | translate }} +
+
{{ dsoNameService.getName(file) }}
+
+ {{ "item.page.filesection.size" | translate }} +
+
{{ file.sizeBytes | dsFileSize }}
+
+ {{ "item.page.filesection.format" | translate }} +
+
+ {{ (file.format | async)?.payload?.description }} +
+
+ {{ "item.page.filesection.description" | translate }} +
+
+ {{ file.firstMetadataValue("dc.description") }} +
+
+
+
+ + + {{ "item.page.filesection.download" | translate }} + + +
+
} -
+ + } +
}
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html index bb9144ce99..422bb2ce3d 100644 --- a/src/app/shared/file-download-link/file-download-link.component.html +++ b/src/app/shared/file-download-link/file-download-link.component.html @@ -5,17 +5,29 @@ [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses" - [attr.aria-label]="('file-download-link.download' | translate) + dsoNameService.getName(bitstream)" + [attr.aria-label]="getDownloadLinkTitle(canDownload$ | async, canDownloadWithToken$ | async, dsoNameService.getName(bitstream))" + [title]="getDownloadLinkTitle(canDownload$ | async, canDownloadWithToken$ | async, dsoNameService.getName(bitstream))" role="link" tabindex="0"> @if ((canDownload$ | async) === false && (canDownloadWithToken$ | async) === false) { - + + + } @else if ((canDownloadWithToken$ | async) && (canDownload$ | async) === false) { - + + + + } @else if (showIcon) { + } - diff --git a/src/app/shared/file-download-link/file-download-link.component.scss b/src/app/shared/file-download-link/file-download-link.component.scss index 4b18747a95..06b448f96c 100644 --- a/src/app/shared/file-download-link/file-download-link.component.scss +++ b/src/app/shared/file-download-link/file-download-link.component.scss @@ -1,3 +1,7 @@ .request-a-copy-access-icon { color: var(--bs-success); } + +.btn-download{ + width: fit-content; +} diff --git a/src/app/shared/file-download-link/file-download-link.component.ts b/src/app/shared/file-download-link/file-download-link.component.ts index 7eb2392b07..09e03f8dac 100644 --- a/src/app/shared/file-download-link/file-download-link.component.ts +++ b/src/app/shared/file-download-link/file-download-link.component.ts @@ -12,7 +12,10 @@ import { ActivatedRoute, RouterLink, } from '@angular/router'; -import { TranslateModule } from '@ngx-translate/core'; +import { + TranslateModule, + TranslateService, +} from '@ngx-translate/core'; import { combineLatest as observableCombineLatest, Observable, @@ -75,6 +78,11 @@ export class FileDownloadLinkComponent implements OnInit { */ @Input() showAccessStatusBadge = true; + /** + * A boolean indicating whether the download icon should be displayed. + */ + @Input() showIcon = false; + itemRequest: ItemRequest; bitstreamPath$: Observable<{ @@ -90,6 +98,7 @@ export class FileDownloadLinkComponent implements OnInit { private authorizationService: AuthorizationDataService, public dsoNameService: DSONameService, private route: ActivatedRoute, + private translateService: TranslateService, ) { } @@ -153,4 +162,9 @@ export class FileDownloadLinkComponent implements OnInit { queryParams: {}, }; } + + getDownloadLinkTitle(canDownload: boolean,canDownloadWithToken: boolean, bitstreamName: string): string { + return (canDownload || canDownloadWithToken ? this.translateService.instant('file-download-link.download') : + this.translateService.instant('file-download-link.request-copy')) + bitstreamName; + } } diff --git a/src/app/shared/file-download-link/themed-file-download-link.component.ts b/src/app/shared/file-download-link/themed-file-download-link.component.ts index 1b5def4012..52add33069 100644 --- a/src/app/shared/file-download-link/themed-file-download-link.component.ts +++ b/src/app/shared/file-download-link/themed-file-download-link.component.ts @@ -29,6 +29,8 @@ export class ThemedFileDownloadLinkComponent extends ThemedComponent{{ accessStatus.status | translate: {date: accessStatus.date} }} + {{ accessStatus.status | translate: {date: accessStatus.date} }} } } diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.scss b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.scss index 8b13789179..bcf09e5ecc 100644 --- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.scss +++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.scss @@ -1 +1,3 @@ - +span{ + white-space: normal; +} diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html index de569270e0..c3e9087f27 100644 --- a/src/app/thumbnail/thumbnail.component.html +++ b/src/app/thumbnail/thumbnail.component.html @@ -1,25 +1,30 @@
@if (isLoading) { -
-
-
- -
+
+
+
+
+
} @if (src !== null) { - - } - @if (src === null && !isLoading) { -
-
-
- {{ placeholder | translate }} -
+ + } @if (src === null && !isLoading) { +
+
+
+ {{ placeholder | translate }}
+
}
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 16d56f9708..adbb540dc0 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -7061,4 +7061,6 @@ "embargo.listelement.badge": "Embargo until {{ date }}", "metadata-export-search.submit.error.limit-exceeded": "Only the first {{limit}} items will be exported", + + "file-download-link.request-copy": "Request a copy of ", }