Merge pull request #8985 from jeffibm/fix-responsive-styles-1

Fix for responsive styles for layout and summary

Author: GilbertCherrie

app/stylesheet/application-webpack.scss

@@ -23,6 +23,7 @@
 @import './quadicon.scss';
 @import './search-bar.scss';
 @import './settings.scss';
+@import './responsive_layout.scss';
 @import './tree.scss';
 @import './toolbar.scss';
 @import './widget.scss';

app/stylesheet/responsive_layout.scss

@@ -0,0 +1,49 @@
+@media (max-width: 65.98rem) {
+  .bx--side-nav__overlay-active {
+    visibility: hidden;
+  }
+}
+
+@media only screen 
+and (min-width : 768px) 
+and (max-width : 990px) {
+
+  .bx--side-nav__overlay-active {
+    visibility: hidden;
+  }
+
+  .responsive-layout-main {
+    .sidebar-pf.sidebar-pf-left {
+      left: 0;
+    }
+
+    .full-content {
+      left: 0;
+    }
+  }
+  
+}
+
+@media only screen 
+and (max-width : 990px) {
+  .miq-structured-list-accordion {
+    overflow: hidden;
+
+    .miq-structured-list {
+      overflow: hidden;
+    
+      .bx--structured-list-row {
+        display: flex;
+        flex-direction: column;
+    
+        .label_header {
+          padding-left: 5px !important;
+        }
+    
+        .content_value {
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+}

app/views/layouts/_center_div_no_listnav.html.haml

@@ -2,8 +2,8 @@
   %header
     #breadcrumbs
       = render :partial => "layouts/breadcrumbs"
-  %main.row.max-height
-    .col-md-12.max-height
+  %main.row.max-height.responsive-layout-main
+    .col-md-12.max-height.full-content
       - if !@in_a_form && taskbar_in_header?
         .row.toolbar-pf#toolbar
           .col-sm-12

app/views/layouts/_center_div_with_listnav.html.haml

@@ -9,9 +9,9 @@
           - if @layout == "dashboard"
             = render :partial => "/layouts/tabs"
           = miq_toolbar toolbar_from_hash
-  %main.div{:class => "row max-height content-focus-order #{left_div_classname}"}
+  %main.div{:class => "responsive-layout-main row max-height content-focus-order #{left_div_classname}"}
     - if !controller.respond_to?(:display_tree)
-      .col-sm-12.col-md-12.col-sm-push-12.col-md-push-3.max-height
+      .col-sm-12.col-md-12.col-sm-push-12.col-md-push-3.max-height.full-content
         #main-content.row.miq-layout-center_div_with_listnav
           .col-md-12
             .row
@@ -31,7 +31,7 @@
               .col-md-12
                 = yield
     - else
-      .col-sm-4.col-md-3.col-sm-pull-8.col-md-pull-9.sidebar-pf.sidebar-pf-left.max-height
+      .col-sm-4.col-md-3.col-sm-pull-8.col-md-pull-9.sidebar-pf.sidebar-pf-left.max-height.left-sidebar
         -# listnav_div
         = render :partial => "layouts/listnav"
       .col-sm-8.col-md-9.col-sm-push-4.col-md-push-3.max-height

app/views/layouts/_content.html.haml

@@ -10,7 +10,7 @@
       .row.toolbar-pf#toolbar.miq-toolbar-menu
         .col-sm-12
           = miq_toolbar toolbar_from_hash
-    %main.row.max-height.content-focus-order
+    %main.row.max-height.content-focus-order.responsive-layout-main
       - if simulate?
         #left_div.sidebar-pf.sidebar-pf-left.scrollable.max-height.col-sm-5.col-md-4.col-sm-pull-7.col-md-pull-8
           #default_left_cell
@@ -22,7 +22,7 @@
               = render :partial => "layouts/listnav"
             = yield :left
           #custom_left_cell
-      .max-height{:class => simulate? ? 'col-sm-7 col-md-8 col-sm-push-5 col-md-push-4' : 'col-sm-8 col-md-9 col-sm-push-4 col-md-push-3'}
+      .full-content.max-height{:class => simulate? ? 'col-sm-7 col-md-8 col-sm-push-5 col-md-push-4' : 'col-sm-8 col-md-9 col-sm-push-4 col-md-push-3'}
         #main-content.row.miq-layout-center_div_with_listnav
           .col-md-12
             .row