Adjust the font size of the 'No thumbnails available' text.

[DanGastardelli]

References

• Fixes Accessibility Issue with zooming in on default thumbnail images. #3339, "No thumbnails available" text going outside the marked area.

Description

Resets the font size of the text that appears in place of thumbnails when there are no thumbnails, to prevent the text from going outside the marked thumbnail area.

Instructions for reviewers

The font size of the "No thumbnails available" text has been changed to 0.875rem at resolutions smaller than 992px and 0.4rem at very low resolutions.

List of changes in this PR:

• Resolution treatments were added starting at line 219
  "@media screen and (max-width: map-get($grid-breakpoints, sm)) {
  font-size: 0.4rem;
  padding: 0.1rem;
  }
  @media screen and (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, lg)) {
  font-size: 0.875rem;
  padding: 0.1rem;
  }"
  in the file "src/styles/_global-styles.scss".

**To test the change, simply install this frontend with a clean backend, make a submission and do not run the media filter, looking at the item without a thumbnail with the text "No thumbnails available". In this scenario, test by zooming in and out on the screen and see if the text will go outside the marked area or not.

Checklist

_This checklist provides a reminder of what we will look for when reviewing your PR. You do not need to complete this checklist before creating your PR (draft PRs are always welcome).

However, reviewers may ask you to complete any actions on this list if you have not already done so. If you are unsure about an item on the checklist, please don't hesitate to ask. We are here to help!_

• My PR is created against the main branch of code (unless it is a backport or a fix for a specific issue from an older branch).

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments and specs/tests), or I have provided reasons why this is not possible.

• My PR passes ESLint validation using npm run lint

• My PR introduces no circular dependencies (verified via npm run check-circ-deps)

• My PR includes TypeDoc comments for all new (or changed) public methods and classes. It also includes TypeDoc for large or complex private methods.

• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.

• My PR is aligned with the Accessibility Guidelines if it makes changes to the UI. - [ ] My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.

• My PR includes details on how to test it. I have provided clear instructions to reviewers on how to successfully test this fix or feature.

• If my PR includes new libraries/dependencies (in package.json), I have made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

• If my PR includes new features or configurations, I have provided basic technical documentation in the PR itself. - [ ] If my PR fixes an issue ticket, I link them.

[alisaismailati]

Hello @tdonohue , @DanGastardelli ,

I suggest considering that the "no thumbnail" placeholder font size rules are defined in https://github.com/DSpace/dspace-angular/blob/main/src/styles/_global-styles.scss#L179-L222 .

I would recommend using the mixin @include media-breakpoint instead of the media query, as the mixin provides a more concise and consistent way to handle breakpoints.

[DanGastardelli]

Hello @alisaismailati and @tdonohue!

I understood the requests and remade the changes. I tested it in several resolutions and it didn't break and I believe it is now applied in a better way.

I await your feedback,
Daniel Pais (Neki-it)