- Issue created by @rhovland
- Merge request !75Issue #3475403 by rhovland: Media Library styling is broken → (Open) created by rhovland
- 🇩🇪Germany stefan.korn Jossgrund
I can confirm the issue and the MR is greatly helping to fix this.
I even think that the modal size and tab styling is okay now.
- 🇩🇪Germany stefan.korn Jossgrund
Okay, I think there have been some unrelated changes to CSS in the MR introduced by changing/updating the node packages.
I think, this should not be part of this issue, but in case it is needed be solved in a separate issue.
There were some really strange changes to the CSS like
--bs-primary-text-emphasis: rgb(5.2, 44, 101.2);This results from latest changes in SASS, see https://sass-lang.com/documentation/breaking-changes/color-functions/ and using 1.79.x for sass would require changes in handling colors. But this is surely out of scope for this issue. More a general build issue for bootstrap5 theme.
So imho the build process should be done with sass version 1.54.0 as current package-lock.json states.
I therefore did the build process with sass 1.54.0 and reverted changes that were introduced by building with newer sass version (1.79.1).
- 🇦🇺Australia jannakha Brisbane!
added screenshots of media screens which need fixes
- 🇦🇺Australia jannakha Brisbane!
Here's screenshots of the patch application:
Media - modal - mobile
- Grid on mobile requires appropriate spacing:
Media - modal
+ Edit/delete buttons are visible and keyboard accessible
+ Card style is applied
- Media card layout requires further fixes (alignment/spacing):
Media - table
No changes on the table layout:
Media - grid
+ card style applied
- spacing/alignment not applied
Media - Widget
+ Delete button is visible
- Visible outline is missing when buttons is in focus
- 🇩🇪Germany stefan.korn Jossgrund
added styling for media type tabs
screenshot:
- 🇦🇺Australia fenstrat Australia
This is looking good and fixes many issues with the media library styling, though I've not had a chance to test it extensively.
One note on the last changes from @stefan.korn with media type tab styling - I think other themes show the tabs as horizontal tabs? I'm not sure displaying them as buttons is a great choice?
- 🇩🇪Germany stefan.korn Jossgrund
@fenstrat: Thanks for your input.
Regarding the media type styling I was unsure. Claro uses vertical tabs:
Bootstrap provides this for vertical nav:
https://getbootstrap.com/docs/5.3/components/navs-tabs/#vertical
But imho this is looking a bit to "sleek", especially there is no visual hint regarding the active state. So I decided to use vertical pills, like shown at the end of this paragraph in the Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behaviorIt seems Bootstrap is currently not providing something exactly similar with its defaults to what Claro is using.
- 🇦🇺Australia fenstrat Australia
@stefan.korn right, looks like we're pretty limited in terms of OOTB solutions from Bootstrap.
Also, sorry for the confusion when I mentioned "horizontal tabs" in #17, I should have said vertical tabs.
So yeah, we could introduce our own vertical tabs, but given this might be the first time a use for them as come up, then it might not be worth the overhead. So I'd probably agree with your solution of going with the nav-pills as the least worst option.