gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Jake Deery 2025-05-29 14:21:28 +01:00 committed by Lucas Gass
parent 7668bf1ed5
commit 3da91c5152
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
4 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
View File

@ -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 {

13
koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
View File

@ -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,

2
koha-tmpl/opac-tmpl/bootstrap/css/src/_variables.scss
View File

@ -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;

11
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View File

@ -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 {