Bug 21306: Update two-column templates with Bootstrap grid: Tags
authorOwen Leonard <oleonard@myacpl.org>
Mon, 7 May 2018 14:45:25 +0000 (14:45 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Sun, 16 Sep 2018 00:13:14 +0000 (00:13 +0000)
This patch modifies the tags management templates to use the
Bootstrap grid instead of YUI.

This patch also removes obsolete "text/javascript" attributes from
<script> tags and "text/css" attributes from <style> tags in the
modified templates.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths:

 - Tools -> Tags
   - View list of tags
   - Click tag to view the list of titles tagged with that term

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
koha-tmpl/intranet-tmpl/prog/en/modules/tags/list.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt

index 648a846..94f9afe 100644 (file)
@@ -5,7 +5,7 @@
 <title>Koha &rsaquo; Tools &rsaquo; Tags &rsaquo; [% IF ( do_it ) %]Review &rsaquo; [% ELSE %]Review tags[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.css("css/datatables.css") | $raw %]
-<style type="text/css">
+<style>
 tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent; }</style>
 </head>
 
@@ -15,10 +15,11 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; <a href="/cgi-bin/koha/tags/review.pl">Tags</a> &rsaquo; Results for tag <i>[% tag | html %]</i></div>
 
-<div id="doc3" class="yui-t2">
- <div id="bd">
-  <div id="yui-main">
-  <div class="yui-b">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+
 [% IF ( titles ) %]
 <h3>Titles tagged with the term <i>[% tag | html %]</i></h3>
 <table id="itemst">
@@ -61,25 +62,26 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
        <div class="dialog message">There are no titles tagged with the term <i>[% tag | html %]</i></div>
 [% END %]
 </form>
- </div>
- </div>
- <div class="yui-b">
-  <ul>
-    <li><a href="/cgi-bin/koha/tags/review.pl?approved=1">Approved tags</a>
-    </li>
-    <li><a href="/cgi-bin/koha/tags/review.pl?approved=-1">Rejected tags</a>
-    </li>
-    <li><a href="/cgi-bin/koha/tags/review.pl?approved=0">Pending tags</a>
-    </li>
-    <li><a href="/cgi-bin/koha/tags/review.pl?approved=all">All tags</a>
-    </li>
-  </ul>
- </div>
-</div>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                <ul>
+                    <li><a href="/cgi-bin/koha/tags/review.pl?approved=1">Approved tags</a></li>
+                    <li><a href="/cgi-bin/koha/tags/review.pl?approved=-1">Rejected tags</a></li>
+                    <li><a href="/cgi-bin/koha/tags/review.pl?approved=0">Pending tags</a></li>
+                    <li><a href="/cgi-bin/koha/tags/review.pl?approved=all">All tags</a></li>
+                </ul>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
-    <script type="text/javascript">
+    <script>
         $(document).ready(function() {
             $(".delete").click(function (event) {
                 $(this).parent().parent().parent().addClass("selected");
index f783f48..8279015 100644 (file)
@@ -6,7 +6,7 @@
 <title>Koha &rsaquo; Tools &rsaquo; Tags &rsaquo; [% IF ( do_it ) %]Review &rsaquo; [% ELSE %]Review tags[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.css("css/datatables.css") | $raw %]
-<style type="text/css">
+<style>
 .setlabel {width: 6em; font-family: courier; background-color:#E8E8E8;}
 .rejected { color: #CC0033; }
 .approved { color: #339900; }
@@ -21,13 +21,13 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; Tags</div>
 
-<div id="doc3" class="yui-t2">
<div id="bd">
-  <div id="yui-main">
-   <div class="yui-b">
-   
-<div class="yui-ge">
-<div class="yui-u first">
+<div class="main container-fluid">
   <div class="row">
+        <div class="col-sm-12">
+            <main>
+
+<div class="row">
+<div class="col-sm-8 col-sm-push-2">
 <h1>Tags</h1>
 <form method="post" action="/cgi-bin/koha/tags/review.pl" class="checkboxed">
   <h4>Displaying 
@@ -143,7 +143,8 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
   </fieldset>[% END %]
   </form>
 </div>
-<div class="yui-u">
+<div class="col-sm-2 col-sm-push-2">
+    <aside>
  <fieldset class="brief">
   <h4>Terms summary</h4>
   <ul>
@@ -181,13 +182,10 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
    </div>
    </form>
   </fieldset>
+    </aside>
 </div>
-</div>
-
-
-  </div>
- </div>
- <div class="yui-b">
+<div class="col-sm-2 col-sm-pull-10">
+    <aside>
 <form method="post" action="/cgi-bin/koha/tags/review.pl">
 <fieldset class="brief">
   <h4>Filters</h4>
@@ -221,6 +219,10 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
  <fieldset class="action"><button type="submit" class="btn btn-default btn-sm"><i class="fa fa-filter" aria-hidden="true"></i> Apply filter(s)</button></fieldset>
 </fieldset>
 </form>
+</aside>
+</div>
+</div>
+</main>
 </div>
 </div>
 
@@ -229,7 +231,7 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
     [% INCLUDE 'calendar.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
     [% Asset.js("js/pages/tags-review.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var MSG_AJAX_APPROVE_FAILED = _("AJAX failed to approve tag: %s");
         var MSG_AJAX_REJECTION_FAILED = _("AJAX failed to reject tag: %s");
         var MSG_AJAX_TAG_PERMITTED = _("%s is permitted!");