From 6693c7ad3fad48eba459ab50747bb5410919eecb 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 | 81 +++++++++------ koha-tmpl/opac-tmpl/bootstrap/js/script.js | 15 +-- 5 files changed, 199 insertions(+), 120 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index b27de10..e7df34e 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; } } @@ -261,40 +261,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; - } } } @@ -438,7 +405,9 @@ @media only screen and ( max-width: 800px ) { /* Screens below 800 pixels wide */ .cartlabel, - .listslabel { + .listslabel, + .langlabel, + .userlabel { display: none; } @@ -446,12 +415,6 @@ .divider-vertical { margin: 0 2px; } - - #members { - .divider-vertical { - margin: 0 9px; - } - } } } @@ -528,3 +491,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 29fc16c..c239a08 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -25,9 +25,11 @@ $footer-height: 45px; } } -.fa.fa-icon-black, -.fa.fa-icon-white { - color: #000; +.fa { + &.fa-icon-black, + &.fa-icon-white { + color: #000; + } } .popup { @@ -76,6 +78,7 @@ a { &.login-link { color: #005580; font-weight: bold; + &.loginModal-trigger { color: #85ca11; } @@ -254,9 +257,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%; @@ -297,8 +300,8 @@ h4 { } h5 { - font-size: 100%; color: #727272; + font-size: 100%; } caption { @@ -319,9 +322,9 @@ textarea { } legend { + color: #727272; font-size: 110%; font-weight: bold; - color: #727272; } table { @@ -363,7 +366,7 @@ th { text-align: right; } - &[scope=row] { + &[scope="row"] { background-color: transparent; text-align: right; } @@ -394,6 +397,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; @@ -406,9 +472,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 { @@ -2129,8 +2221,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 7671e6d..17b16ba 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 de8401b..12c17b1 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"); @@ -40,14 +41,6 @@ $(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"); @@ -56,11 +49,5 @@ $(document).ready(function(){ $(".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.1.4