Bugzilla – Attachment 93369 Details for
Bug 18084
Language selector is hidden in user menu on mobile interfaces
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 18084: Language selector hidden in user menu on mobile interfaces
Bug-18084-Language-selector-hidden-in-user-menu-on.patch (text/plain), 23.68 KB, created by
Owen Leonard
on 2019-10-01 13:29:56 UTC
(
hide
)
Description:
Bug 18084: Language selector hidden in user menu on mobile interfaces
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2019-10-01 13:29:56 UTC
Size:
23.68 KB
patch
obsolete
>From 40348839a299fe0066e68c74be1d6c8f80376226 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >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') ) %] >-<li class="dropdown"> >- <a href="#" title="Switch languages" class="dropdown-toggle" id="langmenu" data-toggle="dropdown" role="button"><i class="fa fa-flag fa-icon-white"></i> <span class="langlabel">Languages</span> <b class="caret"></b></a> >- <ul aria-labelledby="langmenu" role="menu" class="dropdown-menu"> >- [% FOREACH languages_loo IN languages_loop %] >- [% IF ( languages_loo.group_enabled ) %] >- [% IF ( languages_loo.plural ) %] >- [% FOREACH sublanguages_loo IN languages_loo.sublanguages_loop %] >- [% IF ( sublanguages_loo.enabled ) %] >- [% IF ( sublanguages_loo.sublanguage_current ) %] >- <li role="presentation"> <a href="#" tabindex="-1" role="menuitem">[% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %] <i class="fa fa-check"></i></a></li> >+ <div id="header_langmenu" class="pull-left"> >+ <ul class="nav"> >+ <li class="dropdown"> >+ <a href="#" title="Switch languages" class="dropdown-toggle" id="langmenu" data-toggle="dropdown" role="button"><i class="fa fa-flag fa-icon-white"></i> <span class="langlabel">Languages</span> <b class="caret"></b></a> >+ <ul aria-labelledby="langmenu" role="menu" class="dropdown-menu dropdown-menu-right"> >+ [% FOREACH languages_loo IN languages_loop %] >+ [% IF ( languages_loo.group_enabled ) %] >+ [% IF ( languages_loo.plural ) %] >+ [% FOREACH sublanguages_loo IN languages_loo.sublanguages_loop %] >+ [% IF ( sublanguages_loo.enabled ) %] >+ [% IF ( sublanguages_loo.sublanguage_current ) %] >+ <li role="presentation"> <a href="#" tabindex="-1" role="menuitem">[% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %] <i class="fa fa-check"></i></a></li> >+ [% ELSE %] >+ <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% sublanguages_loo.rfc4646_subtag | uri %]" tabindex="-1" role="menuitem"> [% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %]</a></li> >+ [% END %] >+ [% END # / IF sublanguages_loo.enabled %] >+ [% END # / FOREACH sublanguages_loo %] > [% ELSE %] >- <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% sublanguages_loo.rfc4646_subtag | uri %]" tabindex="-1" role="menuitem"> [% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %]</a></li> >- [% END %] >- [% END # / IF sublanguages_loo.enabled %] >- [% END # / FOREACH sublanguages_loo %] >- [% ELSE %] >- [% IF ( languages_loo.group_enabled ) %] >- [% IF ( languages_loo.current ) %] >- <li role="presentation"><a href="#" tabindex="-1" class="menu-inactive" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description | html %][% ELSE %][% languages_loo.rfc4646_subtag | html %][% END %] <i class="fa fa-check"></i></a></li> >- [% ELSE %] >- <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% languages_loo.rfc4646_subtag | uri %]" tabindex="-1" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description | html %][% ELSE %][% languages_loo.rfc4646_subtag | html %][% END %]</a></li> >- [% END %] >- [% END # / IF languages_loo.current %] >- [% END # / IF ( languages_loo.plural ) %] >- [% END # / IF ( languages_loo.group_enabled ) %] >- [% END # / FOREACH languages_loo IN languages_loop %] >- </ul> <!-- /# .dropdown-menu --> >-</li> <!-- / .dropdown --> >+ [% IF ( languages_loo.group_enabled ) %] >+ [% IF ( languages_loo.current ) %] >+ <li role="presentation"><a href="#" tabindex="-1" class="menu-inactive" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description | html %][% ELSE %][% languages_loo.rfc4646_subtag | html %][% END %] <i class="fa fa-check"></i></a></li> >+ [% ELSE %] >+ <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% languages_loo.rfc4646_subtag | uri %]" tabindex="-1" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description | html %][% ELSE %][% languages_loo.rfc4646_subtag | html %][% END %]</a></li> >+ [% END %] >+ [% END # / IF languages_loo.current %] >+ [% END # / IF ( languages_loo.plural ) %] >+ [% END # / IF ( languages_loo.group_enabled ) %] >+ [% END # / FOREACH languages_loo IN languages_loop %] >+ </ul> <!-- /# .dropdown-menu --> >+ </li> <!-- / .dropdown --> >+ </ul> <!-- /.nav.pull-right --> >+ </div> <!-- /#header_langmenu --> > [% 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 a1ca8fc568b..c61938a205e 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 @@ > </li> <!-- / .dropdown --> > [% END # / IF virtualshelves %] > </ul> <!-- / .nav --> >- [% IF Koha.Preference( 'virtualshelves' ) == 1 %]<div id="listsDetails"></div>[% END %] >- [% IF Koha.Preference( 'opacuserlogin' ) == 1 || opaclanguagesdisplay || EnableOpacSearchHistory %] >- <a id="user-menu-trigger" class="pull-right" href="#"><i class="fa fa-user fa-icon-white"></i> <span class="caret"></span></a> >- <div id="members"> >- <ul class="nav pull-right"> > >- [% 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 %] >- <li><a class="login-link" href="/cgi-bin/koha/opac-user.pl">Log in to your account</a></li> >- [% ELSIF ( Koha.Preference('GoogleOpenIDConnect') == 1 ) %] >- <li><a class="login-link" href="/cgi-bin/koha/svc/auth/googleopenidconnect" role="button" data-toggle="modal">Log in to your account</a></li> >+ <div id="members" class="pull-right"> >+ [% IF ( Koha.Preference( 'opaclanguagesdisplay' ) ) %] >+ [% INCLUDE 'masthead-langmenu.inc' %] >+ [% END %] >+ <ul class="nav"> >+ <li class="dropdown"> >+ [% IF ( Koha.Preference( 'opacuserlogin' ) == 1 ) %] >+ [% IF ( loggedinusername ) %] >+ <a href="#" class="dropdown-toggle" id="user-menu" data-toggle="dropdown" role="button"> >+ <i class="fa fa-user fa-icon-white fa-fw"></i> >+ <span class="userlabel">Welcome, [% INCLUDE 'patron-title.inc' patron = logged_in_user no_html = 1 %]</span> >+ <b class="caret"></b> >+ </a> > [% ELSE %] >- <li><a href="/cgi-bin/koha/opac-user.pl" class="login-link loginModal-trigger" role="button" data-toggle="modal">Log in to your account</a></li> >+ [% IF Koha.Preference('casAuthentication') %] >+ [%# CAS authentication is too complicated for modal window %] >+ <a class="login-link" href="/cgi-bin/koha/opac-user.pl"><i class="fa fa-user fa-icon-white fa-fw"></i> <span class="userlabel">Log in to your account</span></a> >+ [% ELSIF ( Koha.Preference('GoogleOpenIDConnect') == 1 ) %] >+ <a class="login-link" href="/cgi-bin/koha/svc/auth/googleopenidconnect" role="button" data-toggle="modal"><i class="fa fa-user fa-icon-white fa-fw"></i> <span class="userlabel">Log in to your account</span></a> >+ [% ELSE %] >+ <a href="/cgi-bin/koha/opac-user.pl" class="login-link loginModal-trigger" role="button" data-toggle="modal"><i class="fa fa-user fa-icon-white fa-fw"></i> <span class="userlabel">Log in to your account</span></a> >+ [% END %] > [% END %] > [% END %] >- [% IF ( loggedinusername ) %] >- <li><p class="members navbar-text">Welcome, <a class="login-link" href="/cgi-bin/koha/opac-user.pl"><span class="loggedinusername" data-borrowernumber="[% logged_in_user.borrowernumber | html %]" data-branchcode="[% logged_in_user.branchcode | html %]" data-categorycode="[% logged_in_user.categorycode | html %]">[% INCLUDE 'patron-title.inc' patron = logged_in_user no_html = 1 %]</span></a></p></li> >- <li class="divider-vertical"></li> >+ >+ [% IF ( Koha.Preference( 'opacuserlogin' ) == 1 && loggedinusername ) %] >+ <ul aria-labelledby="user-menu" role="menu" class="dropdown-menu dropdown-menu-right"> >+ <li role="presentation"> >+ <div id="loggedinuser-menu"> >+ <p> >+ <a class="login-link" href="/cgi-bin/koha/opac-user.pl"><span class="loggedinusername" data-borrowernumber="[% logged_in_user.borrowernumber | html %]" data-branchcode="[% logged_in_user.branchcode | html %]" >Your account</span></a> >+ </p> >+ [% IF Koha.Preference( 'EnableOpacSearchHistory' ) %] >+ <p class="search_history"> >+ <a tabindex="-1" role="menuitem" class="login-link" href="/cgi-bin/koha/opac-search-history.pl" title="View your search history">Search history</a> >+ <span class="divider-vertical"></span> >+ <a class="logout clearsh" href="/cgi-bin/koha/opac-search-history.pl?action=delete" title="Delete your search history"><i class="fa fa-trash"></i> Clear</a> >+ </p> >+ [% END %] >+ <p> >+ <a tabindex="-1" role="menuitem" class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1"> >+ Log out</a> >+ </p> >+ </div> >+ </li> >+ </ul> > [% END %] >- [% END %] >- [% IF EnableOpacSearchHistory %] >- <li><p class="navbar-text"><a class="login-link" href="/cgi-bin/koha/opac-search-history.pl" title="View your search history">Search history</a> [<a class="logout clearsh" href="/cgi-bin/koha/opac-search-history.pl?action=delete" title="Delete your search history">x</a>]</p></li> >- <li class="divider-vertical"></li> >- [% END %] >- [% IF Koha.Preference( 'opacuserlogin' ) == 1 %] >- [% IF ( loggedinusername ) %] >- <li><p class="navbar-text"> >- <a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1"> >- Log out</a></p></li> >+ </li> >+ [% IF ( !Koha.Preference( 'opacuserlogin') || !loggedinusername ) %] >+ [% IF Koha.Preference( 'EnableOpacSearchHistory' ) %] >+ <li class="search_history"> >+ <a href="/cgi-bin/koha/opac-search-history.pl" title="View your search history">Search history</a> >+ <span class="divider-vertical"></span> >+ <a class="logout clearsh" href="/cgi-bin/koha/opac-search-history.pl?action=delete" title="Delete your search history"><i class="fa fa-trash"></i> Clear</a> >+ </li> > [% END %] > [% END %] > </ul> > </div> <!-- /members --> >- [% END # IF opacuserlogin %] >+ [% END # IF opacuserlogin || EnableOpacSearchHistory || opaclanguagesdisplay %] >+ > </div> <!-- /container-fluid --> > </div> <!-- /navbar-inner --> > </div> <!-- /navbar --> >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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 18084
:
90578
|
93369
|
93374
|
93492
|
93819