Bug 21795: Switch two-column templates to Bootstrap grid: Notices and slips
authorOwen Leonard <oleonard@myacpl.org>
Thu, 8 Nov 2018 17:53:51 +0000 (17:53 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Wed, 26 Dec 2018 20:47:03 +0000 (20:47 +0000)
This patch updates notices and slips templates to use Bootstrap grids
instead of YUI.

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

To test, apply the patch and go to Tools -> Notices and slips. Test that
these pages look correct and adujst well to various browser widths.

 - The main page listing notices and slips
 - The add/edit form
 - The notice preview modal available when editing CHECKIN, CHECKOUT and
   HOLD_SLIP.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt
koha-tmpl/intranet-tmpl/prog/js/letter.js

index c72b4ed..dff6c17 100644 (file)
@@ -8,7 +8,7 @@
 <title>Koha &rsaquo; Tools &rsaquo; Notices[% IF ( add_form or copy_form ) %][% IF ( modify ) %] &rsaquo; Modify notice[% ELSE %] &rsaquo; Add notice[% END %][% END %][% IF ( add_validate or copy_validate) %] &rsaquo; Notice added[% END %][% IF ( delete_confirm ) %] &rsaquo; Confirm deletion[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.css("css/datatables.css") | $raw %]
-<style type="text/css">#preview_template .modal-dialog { width : 80%; } .spinner { display: none; } @media (max-width: 767px) { #preview_template { margin: 0; width : auto; } }</style>
+<style>#preview_template .modal-dialog { width : 80%; } .spinner { display: none; } @media (max-width: 767px) { #preview_template { margin: 0; width : auto; } }</style>
 </head>
 
 <body id="tools_letter" class="tools">
         <div class="row">
             <div class="col-md-8 col-md-offset-2">
 [% ELSE %]
-    <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>
 [% END %]
 
 [% IF ( no_op_set ) %]
        </form>
 [% END %]
 
-</div>
-</div>
-[% UNLESS add_form or copy_form %]
-    <div class="yui-b noprint">
-        [% INCLUDE 'tools-menu.inc' %]
-    </div>
+[% IF add_form or copy_form %]
+        </div> <!-- /.col-md-8 -->
+    </div> <!-- /.row -->
+[% ELSE %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+    </div> <!-- /.row -->
 [% END %]
-</div>
 
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("js/tools-menu.js") | $raw %]
index 787cce9..73c32ee 100644 (file)
@@ -3,7 +3,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     </head>
     <body id="preview_letter" class="catalog">
-        <div id="main">
+        <div class="main container-fluid">
             [% FOR m IN messages %]
                 [%# FIXME The message block does not appear at the top of the modal! %]
                 <div class="dialog [% m.type | html %]">
@@ -29,8 +29,8 @@
             [% END %]
 
             [% IF rendered_message %]
-                <div class="yui-g">
-                    <div class="yui-u first">
+                <div class="row">
+                    <div class="col-xs-6">
                         <h3>Original version</h3>
                         <span style="font-family:monospace">
                             [% FILTER html_line_break %]
@@ -38,7 +38,7 @@
                             [% END %]
                         </span>
                     </div>
-                    <div class="yui-u">
+                    <div class="col-xs-6">
                         <h3>Original message, rendered:</h3>
                         <span style="font-family:monospace">
                             [% FILTER html_line_break %]
@@ -52,8 +52,8 @@
 
             [% IF rendered_tt_message %]
             <hr />
-                <div class="yui-g">
-                    <div class="yui-u first">
+                <div class="row">
+                    <div class="col-xs-6">
                         <h3>Converted version</h3>
                         <span style="font-family:monospace">
                             [% FILTER html_line_break %]
@@ -61,7 +61,7 @@
                             [% END %]
                         </span>
                     </div>
-                    <div class="yui-u">
+                    <div class="col-xs-6">
                         <h3>Converted message, rendered:</h3>
                         <span style="font-family:monospace">
                             [% FILTER html_line_break %]
@@ -71,7 +71,7 @@
                     </div>
                 </div>
             [% END %]
-        </div>
+        </div> <!-- /.main -->
 
     </body>
 </html>
index 968b0d1..7678964 100644 (file)
@@ -162,7 +162,7 @@ $(document).ready(function() {
         page += '&content='+encodeURIComponent(content);
         page += '&data_preview='+encodeURIComponent(data_preview);
         page += '&is_html='+encodeURIComponent(is_html);
-        $("#preview_template .modal-body").load(page + " #main");
+        $("#preview_template .modal-body").load(page + " .main");
         $('#preview_template').modal('show');
         $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?module="+module+"&code="+code+"&mtt="+mtt+"&lang="+lang);
     });