[basetemplates] Use col-xs instead of col-md (related to #4538123)

This prevents the column from collapsing on top of one another if the
screen width is too small. This effectively keeps the 2 column layout at
all screen sizes.

data/cubes.squareui.js

@@ -17,8 +17,8 @@
         var $contentCol = $('#main-center');
         var $asideCols = $(".cwjs-aside");
         if ($asideCols.length) {
-            var collapsendContentClass = 'col-md-' + (12 - $asideCols.length * 3);
-            var fullContentClass = 'col-md-12';
+            var collapsendContentClass = twbs_col_cls + (12 - $asideCols.length * 3);
+            var fullContentClass = twbs_col_cls + 12;
             var displayAsideboxes = cw.cubes.squareui.getLocalData('asideboxes');
             if (toggle === undefined) {
                 displayAsideboxes = $asideCols.hasClass('hidden');

views/basetemplates.py

@@ -25,6 +25,7 @@
 
 # options which can be changed freely
 basetemplates.TheMainTemplate.twbs_container_cls = 'container-fluid'
+basetemplates.TheMainTemplate.twbs_col_cls = 'col-xs-'
 
 
 @monkeypatch(basetemplates.TheMainTemplate)
@@ -118,8 +119,8 @@
         html = stream.getvalue()
         if html:
             # only display aside columns if html availble
-            self.w(u'<aside id="aside-main-%s" class="col-md-3 cwjs-aside">\n' %
-                   context)
+            self.w(u'<aside id="aside-main-%s" class="%s3 cwjs-aside">\n' %
+                   (context, self.twbs_col_cls))
             self.w(html)
             self.w(u'</aside>\n')
     return len(boxes)
@@ -127,8 +128,8 @@
 @monkeypatch(basetemplates.TheMainTemplate)
 def content_column(self, view, content_cols):
     w = self.w
-    w(u'<div id="main-center" class="col-md-%(col)s" role="main">' % {
-        'col': content_cols})
+    w(u'<div id="main-center" class="%(prefix)s%(col)s" role="main">' % {
+        'prefix': self.twbs_col_cls, 'col': content_cols})
     components = self._cw.vreg['components']
     self.content_components(view, components)
     w(u'<div id="pageContent">')
@@ -148,7 +149,7 @@
     w(nav_html.getvalue())
     self.content_footer(view)
     w(u'</div>\n') # closes div#pageContent
-    w(u'</div>\n') # closes div.col-md-%(col)s
+    w(u'</div>\n') # closes div.%(prefix)s-%(col)s
 
 
 @monkeypatch(basetemplates.TheMainTemplate)

views/component.py

@@ -18,6 +18,7 @@
 from logilab.common.registry import yes
 
 from cubicweb.web.views.basecomponents import HeaderComponent
+from cubicweb.web.views.basetemplates import TheMainTemplate
 
 
 class HideAsidesBar(HeaderComponent):
@@ -30,6 +31,7 @@
     icon_css_cls = 'glyphicon glyphicon-align-justify'
 
     def render(self, w):
+        self._cw.html_headers.define_var('twbs_col_cls', TheMainTemplate.twbs_col_cls)
         w(u'''<button class="btn btn-default navbar-btn" id="cw-aside-toggle"
               onclick="cw.cubes.squareui.toggleLeftColumn()" title="%(label)s">
               <span class="%(icon_class)s"></span>