From 5692836bec2dcfe0a06fc72afa028e4890978f32 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 6 Nov 2020 07:49:37 -0600
Subject: [PATCH] improve flexbox icon's selector name and organization, apply
 to index icons and reorganize tags

---
 viewer/static/css/main.scss  | 26 ++++++++++++++++++--------
 viewer/templates/browse.html | 17 +++--------------
 viewer/templates/index.html  | 32 +++++++++++++++++++-------------
 3 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/viewer/static/css/main.scss b/viewer/static/css/main.scss
index 365c173..c066dc8 100644
--- a/viewer/static/css/main.scss
+++ b/viewer/static/css/main.scss
@@ -103,19 +103,29 @@ html, body {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-end;
+  justify-content: flex-end; // Send all items to end
   align-content: stretch;
   align-items: flex-start;
+  width: 100%;
 
   div {
     align-self: auto;
-  }
+    flex: 0 1 auto; // End child shrink
 
-  div:nth-child(1) {
-    flex: 1 1 auto;
-  }
-
-  div:nth-child(2), div:nth-child(3) {
-    flex: 0 1 auto;
+    // First child grows to fill the start
+    &:nth-child(1) {
+      flex: 1 1 auto;
+    }
   }
 }
+
+.icon-set {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-content: stretch;
+  align-items: center;
+  padding: 0 0.5rem;
+}
diff --git a/viewer/templates/browse.html b/viewer/templates/browse.html
index d4700c4..8ad1576 100644
--- a/viewer/templates/browse.html
+++ b/viewer/templates/browse.html
@@ -7,17 +7,6 @@
         .file-count {
             font-weight: 400; font-style: italic; font-size: 70%;
         }
-
-        .action-set {
-            height: 100%;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: space-around;
-            align-content: stretch;
-            align-items: center;
-            padding: 0 0.5rem;
-        }
     </style>
 {% endblock head %}
 {% block content %}
@@ -32,13 +21,13 @@
                         </span>
                     </p>
                 </div>
-                <div class="action-set">
-                    <span class="action icon">
+                <div class="icon-set">
+                    <span class="icon">
                         <a href="{% url 'index' %}">
                             <i class="fas fa-arrow-up" aria-hidden="true"></i>
                         </a>
                     </span>
-                    <span class="action icon">
+                    <span class="icon">
                         <a href="{% url 'refresh' directory.id %}">
                             <i class="fas fa-sync"></i>
                         </a>
diff --git a/viewer/templates/index.html b/viewer/templates/index.html
index ec03608..a40f653 100644
--- a/viewer/templates/index.html
+++ b/viewer/templates/index.html
@@ -4,21 +4,27 @@
         <div class="panel-heading">Directories</div>
         {% if directories|length > 0 %}
             {% for served_directory in directories %}
-                <div class="panel-block is-flex">
-                    <span class="panel-icon is-align-self-flex-start">
+                <div class="panel-block">
+                    <span class="panel-icon">
                         <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
                     </span>
-                    <a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end">
-                        {{ served_directory.path }}
-                        {% if served_directory.regex %}
-                            <span class="tag is-primary">Filtered</span>
-                        {% endif %}
-                    </a>
-                    <a href="{% url 'delete' served_directory.id %}">
-                        <span class="icon has-text-danger">
-                            <i class="fas fa-times fa-lg" aria-hidden="true"></i>
-                        </span>
-                    </a>
+                    <div class="flex-container">
+                        <div>
+                            <a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end">
+                                {{ served_directory.path }}
+                            </a>
+                            {% if served_directory.regex %}
+                                <span class="tag is-primary ml-3 mr-2">Filtered</span>
+                            {% endif %}
+                        </div>
+                        <div class="icon-set">
+                                <span class="icon">
+                                    <a class="has-text-danger" href="{% url 'delete' served_directory.id %}">
+                                        <i class="fas fa-times fa-lg" aria-hidden="true"></i>
+                                    </a>
+                                </span>
+                        </div>
+                    </div>
                 </div>
             {% endfor %}
         {% else %}