From 5dfc14ba073caad2d8b63da8c3bbbce9a3743183 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Sat, 28 Sep 2019 17:45:58 -0500
Subject: [PATCH] css: switch sidebar layout from float to flexbox.

---
 .../src/styles/common/main_layout.scss        | 25 +++++++++++++++----
 .../src/styles/specific/z_responsive.scss     |  5 ----
 app/views/layouts/sidebar.html.erb            |  2 +-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index 38094596c..df97cfd1f 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -6,9 +6,6 @@ div#page {
   padding: 0 10px;
 
   aside#sidebar {
-    width: 15em;
-    float: left;
-
     h1 {
       font-size: $h3_size;
     }
@@ -24,8 +21,6 @@ div#page {
 
   section#content {
     overflow: visible;
-    margin-left: 15em;
-    padding-left: 1em;
   }
 }
 
@@ -41,3 +36,23 @@ footer#page-footer {
 div.clearfix {
   clear: both;
 }
+
+.sidebar-container {
+  display: flex;
+
+  #sidebar {
+    flex-basis: 15em;
+  }
+
+  #content {
+    flex: 1;
+    padding-left: 1em;
+  }
+
+  @media (max-width: 660px) {
+    flex-direction: column;
+
+    #content { order: 1; }
+    #sidebar { order: 2; }
+  }
+}
diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss
index 8e660aaaf..88d47040c 100644
--- a/app/javascript/src/styles/specific/z_responsive.scss
+++ b/app/javascript/src/styles/specific/z_responsive.scss
@@ -45,15 +45,10 @@
     padding: 0 0.25vw;
     > div /* div#c-$controller */ {
       > div /* div#a-$action */ {
-        display: flex;
-        flex-direction: column;
 
         /* Move #sidebar below #content. */
         > aside#sidebar {
           font-size: 1.5em;
-          float: none;
-          width: auto;
-          order: 2;
         }
       }
     }
diff --git a/app/views/layouts/sidebar.html.erb b/app/views/layouts/sidebar.html.erb
index 51398787a..97861a3b7 100644
--- a/app/views/layouts/sidebar.html.erb
+++ b/app/views/layouts/sidebar.html.erb
@@ -1,6 +1,6 @@
 <% content_for(:layout) do %>
   <div id="c-<%= params[:controller].parameterize.dasherize %>">
-    <div id="a-<%= params[:action].parameterize.dasherize %>">
+    <div id="a-<%= params[:action].parameterize.dasherize %>" class="sidebar-container">
       <aside id="sidebar">
         <%= yield :sidebar %>
       </aside>