From d9f154094f615481c2b39ce66e07e6262790cc9d Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 2 Oct 2019 00:30:33 -0500
Subject: [PATCH] css: switch mod dashboard, keyboard shortcuts pages to
 flexbox.

* Switch /static/keyboard_shortcuts from float-based layout to flexbox.
* Switch /moderator/dashboard from float-based layout to flexbox.
* Remove various .clearfix, `clear: both` rules.
* Remove dead .quick-mod rule.
---
 app/javascript/src/styles/base/020_base.scss  |   7 ++
 .../src/styles/common/main_layout.scss        |   5 -
 .../src/styles/common/paginator.scss          |   1 -
 .../styles/specific/keyboard_shortcuts.scss   |  14 +--
 .../styles/specific/moderator_dashboard.scss  |  11 +-
 app/javascript/src/styles/specific/posts.scss |   4 -
 app/javascript/src/styles/specific/users.scss |  10 --
 .../src/styles/specific/z_responsive.scss     |   1 -
 app/views/explore/posts/intro.html.erb        |   1 -
 app/views/moderator/dashboards/show.html.erb  |  28 +++--
 app/views/static/keyboard_shortcuts.html.erb  | 112 +++++++++---------
 11 files changed, 85 insertions(+), 109 deletions(-)

diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 50aff74b2..788bb0bfe 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -128,6 +128,13 @@ table tfoot {
   max-width: 70em;
 }
 
+.column-container {
+  display: flex;
+
+  .column-expand { flex: 1; }
+  .column-shrink { flex: 0; }
+}
+
 ul.list-bulleted {
   list-style: inside disc;
 }
diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index f6ea112ce..832a140fb 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -25,7 +25,6 @@ div#page {
 }
 
 footer#page-footer {
-  clear: both;
   width: 100%;
   margin-top: 1em;
   text-align: center;
@@ -33,10 +32,6 @@ footer#page-footer {
   border-top: var(--footer-border);
 }
 
