Changed: use flexbox for layout

Fixes #296.
mnot · Dec 9, 2023 · bb6f493 · bb6f493
1 parent 3a16558
commit bb6f493
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 14 deletions.
diff --git a/redbot/formatter/templates/response_finish.html b/redbot/formatter/templates/response_finish.html
@@ -6,6 +6,7 @@
 {% endfor %}
 {%- endmacro %}
 
+<div id="columns">
 <div id="left_column">
     {% for nonfinal_response in resource.nonfinal_responses %}
         <pre class='nonfinal_response'>{{ format_response(nonfinal_response) }}</pre>
@@ -89,6 +90,7 @@ <h3>{{ category.value }}{{ category|subrequest_messages }}</h3>
 
         <span class="help hidden">If something doesn't seem right, feel free to <a href="https://github.com/mnot/redbot/issues/new">file an issue</a>!</span>
     </div>
+    </div>
 
     <br />
 

diff --git a/src/scss/red_layout.scss b/src/scss/red_layout.scss
@@ -5,34 +5,36 @@ body {
   color: $text_colour;
   font: 12pt/14pt "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 1em $column_spacing;
-  max-width: $max_width;
   &.blank {
     margin: $vertical_space * 2 auto $vertical_space auto;
     width: $left_width;
   }
 }
 
+#columns {
+  @include flexbox();
+  @include flex-flow(row wrap);
+}
+
 #left_column {
   width: $left_width;
-  float: left;
   margin: 0;
   padding: 0;
 }
 
 #right_column {
-  width: $right_width;
-  float: right;
+  @include order(1);
   margin: 1em 0 0 $column_spacing;
   padding: 0;
 }
 
-@media screen and (max-width: $max_width + (2 * $column_spacing)) {
-  #left_column, #right_column {
-    width: $left_width;
+@media screen and (max-width: $left_width) {
+  body {
+    @include flex-flow(column wrap);
+  }
+
+  #right_column {
     margin: 0;
-    padding: 0;
-    float: left;
-    clear: both;
   }
 }
 
@@ -46,7 +48,6 @@ h1 {
   padding: 0;
   margin: 10px 0px;
   font-size: 1.8em;
-  width: 100%;
   a {
     color: #444;
     text-decoration: none;

diff --git a/src/scss/red_mixins.scss b/src/scss/red_mixins.scss
@@ -10,3 +10,72 @@
   color: $detail_text_colour;
   font-size: $detail_font_size;
 }
+
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-wrap: wrap;
+  -moz-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+@mixin flex($values) {
+  -webkit-box-flex: $values;
+  -moz-box-flex:  $values;
+  -webkit-flex:  $values;
+  -ms-flex:  $values;
+  flex:  $values;
+}
+
+@mixin order($value) {
+  -webkit-box-ordinal-group: $value;
+  -moz-box-ordinal-group: $value;
+  -ms-flex-order: $value;
+  -webkit-order: $value;
+  order: $value;
+}
+
+@mixin align-items($value) {
+  -webkit-box-align: $value;
+  -moz-box-align: $value;
+  -ms-flex-align: $value;
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+@mixin box-pack($value) {
+  -webkit-box-pack: $value;
+  -moz-box-pack: $value;
+  -ms-box-pack: $value;
+  box-pack: $value;
+}
+
+@mixin justify-content() {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  box-pack: justify;
+  flex-pack: justify;
+  justify-content: space-between;
+}
+
+@mixin columns($cols) {
+	-webkit-column-count: $cols;
+	-moz-column-count: $cols;
+  -ms-column-count: $cols;
+  column-count: $cols;
+}
+
+@mixin flex-flow($value) {
+  -webkit-flex-flow: $value;
+  -moz-flex-flow: $value;
+  -ms-flex-flow: $value;
+  flex-flow: $value;
+}
diff --git a/src/scss/red_vars.scss b/src/scss/red_vars.scss
@@ -1,8 +1,5 @@
 $left_width: 650px;
-$right_width: 550px;
 $column_spacing: 40px;
-$max_width: $left_width + $right_width + $column_spacing;
-$break_width: $left_width + $column_spacing + (2 * $column_spacing);
 $text_colour: #111;
 $link_colour: blue;
 $detail_text_colour: #737373;