Bug 19980 - Omnibus: Update single-column templates to use Bootstrap grid
Summary: Omnibus: Update single-column templates to use Bootstrap grid
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
Depends on: 19981 19982 19983 20032 20033 20034 20035 20036 20037 20038 20044 20045 20641 20642 20650 21790
Blocks: 14546
  Show dependency treegraph
Reported: 2018-01-16 15:00 UTC by Owen Leonard
Modified: 2020-01-06 20:14 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Note You need to log in before you can comment on or make changes to this bug.
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.