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 <katrin.fischer.83@web.de> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
parent
ec5a5d6e72
commit
fed5158d66
GPG key ID:
422B469130441A0F
5 changed files with 205 additions and 119 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 %]
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
[% IF Koha.Preference( 'opacuserlogin' ) == 1 || Koha.Preference( 'EnableOpacSearchHistory') || Koha.Preference( 'opaclanguagesdisplay' ) %]
|
||||
|
||||
<div id="members" class="pull-right">
|
||||
[% IF ( Koha.Preference( 'opaclanguagesdisplay' ) ) %]
|
||||
[% INCLUDE 'masthead-langmenu.inc' %]
|
||||
|
||||
[% 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>
|
||||
[% 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 -->
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue