Bugzilla – Attachment 183082 Details for
Bug 39475
WCAG 2.1: 1.4.10 - Content reflow - OPAC header menus
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39475: Fixed reflow issues in dropdown menus
Bug-39475-Fixed-reflow-issues-in-dropdown-menus.patch (text/plain), 4.34 KB, created by
David Nind
on 2025-06-06 20:13:34 UTC
(
hide
)
Description:
Bug 39475: Fixed reflow issues in dropdown menus
Filename:
MIME Type:
Creator:
David Nind
Created:
2025-06-06 20:13:34 UTC
Size:
4.34 KB
patch
obsolete
>From ce1c17786ce67c9d0d000b7b146a9cd41de6dc2f Mon Sep 17 00:00:00 2001 >From: Jake Deery <jake.deery@openfifth.co.uk> >Date: Thu, 29 May 2025 14:21:28 +0100 >Subject: [PATCH] Bug 39475: Fixed reflow issues in dropdown menus > >This patch aims to fix reflow issues present in dropdown menus, by specifying text-wrap behaviour, and by reducing line-height values in some places to make dropdown items more distinguishable from each other. > >To test: >a) log in to the opac >b) create a list with an excessively long name (I chose 'a list about New New New New New New New New New New New New New New New New York') >c) open the lists menu in the navbar, zoom in to 400% > -) notice how the title of the list rolls off the page > -) exit the dropdown menu >d) open the user menu in the navbar, zoom in to 400% > -) notice how the clear searches button has broken across two lines > -) zoom back to 100% >APPLY PATCH >e) repeat step c > -) notice how the title of the list now wraps at the designated width > -) zoom back to 100% > -) notice how the text is still wrapping, and the dropdown menu is no excessively wide >f) repeat step d > -) notice how the clear searches button now sits on its own line > -) zoom back to 100% > -) notice how the clear searches button returns to its usual location >g) check other dropdowns for clear bugs > -) places i could find were on opac-results and opac-details >SIGN OFF > >Signed-off-by: David Nind <david@davidnind.com> >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 9 +++++++-- > .../opac-tmpl/bootstrap/css/src/_responsive.scss | 13 +++++++++++++ > .../opac-tmpl/bootstrap/css/src/_variables.scss | 2 +- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 11 ++++++++--- > 4 files changed, 29 insertions(+), 6 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >index 0782aa0ad2..13dce351c7 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >@@ -1442,8 +1442,13 @@ button { > } > } > >-.dropdown-item:active { >- background-color: $links; >+.dropdown-item { >+ line-height: 1.2; >+ text-wrap: stable; >+ >+ &:active { >+ background-color: $links; >+ } > } > > #koha_url { >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >index c0eb207a7c..ec567fee4b 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >@@ -438,6 +438,15 @@ > } > } > >+ #loggedinuser-menu { >+ .divider-vertical { >+ display: inline; >+ border: 1px solid #EEE; >+ border-right-color: #FCF9FC; >+ margin: 5px 2px; >+ } >+ } >+ > #didyoumean { > margin: .5em 0; > } >@@ -458,6 +467,10 @@ > } > } > >+ .dropdown-menu { >+ min-width: calc( var( --bs-dropdown-min-width ) + 4rem ); >+ } >+ > a { > &.menu-collapse-toggle { > &:link, >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss >index a13d77991c..7e86e1a566 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss >@@ -1209,7 +1209,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color; > // Dropdown menu container and contents. > > // scss-docs-start dropdown-variables >-$dropdown-min-width: 10rem; >+$dropdown-min-width: 12rem; // 10rem; > $dropdown-padding-x: 0; > $dropdown-padding-y: .5rem; > $dropdown-spacer: .125rem; >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 5f182f644a..e00745fc32 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -368,11 +368,13 @@ th { > } > > #loggedinuser-menu { >- min-width: 300px; >+ line-height: 1.2; > padding: .5em 1em; > > .divider-vertical { >- margin: 5px 5px; >+ display: block; >+ border: none; >+ margin: 0; > } > } > >@@ -1103,7 +1105,10 @@ fieldset { > a:hover, > button { > font-size: .9rem; >- white-space: nowrap; >+ >+ &:not(.dropdown-item) { >+ white-space: nowrap; >+ } > } > > label { >-- >2.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39475
:
182897
|
183082
|
183083
|
183410