Summary: | Omnibus: Update single-column templates to use Bootstrap grid | ||
---|---|---|---|
Product: | Koha | Reporter: | Owen Leonard <oleonard> |
Component: | Templates | Assignee: | 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
How? Can you detail the main changes you applied? 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. |