From 40348839a299fe0066e68c74be1d6c8f80376226 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 --- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 54 +++------- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 111 +++++++++++++++++++-- .../bootstrap/en/includes/masthead-langmenu.inc | 58 ++++++----- .../opac-tmpl/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 4e387a29ad7..6a718ce3d8d 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 f2fea4ab62b..d5568b4f1cb 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; } @@ -262,9 +265,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%; @@ -305,8 +308,8 @@ h4 { } h5 { - font-size: 100%; color: #727272; + font-size: 100%; } caption { @@ -327,9 +330,9 @@ textarea { } legend { + color: #727272; font-size: 110%; font-weight: bold; - color: #727272; } table { @@ -377,7 +380,7 @@ th { text-align: right; } - &[scope=row] { + &[scope="row"] { background-color: transparent; text-align: right; } @@ -408,6 +411,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; @@ -420,9 +486,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 { @@ -2159,8 +2251,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 7671e6dd81f..17b16baada8 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') ) %] - [% END # / IF virtualshelves %] - [% IF Koha.Preference( 'virtualshelves' ) == 1 %]
[% END %] - [% IF Koha.Preference( 'opacuserlogin' ) == 1 || opaclanguagesdisplay || EnableOpacSearchHistory %] - -
-
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js index a331f696160..30d792f448f 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.11.0