From fed5158d66abafbe482a3625fa010c160c82a529 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 11 Jun 2019 18:29:32 +0000 Subject: [PATCH] Bug 18084: Language selector hidden in user menu on mobile interfaces This patch updates templates and CSS so that the language-selection menu in the header will not be hidden if the browser width is too narrow. This patch also makes some more general improvements to the responsive adaptability of the header elements. 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). Test the changes by viewing pages in the OPAC and adjusting your browser width, paying attention to how elements in the top menu adapt to different sizes. Test under varying conditions: - Logged in/not loggeed user - Search history enabled and disabled - OpacLangSelectorMode showing menu in header or not - opacuserlogin enabled or disabled Signed-off-by: Katrin Fischer Signed-off-by: Martin Renvoize --- .../bootstrap/css/src/_responsive.scss | 54 ++------- .../opac-tmpl/bootstrap/css/src/opac.scss | 111 ++++++++++++++++-- .../en/includes/masthead-langmenu.inc | 58 ++++----- .../bootstrap/en/includes/masthead.inc | 82 ++++++++----- koha-tmpl/opac-tmpl/bootstrap/js/script.js | 19 +-- 5 files changed, 205 insertions(+), 119 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 4e387a29ad..6a718ce3d8 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -22,7 +22,7 @@ } #wrap { - padding: 0px; + padding: 0; } } @@ -271,40 +271,7 @@ } #members { - clear: both; - display: none; - - li { - border-bottom: 1px solid #555; - padding-right: 20px; - text-align: right; - - &:first-child { - border-top: 1px solid #555; - } - - &:last-child { - border-bottom: 0; - } - } - - .nav { - float: none; - - > li { - float: none; - } - &.pull-right { - float: none; - } - } - - .divider-vertical { - border: 0; - height: 0; - margin: 0; - } } } @@ -445,7 +412,9 @@ @media only screen and ( max-width: 800px ) { /* Screens below 800 pixels wide */ .cartlabel, - .listslabel { + .listslabel, + .langlabel, + .userlabel { display: none; } @@ -453,12 +422,6 @@ .divider-vertical { margin: 0 2px; } - - #members { - .divider-vertical { - margin: 0 9px; - } - } } .toolbar { @@ -587,3 +550,12 @@ min-width: 0; } } + +@media only screen and ( max-width: 1100px ) { + .cartlabel, + .listslabel, + .langlabel, + .userlabel { + display: none; + } +} \ No newline at end of file diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 3ada4df06f..5e324feaac 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -33,9 +33,11 @@ $footer-height: 45px; } } -.fa.fa-icon-black, -.fa.fa-icon-white { - color: #000; +.fa { + &.fa-icon-black, + &.fa-icon-white { + color: #000; + } } .popup { @@ -84,6 +86,7 @@ a { &.login-link { color: #005580; font-weight: bold; + &.loginModal-trigger { color: #85ca11; } @@ -268,9 +271,9 @@ a { } h1 { + color: #727272; font-size: 140%; line-height: 150%; - color: #727272; &#libraryname { background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%; @@ -311,8 +314,8 @@ h4 { } h5 { - font-size: 100%; color: #727272; + font-size: 100%; } caption { @@ -333,9 +336,9 @@ textarea { } legend { + color: #727272; font-size: 110%; font-weight: bold; - color: #727272; } table { @@ -383,7 +386,7 @@ th { text-align: right; } - &[scope=row] { + &[scope="row"] { background-color: transparent; text-align: right; } @@ -414,6 +417,69 @@ th { } } +.dropdown-menu-right { + left: auto; + right: 0; +} + +.navbar { + .nav { + margin-right: 0; + + & > li { + & > a { + color: #777777; + float: none; + padding: 10px 15px 10px; + text-decoration: none; + text-shadow: 0 1px 0 #FFFFFF; + } + + & > .dropdown-menu { + &.dropdown-menu-right { + &::after { + left: unset; + right: 10px; + } + + &::before { + left: unset; + right: 9px; + } + } + } + } + } +} + +.navbar-inverse { + .navbar-inner { + #members { + ul { + &.dropdown-menu { + a { + &:hover { + color: #005580; + text-decoration: underline; + + &.logout { + &:hover { + color: #E8583C; + } + } + } + } + } + } + + .divider-vertical { + border-left-color: #CCC; + border-right-color: #FCF9FC; + margin: 0 5px; + } + } + } +} #members { display: block; @@ -426,9 +492,35 @@ th { &.logout { color: #E8583C; font-weight: bold; - padding: 0 .3em; + + &:hover { + color: #E8583C; + } } } + + .search_history { + a { + display: inline-block; + padding: 10px 0; + + &.logout { + font-size: 80%; + font-weight: normal; + } + } + + .divider-vertical { + border-left-color: #CCC; + border-right-color: #FCF9FC; + margin: 0 5px; + } + } +} + +#loggedinuser-menu { + min-width: 300px; + padding: .5em 1em; } #moresearches { @@ -2165,8 +2257,7 @@ input { #cartDetails, #cartUpdate, -#holdDetails, -#listsDetails { +#holdDetails { background-color: #FFF; border: 1px solid rgba( 0, 0, 0, .2 ); border-radius: 6px; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc index 7671e6dd81..17b16baada 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc @@ -1,31 +1,35 @@ [%# Following on one line for translatability %] [% IF ( ( opaclanguagesdisplay ) && ( ! one_language_enabled ) && ( languages_loop ) && ( OpacLangSelectorMode == 'both' || OpacLangSelectorMode == 'top') ) %] -
  • - Languages - + [% END # / IF opaclanguagedisplay %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index a1ca8fc568..c61938a205 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -80,44 +80,70 @@
    • [% END # / IF virtualshelves %] - [% IF Koha.Preference( 'virtualshelves' ) == 1 %]
    [% END %] - [% IF Koha.Preference( 'opacuserlogin' ) == 1 || opaclanguagesdisplay || EnableOpacSearchHistory %] - -
    -
      - [% INCLUDE 'masthead-langmenu.inc' %] + [% IF Koha.Preference( 'opacuserlogin' ) == 1 || Koha.Preference( 'EnableOpacSearchHistory') || Koha.Preference( 'opaclanguagesdisplay' ) %] - [% IF Koha.Preference( 'opacuserlogin' ) == 1 %] - [% UNLESS ( loggedinusername ) %] - [% IF Koha.Preference('casAuthentication') %] - [%# CAS authentication is too complicated for modal window %] -
      • - [% ELSIF ( Koha.Preference('GoogleOpenIDConnect') == 1 ) %] -
      • +
      + [% IF ( Koha.Preference( 'opaclanguagesdisplay' ) ) %] + [% INCLUDE 'masthead-langmenu.inc' %] + [% END %] +
      - [% END # IF opacuserlogin %] + [% END # IF opacuserlogin || EnableOpacSearchHistory || opaclanguagesdisplay %] +
    diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js index a331f69616..30d792f448 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/script.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/script.js @@ -1,3 +1,4 @@ +/* global enquire readCookie updateBasket delCookie */ enquire.register("screen and (max-width:608px)", { match : function() { $("#masthead_search").insertAfter("#select_library"); @@ -58,23 +59,15 @@ $(document).ready(function(){ return true; } }); - $("#user-menu-trigger").on("click",function(){ - var mem = $("#members"); - if(mem.is(":hidden")){ - mem.show(); - } else { - mem.removeAttr("style"); - } + + $(".menu-collapse-toggle").on("click",function(e){ + e.preventDefault(); + $(this).toggleClass("menu-open"); + $(".menu-collapse").toggle(); }); $(".loginModal-trigger").on("click",function(e){ e.preventDefault(); $("#loginModal").modal("show"); - $("#members").removeAttr("style"); - }); - $("#loginModal").on("hide",function(){ - if($("#user-menu-trigger").is(":hidden")){ - $("#members").removeAttr("style"); - } }); }); \ No newline at end of file -- 2.39.5