Bug 22045: Cataloging UX enhancement - Improve access to tabs

This patch makes style changes to the standard MARC editor with the goal
of both making it more responsive and making it easier to navigate among
tabs and tags.

Tabs are now part of the page's toolbar, which floats as the page
scrolls. In addition to the numbered tabs, there is also a section
showing in-page links to the MARC tags which are available on that page.

To test, apply the patch, regenerate the staff client CSS, and clear
your browser cache if necessary.

Open a blank or existing record in the standard cataloging editor. Test
the redesigned tabs, the floating toolbar, and the in-page tag links.
Confirm that everything works well at various browser widths.

Signed-off-by: Mikaël Olangcay Brisebois <mikael.olangcay-brisebois@inLibro.com>

Signed-off-by: John Doe <you@example.com>

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
index 5670a23..e7b3b14 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -1,10 +1,18 @@
-#addbibliotabs {
-       margin-top : 1em;
+form {
+    display: block;
 }
 
-#addbibliotabs .ui-tabs-panel {
-       float : left;
-    width: 100%;
+div#toolbar {
+    border: 0;
+}
+
+#addbibliotabs .ui-tabs-nav {
+    display: none;
+}
+
+.ui-tabs-panel h3 {
+    font-size: 140%;
+    margin: .3em 0;
 }
 
 .buttonPlus {
@@ -30,8 +38,10 @@ a.expandfield {
        padding : .2em 1.2em;
 }
 
-div.tag {
+.tag {
+    border-bottom: 2px solid #D5E6E9;
     clear: both;
+    padding: .7em 0;
 }
 
 div.subfield_line {
@@ -60,7 +70,7 @@ div.subfield_line label {
 }
 
 .tagnum {
-       font-size : 110%;
+       font-size : 130%;
        font-weight : bold;
        color : #000;
        padding : .1em .3em .1em 0;
@@ -76,6 +86,7 @@ a.tagnum {
 
 .subfield {
        color : #00698a;
+       float: left;
        width: 10em;
        text-align:right;
 }
@@ -91,8 +102,7 @@ a.tagnum {
 
 .input_marceditor {
        float:left;
-    min-width: 20em;
-    width: auto;
+       width:30em;
 }
 
 .indicator {
@@ -167,6 +177,87 @@ tbody tr.active td {
     width: 15em;
 }
 
+.ui-tabs .ui-tabs-panel {
+    border: 0;
+    padding: 0;
+}
+
+.toolbar-tabs-container {
+    margin: 3em -5px -5px -5px;
+}
+
+.toolbar-tabs {
+    background-color: #FFF;
+    clear: both;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-left: 0;
+}
+
+.toolbar-tabs li {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+    text-align: center;
+    margin-bottom: 0;
+}
+
+.toolbar-tabs li a {
+    border: 1px solid #EDF4F6;
+    border-left: 0;
+    border-right: 1px solid #EDF4F6;
+    display: block;
+    font-weight: bold;
+    padding: .3em 1.5em;
+    width: 100%;
+}
+
+.toolbar-tabs li.selected a {
+    background-color: #EDF4F6;
+    border-right: 1px solid #C3D6DB;
+    font-weight: bold;
+}
+
+.toolbar-tabs li.selected a:hover {
+    background-color: #EDF4F6;
+}
+
+.toolbar-tabs li a:hover {
+    background-color: #F4F8F9;
+}
+
+.toolbar-tabs li:last-child a {
+
+}
+
+.tag_anchors_list {
+    background-color: #FFF;
+    clear: both;
+    display: block;
+    font-size: 95%;
+    padding-left: 0;
+}
+
+.tag_anchor.selected {
+    font-weight: bold;
+}
+
+.tag_anchors {
+    display: none;
+    padding: .5em 0;
+}
+
+.tag_anchors a {
+    border-right: 1px solid #EDF4F6;
+    display: inline-block;
+    padding: 0 .4em;
+}
+
+.tag_anchors.tab_selected {
+    display: inline-block;
+}
 
 @media (min-width: 768px) {
     div.subfield_line label {

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 8ea5458..5eb6f5e 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -1660,6 +1660,7 @@ dd {
     &.floating {
         border-radius: 0;
         margin-top: 0;
+        z-index: 300;
     }
 }
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
index de2429b..a57f4f4 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
@@ -8,8 +8,7 @@
 [% Asset.js("js/cataloging.js") | $raw %]
 [% INCLUDE 'browser-strings.inc' %]
 [% Asset.js("js/browser.js") | $raw %]
-<script type="text/javascript">
-//<![CDATA[
+<script>
     var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
     browser.show();
 
@@ -30,11 +29,12 @@
 
         [% IF tab %]
           $('#addbibliotabs').selectTabByID("#[% tab | html %]");
+          console.log("[% tab %]");
         [% END %]
 
         Sticky = $("#toolbar");
         Sticky.hcSticky({
-            stickTo: ".main",
+            stickTo: "#f",
             stickyClass: "floating"
         });
 
@@ -134,6 +134,29 @@
             $("#frameworkcode").val( frameworkcode );
             Changefwk();
         });
+
+        $(".toolbar-tabs a").on("click",function(e){
+            e.preventDefault();
+            $(".toolbar-tabs li").removeClass("selected");
+            $(this).parent().addClass("selected");
+            var tabid = $(this).data("tabid");
+            $("#addbibliotabs").tabs( "option", "active", tabid );
+            $(".tag_anchors").removeClass("tab_selected").hide();
+            $(".tag_anchors_" + tabid ).addClass("tab_selected").show();
+        });
+
+        $(".tag_anchor").on("click", function(e){
+            e.preventDefault();
+            var toolbar_height = $("#toolbar").outerHeight();
+            $(".tag_anchor").removeClass("selected");
+            $(this).addClass("selected");
+            var link = this.href;
+            var linkid = link.substring( link.indexOf("#") + 1 );
+            var dest = $("#" + linkid );
+            var yoffset = dest.offset();
+            window.scrollTo( 0, yoffset.top - toolbar_height - 20 );
+        });
+
     });
 
 function redirect(dest){
@@ -394,7 +417,6 @@ function Changefwk() {
     f.submit();
 }
 
-//]]>
 </script>
 [% Asset.css("css/addbiblio.css") | $raw %]
 
@@ -447,7 +469,7 @@ function Changefwk() {
     [% END %]
 
 [% IF ( done ) %]
-    <script type="text/javascript">
+    <script>
         opener.document.forms['f'].biblionumber.value=[% biblionumber | html %];
         opener.document.forms['f'].title.value='[% title | html %]';
         window.close();
@@ -549,7 +571,22 @@ function Changefwk() {
             <a class="btn btn-default btn-sm" id="cancel" href="/cgi-bin/koha/cataloguing/addbooks.pl">Cancel</a>
         [% END %]
     [% END %]
-</div>
+    <div class="toolbar-tabs-container">
+        <ul class="toolbar-tabs">
+            [%- FOREACH BIG_LOO IN BIG_LOOP -%][%- SET tabname = BIG_LOO.number + 1 -%][% IF loop.first %]<li class="selected">[% ELSE %]<li>[% END %]<a data-tabid="[% BIG_LOO.number | html %]" href="#tab[% BIG_LOO.number | html %]XX">[% tabname | html %]</a></li>[%- END -%]
+        </ul>
+        <ul class="tag_anchors_list">
+            [% FOREACH BIG_LOO IN BIG_LOOP %]
+                [% IF loop.first %][% SET tab_selected = "tab_selected" %][% ELSE %][% SET tab_selected = "" %][% END %]
+                [% FOREACH innerloo IN BIG_LOO.innerloop %]
+                    [% IF ( innerloo.tag ) %]
+                        <li class="tag_anchors tag_anchors_[% BIG_LOO.number | html %] [% tab_selected | html %]"><a class="tag_anchor" id="tag_anchor_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]" title="tag_anchor_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]" href="#div_indicator_tag_[% innerloo.tag | uri %]_[% innerloo.index | uri %][% innerloo.random | uri %]">[% innerloo.tag | uri %]</a></li>
+                    [% END %]
+                [% END %]
+            [% END %]
+        </ul>
+    </div>
+</div> <!-- /#toolbar.btn-toolbar -->
 
 [% IF bib_doesnt_exist %]
     <div class="dialog alert">
@@ -575,11 +612,13 @@ function Changefwk() {
     </ul>
 
 [% FOREACH BIG_LOO IN BIG_LOOP %]
+    [% SET tabname = BIG_LOO.number + 1 %]
     <div id="tab[% BIG_LOO.number | html %]XX">
-    
+
+    <h3>Section [% tabname %]</h3>
     [% FOREACH innerloo IN BIG_LOO.innerloop %]
     [% IF ( innerloo.tag ) %]
-    <div class="tag" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+    <div class="tag clearfix" id="tag_[% innerloo.tag %]_[% innerloo.index %][% innerloo.random %]">
         <div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
             [% IF advancedMARCEditor %]
                 <a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to Expand this Tag" onclick="ExpandField('tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]'); return false;">[% innerloo.tag | html %]</a>