Bug 20670 - Add markup and standard classes for sidebars and main content areas
Summary: Add markup and standard classes for sidebars and main content areas
Status: NEW
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
URL:
Keywords:
Depends on:
Blocks: 14546
  Show dependency treegraph
 
Reported: 2018-04-27 13:06 UTC by Owen Leonard
Modified: 2020-04-27 15:11 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-04-27 13:06:50 UTC
As we move away from YUI grids, it would be helpful if we could consistently add some classes to the primary sections of the page. That would allow us to style elements differently based on their container's class.

I've already begun adding a "main" class to the <div> which is the primary "container" for the Bootstrap grid. It typically looks like this:

    <div class="main container-fluid">
        <div class="row">
            <div class="col-sm-5 col-md-4">

I would like to add an additional container that wraps the primary content region for the page. This container should have no style attached to it (as it might interfere with grid layout), but can serve as a context for styles within it.

-----------------------------------------------
*                  .main                      *
* ------------------------------------------- *
* *          *      .main-content           * *
* *          *                              * *
* * .sidebar *  --------------------------  * *
* *          *  *                        *  * *
* *          *  *   .row                 *  * *
* *          *  *      .col-*            *  * *
* *          *  *           ...etc.      *  * *
* *          *  --------------------------  * *
* *          *                              * *
* ------------------------------------------- *
*                                             *
-----------------------------------------------

The use I have right away is to style forms differently based on whether they are in the sidebar or the main-content area. Right now we have some CSS which depends on YUI grid classes, and we need to replace that which isn't dependent on the grid system we choose.
Comment 1 Owen Leonard 2018-04-27 13:43:55 UTC
My diagram needs some tweaks -- it was off the top of my head. The .sidebar div is contained within the primary .row div, so .main-content will have to be moved.
Comment 2 Katrin Fischer 2018-04-29 20:41:38 UTC
+1