Bug 36337: Hiding lists with OpacPublic breaks styling for language list

This patch adjusts the CSS of elements in the OPAC header so that menu
items are correctly aligned with various combinations of the OpacPublic
and OpacLangSelectorMode system preferences.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

- View the header menu in the OPAC with these combinations of settings:
  - OpacPublic = On; OpacLangSelectorMode = Top;
  - OpacPublic = On; OpacLangSelectorMode = Footer;
  - OpacPublic = Off; OpacLangSelectorMode = Top;
  - OpacPublic = Off; OpacLangSelectorMode = Footer;
- With each configuration, test that the elements in the header (Logo,
  Cart/List menu, Language selctor, and user menu items) align
  correctly. The Cart/List menu items should always align to the left,
  the Language selector and user menu should aways align to the right.

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Owen Leonard 2024-06-26 11:53:21 +00:00 committed by Katrin Fischer
parent 8298e708b9
commit 64441c76bd
Signed by: kfischer
GPG key ID: 0EF6E2C03357A834
2 changed files with 23 additions and 2 deletions

View file

@ -843,7 +843,6 @@ button {
#logo {
background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
border: 0;
float: left !important;
margin: 0;
padding: 0;
width: 100px;
@ -865,6 +864,25 @@ button {
}
}
#header-region .navbar {
#logo {
flex-grow: 1;
flex-shrink: 0;
}
&:has( #cart-list-nav ) {
#logo {
flex-grow: 0;
flex-shrink: 1;
}
#cart-list-nav {
flex-grow: 1;
flex-shrink: 0;
}
}
}
#changelanguage {
background-color: #FFF;
border-top: 1px solid #EEE;

View file

@ -317,9 +317,12 @@ th {
margin: .2rem .2rem .2rem 0;
}
#header_langmenu {
flex-shrink: 1;
}
#members {
flex-shrink: 1;
justify-content: flex-end;
p {
color: #727272;