-div.clearfix {
-  clear: both;
-}
-
 .sidebar-container {
   display: flex;
 
diff --git a/app/javascript/src/styles/common/paginator.scss b/app/javascript/src/styles/common/paginator.scss
index 9858c356a..beee65534 100644
--- a/app/javascript/src/styles/common/paginator.scss
+++ b/app/javascript/src/styles/common/paginator.scss
@@ -2,7 +2,6 @@ div.paginator {
   display: block;
   padding: 2em 0 1em 0;
   text-align: center;
-  clear: both;
 
   li {
     a {
diff --git a/app/javascript/src/styles/specific/keyboard_shortcuts.scss b/app/javascript/src/styles/specific/keyboard_shortcuts.scss
index aede2d667..ccca8add4 100644
--- a/app/javascript/src/styles/specific/keyboard_shortcuts.scss
+++ b/app/javascript/src/styles/specific/keyboard_shortcuts.scss
@@ -1,16 +1,10 @@
-@import "../base/000_vars.scss";
-
 div#c-static {
   div#a-keyboard-shortcuts {
-    overflow: visible;
+    section.column {
+      min-width: 25em;
 
-    section {
-      min-width: 20%;
-      float: left;
-      margin-bottom: 1em;
-
-      h1 {
-        font-size: $h3_size;
+      ul {
+        margin-bottom: 2em;
       }
 
       li {
diff --git a/app/javascript/src/styles/specific/moderator_dashboard.scss b/app/javascript/src/styles/specific/moderator_dashboard.scss
index 774464738..12871c469 100644
--- a/app/javascript/src/styles/specific/moderator_dashboard.scss
+++ b/app/javascript/src/styles/specific/moderator_dashboard.scss
@@ -1,13 +1,6 @@
 div#c-moderator-dashboards {
-  div#col1 {
-    width: 45%;
-    float: left;
-    padding-right: 5%;
-  }
-
-  div#col2 {
-    width: 45%;
-    float: left;
+  #column-left {
+    margin-right: 2em;
   }
 
   div.activity {
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index 29c9fcb49..84ee0833c 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -331,10 +331,6 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    span.quick-mod {
-      float: right;
-    }
-
     .pool-name, .search-name {
       word-wrap: break-word;
     }
diff --git a/app/javascript/src/styles/specific/users.scss b/app/javascript/src/styles/specific/users.scss
index 90a455a4e..cfa0c5579 100644
--- a/app/javascript/src/styles/specific/users.scss
+++ b/app/javascript/src/styles/specific/users.scss
@@ -4,16 +4,6 @@ div#c-users {
       margin-bottom: 2em;
     }
 
-    /* clearfix hacks */
-    div.box:before, div.box:after {
-      content: "";
-      display: table;
-    }
-
-    div.box:after {
-      clear: both;
-    }
-
     table.user-statistics {
       tr {
         height: 1.75em;
diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss
index 12ee4287d..e775572a5 100644
--- a/app/javascript/src/styles/specific/z_responsive.scss
+++ b/app/javascript/src/styles/specific/z_responsive.scss
@@ -77,7 +77,6 @@
   }
 
   article.post-preview {
-    float: none;
     margin: 0;
     text-align: center;
     vertical-align: middle;
diff --git a/app/views/explore/posts/intro.html.erb b/app/views/explore/posts/intro.html.erb
index 885babbbc..2f33b86da 100644
--- a/app/views/explore/posts/intro.html.erb
+++ b/app/views/explore/posts/intro.html.erb
@@ -17,7 +17,6 @@
         <div class="posts">
           <h2><%= link_to tag, posts_path(:tags => tag) %></h2>
           <%= post_set.presenter.post_previews_html(self, show_cropped: true) %>
-          <div class="clearfix"></div>
         </div>
       <% end %>
     <% end %>
diff --git a/app/views/moderator/dashboards/show.html.erb b/app/views/moderator/dashboards/show.html.erb
index 835b1021d..6c3c3361e 100644
--- a/app/views/moderator/dashboards/show.html.erb
+++ b/app/views/moderator/dashboards/show.html.erb
@@ -5,20 +5,22 @@
     <%= render "search" %>
     <%= render "posts/partials/common/inline_blacklist" %>
 
-    <div id="col1">
-      <div class="activity"><%= render "activity_upload" %></div>
-      <div class="activity"><%= render "activity_note" %></div>
-      <div class="activity"><%= render "activity_tag" %></div>
-      <div class="activity"><%= render "activity_wiki_page" %></div>
-      <div class="activity"><%= render "activity_artist" %></div>
-      <div class="activity"><%= render "activity_comment" %></div>
-    </div>
+    <section class="column-container">
+      <div id="column-left" class="column column-expand">
+        <div class="activity"><%= render "activity_upload" %></div>
+        <div class="activity"><%= render "activity_note" %></div>
+        <div class="activity"><%= render "activity_tag" %></div>
+        <div class="activity"><%= render "activity_wiki_page" %></div>
+        <div class="activity"><%= render "activity_artist" %></div>
+        <div class="activity"><%= render "activity_comment" %></div>
+      </div>
 
-    <div id="col2">
-      <div class="activity"><%= render "activity_appeal" %></div>
-      <div class="activity"><%= render "activity_user_feedback" %></div>
-      <div class="activity"><%= render "activity_mod_action" %></div>
-    </div>
+      <div id="column-right" class="column column-expand">
+        <div class="activity"><%= render "activity_appeal" %></div>
+        <div class="activity"><%= render "activity_user_feedback" %></div>
+        <div class="activity"><%= render "activity_mod_action" %></div>
+      </div>
+    </section>
   </div>
 </div>
 
diff --git a/app/views/static/keyboard_shortcuts.html.erb b/app/views/static/keyboard_shortcuts.html.erb
index c4702cf2e..794ee6a1b 100644
--- a/app/views/static/keyboard_shortcuts.html.erb
+++ b/app/views/static/keyboard_shortcuts.html.erb
@@ -2,66 +2,68 @@
   <div id="a-keyboard-shortcuts">
     <h1>Keyboard Shortcuts</h1>
 
-    <section>
-      <h1>Listing</h1>
-      <ul>
-        <li><kbd class="key">a</kbd>, <kbd class="key">⇦</kbd> Previous page</li>
-        <li><kbd class="key">d</kbd>, <kbd class="key">⇨</kbd> Next page</li>
-        <li><kbd class="key">q</kbd> Search</li>
-        <li><kbd class="key">w</kbd> Scroll up</li>
-        <li><kbd class="key">s</kbd> Scroll down</li>
-        <li><kbd class="key">r</kbd> Go to random post</li>
-        <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Switch tag script</li>
-      </ul>
-    </section>
+    <div class="column-container">
+      <section class="column column-shrink">
+        <h2>Listing</h2>
+        <ul>
+          <li><kbd class="key">a</kbd>, <kbd class="key">⇦</kbd> Previous page</li>
+          <li><kbd class="key">d</kbd>, <kbd class="key">⇨</kbd> Next page</li>
+          <li><kbd class="key">q</kbd> Search</li>
+          <li><kbd class="key">w</kbd> Scroll up</li>
+          <li><kbd class="key">s</kbd> Scroll down</li>
+          <li><kbd class="key">r</kbd> Go to random post</li>
+          <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Switch tag script</li>
+        </ul>
+      </section>
 
-    <section>
-      <h1>Post</h1>
-      <ul>
-        <li><kbd class="key">n</kbd> New note</li>
-        <li><kbd class="key">e</kbd> Edit tags</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">e</kbd> Edit tags in dialog window</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li>
-        <li><kbd class="key">enter</kbd> Submit tag changes</li>
-        <li><kbd class="key">q</kbd> Search</li>
-        <li><kbd class="key">w</kbd> Scroll up</li>
-        <li><kbd class="key">s</kbd> Scroll down</li>
-        <li><kbd class="key">a</kbd> Previous post</li>
-        <li><kbd class="key">d</kbd> Next post</li>
-        <li><kbd class="key">f</kbd> Favorite post</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li>
-        <li><kbd class="key">g</kbd> Add post to favorite group</li>
-        <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li>
-        <li><kbd class="key">v</kbd> Toggle between sample and full size</li>
-      </ul>
-    </section>
+      <section class="column column-shrink">
+        <h2>Post</h2>
+        <ul>
+          <li><kbd class="key">n</kbd> New note</li>
+          <li><kbd class="key">e</kbd> Edit tags</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">e</kbd> Edit tags in dialog window</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li>
+          <li><kbd class="key">enter</kbd> Submit tag changes</li>
+          <li><kbd class="key">q</kbd> Search</li>
+          <li><kbd class="key">w</kbd> Scroll up</li>
+          <li><kbd class="key">s</kbd> Scroll down</li>
+          <li><kbd class="key">a</kbd> Previous post</li>
+          <li><kbd class="key">d</kbd> Next post</li>
+          <li><kbd class="key">f</kbd> Favorite post</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li>
+          <li><kbd class="key">g</kbd> Add post to favorite group</li>
+          <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li>
+          <li><kbd class="key">v</kbd> Toggle between sample and full size</li>
+        </ul>
+      </section>
 
-    <section>
-      <h1>Artists</h1>
-      <ul>
-        <li><kbd class="key">e</kbd> Edit artist</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li>
-      </ul>
+      <section class="column column-shrink">
+        <h2>Artists</h2>
+        <ul>
+          <li><kbd class="key">e</kbd> Edit artist</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li>
+        </ul>
 
-      <h1>Forum</h1>
-      <ul>
-        <li><kbd class="key">e</kbd> Edit topic</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete topic</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">r</kbd> Mark all as read</li>
-      </ul>
+        <h2>Forum</h2>
+        <ul>
+          <li><kbd class="key">e</kbd> Edit topic</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete topic</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">r</kbd> Mark all as read</li>
+        </ul>
 
-      <h1>Pools</h1>
-      <ul>
-        <li><kbd class="key">e</kbd> Edit pool</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete pool</li>
-      </ul>
+        <h2>Pools</h2>
+        <ul>
+          <li><kbd class="key">e</kbd> Edit pool</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete pool</li>
+        </ul>
 
-      <h1>Wiki</h1>
-      <ul>
-        <li><kbd class="key">e</kbd> Edit wiki page</li>
-        <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete wiki page</li>
-      </ul>
-    </section>
+        <h2>Wiki</h2>
+        <ul>
+          <li><kbd class="key">e</kbd> Edit wiki page</li>
+          <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete wiki page</li>
+        </ul>
+      </section>
+    </div>
   </div>
 </div>