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

[DanGastardelli]

References

• Fixes #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)

[DanGastardelli]

Hi @tdonohue!

I didn't get this same scenario, even with a width of 1020px, it wasn't breaking for me; but in tests on extremely small screens, below 300px, the text was still breaking. I believe that using such a low resolution is a very specific situation, but during the analysis I saw that there was a class without correct treatment, in this case the 'thumb-font-2' class. This class appears on the home page and that's why this behavior must be happening to you. I added the treatment in this scenario and now in any resolution the text breaks for me; I believe it should work in your scenario as well.

I await feedback, Daniel Pais (Neki-it)

[DanGastardelli]

Hi @tdonohue!

I was unable to achieve the same scenario as you in this resolution and I did not experience any breakage in other resolutions. However, I reduced the text to a size that is still comfortable in the scenario indicated on my machine and that can be corrected in this scenario indicated in the ticket and for others that have this same screen configuration.

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

[kshepherd]

I've tried this out and oddly, the md/lg views are the ones that seem to be displaying a font too small, while my sm view looks fine:

(Definitely an improvement though! Just wanted to share how it looks in my 3840x2160 display in various sizes)

[dspace-bot]

Successfully created backport PR for dspace-7_x:

• #4336

[dspace-bot]

Successfully created backport PR for dspace-8_x:

• #4337