Bug 19980

Summary: Omnibus: Update single-column templates to use Bootstrap grid
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: dcook, jonathan.druart, josef.moravec, nengard, testopia, tmisilo
Version: master   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=19931
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Bug Depends on: 19981, 19982, 19983, 20032, 20033, 20034, 20035, 20036, 20037, 20038, 20044, 20045, 20641, 20642, 20650, 21790    
Bug Blocks: 14546    

Description Owen Leonard 2018-01-16 15:00:40 UTC
Templates in the staff client which are a single column can be easily converted from using YUI grids to using Bootstrap grids.
Comment 1 Jonathan Druart 2018-02-05 12:17:13 UTC
How? Can you detail the main changes you applied?
Comment 2 Owen Leonard 2018-02-05 14:44:17 UTC
In order to accomplish Bug 14546 ("Make staff client templates responsive") we can build on the already-included Bootstrap library and make incremental changes to the templates.

The simplest way to start this process is to modify pages which have the simplest YUI grid: Single columns, no sidebar. There are two variations on this layout:

- Fixed-width centered page with no sidebars
- Fluid-width page with no sidebar

See: https://wiki.koha-community.org/wiki/Interface_patterns#Common_page_layouts

A typical change will look something like this:

-<div id="doc2" class="yui-t7">
-<div id="bd">
-  <div id="yui-main">
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+

I think using standard Bootstrap classes makes sense because it makes it easy for developers to use Bootstrap documentation to understand what the classes are doing.

In this case, the "container-fluid" class makes the contents fluid rather than fixed-width. The "row" class delineates a grid row. The "col-md-8" class means that the (single, in this case) column occupies 8 of 12 grid columns when the browser width is at or above 970px (the "md" part of the class name). Below 970px the column is full-width.

There are very few YUI-specific selectors in staff-global.css. Almost all of the existing ones affect multi-column layouts and can be addressed when we start making changes to those layouts.

Regarding codifying this change in the QA scripts, we may want to wait until removal of the YUI grid is complete. It would be easier to look for any "yui" class than try to pick out only a few.