Bug 21304: Update two-column templates with Bootstrap grid: Catalog
authorOwen Leonard <oleonard@myacpl.org>
Wed, 2 May 2018 14:06:23 +0000 (14:06 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Fri, 22 Mar 2019 19:13:45 +0000 (19:13 +0000)
This patch modifies several catalog 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:

 - Catalog -> Search
   - Search results
     - Bibliographic details
     - MARC details (viewMARC preference enabled)
     - Labeled MARC details (viewLabeledMARC preference enabled)
     - ISBD (viewISBD preference enabled)
     - Items
     - Checkout history
     - Rota (stock rotation)

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

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

koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/ISBDdetail.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/MARCdetail.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/issuehistory.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/labeledMARCdetail.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/stockrotation.tt

index 08ff9e5..ec1527b 100644 (file)
   [% END %]
 </div>
 
-<div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
 [% IF ( unknownbiblionumber ) %]
-  <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
+    <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
 [% ELSE %]
-   <div id="bd">
-      <div id="yui-main">
-       <div class="yui-b">
+
        [% INCLUDE 'cat-toolbar.inc' %]
     [% IF ( ocoins ) %]
     <!-- COinS / OpenURL -->
          <div id="catalogue_ISBDdetail">
           [% ISBD | $raw %]
          </div>
-       </div>
-      </div>
-      <div class="yui-b">
-      [% INCLUDE 'biblio-view-menu.inc' %]
-      </div>
-    </div>
 [% END %]
 
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
         browser.show();
     </script>
index e549122..7034199 100644 (file)
   [% END %]
 </div>
 
-<div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
 [% IF ( unknownbiblionumber ) %]
   <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
 [% ELSE %]
-   <div id="bd">
-       <div id="yui-main">
-       <div class="yui-b">
+
 [% INCLUDE 'cat-toolbar.inc' %]
 
 [% UNLESS ( popup ) %]
     [% END %]
 
 </div>
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
 [% END %]
-</div>
+
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
         browser.show();
 
index e369043..07c44de 100644 (file)
   [% END %]
 </div>
 
-<div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
 [% IF ( unknownbiblionumber ) %]
   <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
 [% ELSE %]
-   <div id="bd">
-    <div id="yui-main">
-    <div class="yui-b">
 
 [% INCLUDE 'cat-toolbar.inc' %]
     [% IF ( ocoins ) %]
     </div>
 </div>
 
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
 [% END %]
-</div>
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'greybox.inc' %]
-    <script type="text/javascript">
+    <script>
         // http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html
         function verify_images() {
             $("#bookcoverimg").each(function(i){
     [% INCLUDE 'columns_settings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
     [% Asset.js("js/table_filters.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var browser;
         browser = KOHA.browser('[% searchid | html %]', parseInt(biblionumber, 10));
         browser.show();
index 6693a59..73af2f0 100644 (file)
@@ -41,12 +41,10 @@ img.thumbnail {
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Images for <i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div>
 
-<div id="doc3" class="yui-t1">
-
-<div id="bd">
-    <div id="yui-main">
-    <div class="yui-b">
-    <div class="yui-ge">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
 [% INCLUDE 'cat-toolbar.inc' %]
 
@@ -55,12 +53,13 @@ img.thumbnail {
 
 [% IF ( LocalCoverImages == 1 ) %]
     [% IF ( images.size > 0 ) %]
-        <div class="yui-u first">
+        <div class="row">
+        <div class="col-md-8">
         <div id="largeCover">
             <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
         </div></div>
 
-        <div class="yui-u"><div id="thumbnails">
+        <div class="col-md-4"><div id="thumbnails">
 
             [% FOREACH img IN images %]
                 [% IF img %]
@@ -74,7 +73,7 @@ img.thumbnail {
                 [% END %]
             [% END %]
         </div></div>
-
+        </div>
     [% ELSE %]
         <div class="dialog message">There are no images for this record.</div>
     [% END %]
@@ -82,18 +81,20 @@ img.thumbnail {
     <div class="dialog message">Local images have not been enabled by your system administrator.</div>
 [% END %]
 
-</div>
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         $(document).ready(function(){
             showCover([% imagenumber | html %]);
             $(".show_cover").on("click",function(e){
index 77cd776..3f1c735 100644 (file)
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Checkout history for <i>[% biblio.title | 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>
 
 <h1>Checkout history for [% biblio.title | html %]</h1>
 [% IF biblio.author %]<h3>by [% biblio.author | html %]</h3>[% END %]
     [% END %]
 </div>
 
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
 [% INCLUDE 'datatables.inc' %]
 [% INCLUDE 'columns_settings.inc' %]
-    <script type="text/javascript" id="js">
+    <script id="js">
         $(document).ready(function() {
             var columns_settings = [% ColumnsSettings.GetColumns('catalogue', 'detail', 'checkoutshistory-table', 'json') %];
             [% UNLESS show_patron_column %]
index 8aa9f9a..4a39809 100644 (file)
                [% END %]
        </div>
 
-       <div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
-       [% IF ( unknownbiblionumber ) %]
-         <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
-       [% ELSE %]
-
-               <div id="bd">
-                       <div id="yui-main">
-                               <div class="yui-b">
+    [% IF ( unknownbiblionumber ) %]
+        <div class="dialog message">The record you requested does not exist ([% biblionumber | html %]).</div>
+    [% ELSE %]
 
                                        [% INCLUDE 'cat-toolbar.inc' %]
 
                                                        [% END %]
                                                </table>
                                        </div>
-                               </div>
-                       </div>
-                       <div class="yui-b">
-
-                               [% INCLUDE 'biblio-view-menu.inc' %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
 
-               </div>
-       [% END %]
-       </div>
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+[% END %]
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    <script type="text/javascript">
+    <script>
     //<![CDATA[
         var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
         browser.show();
index 78c3498..4d2e6d0 100644 (file)
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Item details for <i>[% title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div>
 
-<div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
-   <div id="bd">
-    <div id="yui-main">
-    <div class="yui-b">
 [% INCLUDE 'cat-toolbar.inc' %]
 
 <div id="catalogue_detail_biblio">
 
 </div>
 
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
         browser.show();
     </script>
index efab5b0..16ad66c 100644 (file)
 &rsaquo; Search [% IF ( query_desc ) %]for '[% query_desc | html %]'[% END %][% IF ( limit_desc ) %]&nbsp;with limit(s):&nbsp;'[% limit_desc | html %]'[% END %]
 </div>
 
-<div id="doc3" class="yui-t1">
-   <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 ( outer_sup_results_loop ) %]
-    <div class="yui-ge">
-    <div class="yui-u first">
+        <div class="row">
+            <div class="col-sm-8">
     [% END %]
 
     [% IF ( koha_spsuggest ) %]
     [% END %]
 [% IF ( outer_sup_results_loop ) %]
 </div>
-<div class="yui-u">
+<div class="col-sm-4">
 [% FOREACH outer_sup_results_loo IN outer_sup_results_loop %]
 <!-- <div class="yui-b"> -->
     [% IF ( outer_sup_results_loo.inner_sup_results_loop ) %]
     <input type="hidden" name="multi_listadd" value="1"/>
 </form>
 
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'facets.inc' %]
-</div>
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'admin-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
     [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var MSG_NO_ITEM_SELECTED = _("Nothing is selected.");
         var MSG_NON_RESERVES_SELECTED = _("One or more selected items cannot be placed on hold.");
         var q_array = new Array();  // will hold search terms, if present
index cb262a8..b96de1a 100644 (file)
                                             [% END %]
                                         </select>
                                         <button class="btn btn-default btn-xs" type="submit"><i class="fa fa-plus"></i> Add to rota</button>
-                                        <input type="hidden" name="op" value="add_item_to_rota"></input>
-                                        <input type="hidden" name="item_id" value="[% item.bib_item.id | uri %]"></input>
-                                        <input type="hidden" name="biblionumber" value="[% biblionumber | uri %]"></input>
+                                        <input type="hidden" name="op" value="add_item_to_rota" />
+                                        <input type="hidden" name="item_id" value="[% item.bib_item.id | uri %]" />
+                                        <input type="hidden" name="biblionumber" value="[% biblionumber | uri %]" />
                                     </form>
                                 [% END %]
                             </td>
         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
     </div> <!-- /.row -->
 
-
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
         browser.show();
     </script>