Attachment 83770 Details for Bug 22045 – Bug 22045: Cataloging UX enhancement - Improve access to tabs

[patch] Bug 22045: Cataloging UX enhancement - Improve access to tabs

Bug-22045-Cataloging-UX-enhancement---Improve-acce.patch (text/plain), 9.10 KB, created by Owen Leonard on 2019-01-10 15:16:19 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2019-01-10 15:16:19 UTC

Size: 9.10 KB

patch

obsolete

>From 5e23db791d9efa2726ac13d68396f7b11013cfc2 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 10 Jan 2019 13:07:10 +0000
>Subject: [PATCH] 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.
>---
> koha-tmpl/intranet-tmpl/prog/css/addbiblio.css     | 109 +++++++++++++++++++--
> .../intranet-tmpl/prog/css/src/staff-global.scss   |   1 +
> .../prog/en/modules/cataloguing/addbiblio.tt       |  55 +++++++++--
> 3 files changed, 148 insertions(+), 17 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>index 5670a23..e7b3b14 100644
>--- 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 571d4a2..a0282b7 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -1636,6 +1636,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 41326ab..f2a1596 100644
>--- 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 %]
> 
>@@ -450,7 +472,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();
>@@ -552,7 +574,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 %]" href="#tab[% BIG_LOO.number %]XX">[% tabname %]</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 %] [% tab_selected %]"><a class="tag_anchor" id="tag_anchor_[% innerloo.tag %]_[% innerloo.index %][% innerloo.random %]" title="tag_anchor_[% innerloo.tag %]_[% innerloo.index %][% innerloo.random %]" href="#div_indicator_tag_[% innerloo.tag %]_[% innerloo.index %][% innerloo.random %]">[% innerloo.tag %]</a></li>
>+                    [% END %]
>+                [% END %]
>+            [% END %]
>+        </ul>
>+    </div>
>+</div> 
> 
> [% IF bib_doesnt_exist %]
>     <div class="dialog alert">
>@@ -578,11 +615,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>
>-- 
>2.1.4

Actions: View | Diff | Splinter Review

Attachments on bug 22045: 83473 | 83770 | 84728 | 84896 | 84984 | 84985 | 84986 | 84993 | 84994 | 84995 | 84996 | 84997 | 84998 | 85567 | 85578 | 85579 | 85580 | 85581 | 85582 | 85583 | 85584 | 85585