Bug 19851: Improve responsive layout handling of staff client menu bar

This patch modifies CSS and markup in the staff client header to
override the default responsive style of the menu bar. The changed
layout will keep the menu bar items in a horizontal line at lower screen
widths.

To test, apply the patch and clear your browser cache if necessary.

 - Log in to the staff client and confirm that the appearance of the
   menu bar at the top of the screen looks correct at various browser
   widths.
 - Confirm that the logged-in user menu label and help link expand and
   collapse according to browser width.

Signed-off-by: Dominic Pichette <dominic.pichette@inlibro.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index 9a18b09..515c4e3 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -3137,3 +3137,74 @@ fieldset.rows + fieldset.action {
 table#ill-requests {
     width: 100% !important;
 }
+
+#helper span {
+    display: none;
+}
+
+#logged-in-info-full {
+    display: none;
+}
+
+.loggedin-menu-label {
+    color: #777;
+    font-size: 12px;
+    line-height: 1.42857143;
+    padding: 4px 12px;
+    white-space: nowrap;
+}
+
+.loggedin-menu-label.divider {
+    padding: 0;
+}
+
+.loggedin-menu-label span {
+    color: #000;
+    font-weight: bold;
+}
+
+@media (min-width: 200px) {
+    .navbar-nav > li {
+        float: left;
+    }
+    .navbar-right {
+        float: right !important;
+        margin-right: -15px;
+    }
+    .navbar-nav {
+        float: left;
+        margin: 0;
+    }
+
+    .navbar-nav .open .dropdown-menu {
+        position: absolute;
+        float: left;
+        left: auto;
+        right: 0;
+        width: auto;
+        background-color: #fff;
+        border: 1px solid rgba(0,0,0,0.15);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+    }
+}
+
+@media (min-width: 800px) {
+    #helper span {
+        display: inline;
+    }
+
+    #helper i {
+        display: none;
+    }
+
+    #logged-in-info-full {
+        display: inline;
+    }
+
+    #logged-in-info-brief {
+        display: none;
+    }
+    .loggedin-menu-label {
+        display: none;
+    }
+}
\ No newline at end of file

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
index 48484f6..91402eb 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
@@ -2,7 +2,7 @@
 [% USE String %]
 [% PROCESS 'html_helpers.inc' %]
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 [%# Prevent XFS attacks -%]
 [% UNLESS popup %]
     <style id="antiClickjack">body{display:none !important;}</style>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
index 7573ac2..4f3d579 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
@@ -12,7 +12,9 @@
                 </ul>
             </li>
             [% IF ( intranetbookbag ) %]
-            <li><a href="#" id="cartmenulink">Cart<span id="basketcount"></span></a></li>
+                <li>
+                    <a href="#" id="cartmenulink">Cart<span id="basketcount"></span></a>
+                </li>
             [% END %]
             [% IntranetNav %]
             <li class="dropdown">
@@ -20,54 +22,81 @@
                 <ul class="dropdown-menu">
                     <li><a href="/cgi-bin/koha/virtualshelves/shelves.pl">Lists</a></li>
                     [% IF ( CAN_user_editcatalogue_edit_catalogue || CAN_user_editcatalogue_edit_items ) %]
-                    <li><a href="/cgi-bin/koha/cataloguing/addbooks.pl">Cataloging</a></li>
+                        <li><a href="/cgi-bin/koha/cataloguing/addbooks.pl">Cataloging</a></li>
                     [% END %]
                     [% IF ( CAN_user_acquisition ) %]
-                    <li><a href="/cgi-bin/koha/acqui/acqui-home.pl">Acquisitions</a></li>
+                        <li><a href="/cgi-bin/koha/acqui/acqui-home.pl">Acquisitions</a></li>
                     [% END %]
                     <li><a href="/cgi-bin/koha/authorities/authorities-home.pl">Authorities</a></li>
                     [% IF ( CAN_user_serials ) %]
-                    <li><a href="/cgi-bin/koha/serials/serials-home.pl">Serials</a></li>
+                        <li><a href="/cgi-bin/koha/serials/serials-home.pl">Serials</a></li>
                     [% END %]
                     [% IF ( UseCourseReserves ) %]
-                    <li><a href="/cgi-bin/koha/course_reserves/course-reserves.pl">Course reserves</a></li>
+                        <li><a href="/cgi-bin/koha/course_reserves/course-reserves.pl">Course reserves</a></li>
                     [% END %]
                     [% IF ( CAN_user_reports ) %]
-                    <li><a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a></li>
+                        <li><a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a></li>
                     [% END %]
                     [% IF ( CAN_user_tools ) %]
-                    <li><a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a></li>
+                        <li><a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a></li>
                     [% END %]
                     [% IF ( CAN_user_parameters ) %]
-                    <li><a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a></li>
+                        <li><a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a></li>
                     [% END %]
                     <li><a href="/cgi-bin/koha/about.pl">About Koha</a></li>
                 </ul>
             </li>
         </ul>
-        <ul class="nav navbar-nav pull-right">
+        <ul class="nav navbar-nav navbar-right">
             [% IF ( loggedinusername ) %]
             <li class="dropdown">
                 <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">
-                    <span class="loggedinusername">[% loggedinusername %]</span>
-                    <span class="separator">|</span>
-                    [% IF ( AutoLocation ) %]
-                    <brand>
-                        [% LoginBranchname %]
-                    </brand>
-                    [% ELSE %]
-                    <strong>
-                    [% IF ( LoginBranchname == 'NO_LIBRARY_SET' ) %]
-                        NO LIBRARY SET
-                    [% ELSE %]
-                        <span id="logged-in-branch-name">[% LoginBranchname %]</span>
-                        <span id="logged-in-branch-code" class="content_hidden">[% Branches.GetLoggedInBranchcode %]</span>
-                    [% END %]
-                    </strong>
-                    [% END %]
+                    <span id="logged-in-info-brief">
+                        <i class="fa fa-user"></i>
+                    </span>
+                    <span id="logged-in-info-full">
+                        <span class="loggedinusername">[% loggedinusername %]</span>
+                        <span class="separator">|</span>
+                        [% IF ( AutoLocation ) %]
+                            <brand>
+                                [% LoginBranchname %]
+                            </brand>
+                        [% ELSE %]
+                            <strong>
+                                [% IF ( LoginBranchname == 'NO_LIBRARY_SET' ) %]
+                                    NO LIBRARY SET
+                                [% ELSE %]
+                                    <span id="logged-in-branch-name">[% LoginBranchname %]</span>
+                                    <span id="logged-in-branch-code" class="content_hidden">[% Branches.GetLoggedInBranchcode %]</span>
+                                [% END %]
+                            </strong>
+                        [% END %]
+                    </span>
                     <b class="caret"></b>
                 </a>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+
+                    <li class="loggedin-menu-label">
+                        Logged in as:<br />
+                        <span class="loggedinusername">[% loggedinusername %]</span>
+                    </li>
+                    <li class="loggedin-menu-label">
+                        [% IF ( AutoLocation ) %]
+                            <brand>
+                                [% LoginBranchname %]
+                            </brand>
+                        [% ELSE %]
+                            [% IF ( LoginBranchname == 'NO_LIBRARY_SET' ) %]
+                                NO LIBRARY SET
+                            [% ELSE %]
+                                Location: <br />
+                                <span id="logged-in-branch-name">[% LoginBranchname %]</span>
+                                <span id="logged-in-branch-code" class="content_hidden">[% Branches.GetLoggedInBranchcode %]</span>
+                            [% END %]
+                        [% END %]
+                    </li>
+
+                    <li role="separator" class="loggedin-menu-label divider"></li>
                     [% IF ( IndependentBranches ) %]
                         [% IF ( CAN_user_management || CAN_user_editcatalogue_edit_catalogue ) %]
                     <li>
@@ -99,14 +128,14 @@
             </li>
             [% INCLUDE 'langmenu-staff-top.inc' %]
             <li>
-                <a class="toplinks" href="/cgi-bin/koha/help.pl" id="helper">Help</a>
+                <a class="toplinks" href="/cgi-bin/koha/help.pl" id="helper"><i class="fa fa-question-circle"></i> <span>Help</span></a>
             </li>
             [% ELSE %]
             <li class="loggedout">
                 <span>
                     <a href="/cgi-bin/koha/mainpage.pl" id="login">Log in</a>
                     <span class="separator">|</span>
-                    <a class="toplinks" href="/cgi-bin/koha/help.pl" id="helper">Help</a>
+                    <a class="toplinks" href="/cgi-bin/koha/help.pl" id="helper"><i class="fa fa-question-circle"></i> <span>Help</span></a>
                 </span>
             </li>
             [% END %]