From 3a5eba0eafe6b40b4acfac2f073cd63f813fbd82 Mon Sep 17 00:00:00 2001
From: Albert Yi <albert@carbonfive.com>
Date: Fri, 26 Oct 2018 15:01:49 -0700
Subject: [PATCH] switch reltags css to use flexbox

---
 .../src/styles/specific/related_tags.scss     | 19 +++++++++++--------
 app/views/related_tags/_tag_column.html.erb   |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/javascript/src/styles/specific/related_tags.scss b/app/javascript/src/styles/specific/related_tags.scss
index 4b79288a2..f6d403cd0 100644
--- a/app/javascript/src/styles/specific/related_tags.scss
+++ b/app/javascript/src/styles/specific/related_tags.scss
@@ -1,8 +1,6 @@
 @import "../base/000_vars.scss";
 
 div#related-tags-container {
-  padding-right: 2em;
-
   &.visible a#show-related-tags-link,
   &.hidden a#hide-related-tags-link,
   &.hidden div.related-tags {
@@ -17,11 +15,20 @@ div.related-tags {
   background: #EEE;
   overflow: auto;
   border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap;
+
+  div.user-related-tags-columns, div.current-related-tags-columns, div.source-related-tags-columns {
+    display: flex;
+  }
 
   div.tag-column {
     max-width: 15em;
-    margin-right: 2em;
-    float: left;
+    margin-right: 3em;
+
+    &.is-empty-true {
+      display: none;
+    }
 
     ul {
       margin: 0;
@@ -47,8 +54,4 @@ div.related-tags {
       }
     }
   }
-  
-  div.wide-column {
-    max-width: 45em;
-  }
 }
diff --git a/app/views/related_tags/_tag_column.html.erb b/app/views/related_tags/_tag_column.html.erb
index 168781db4..29d6f514d 100644
--- a/app/views/related_tags/_tag_column.html.erb
+++ b/app/views/related_tags/_tag_column.html.erb
@@ -1,8 +1,8 @@
 <%# tags, title, class (optional) %>
 
-<div class="tag-column <%= local_assigns[:class] || "#{title.parameterize}-related-tags-column" %>">
+<%= content_tag(:div, class: ["tag-column", local_assigns[:class] || "#{title.parameterize}-related-tags-column", "is-empty-#{tags.empty?}"].join(" ")) do %>
   <% if tags.present? %>
     <h6><%= title %></h6>
     <%= TagSetPresenter.new(tags).tag_list_html(name_only: true) %>
   <% end %>
-</div>
+<% end %>