From 4f121ebd3922412f7de07596cbe33d0fcef3cfd4 Mon Sep 17 00:00:00 2001
From: Lukas Winkler <git@lw1.at>
Date: Mon, 4 Oct 2021 22:13:24 +0200
Subject: [PATCH] improved loot styling

---
 loot/templates/loot/overview.html | 12 ++++++----
 static/scss/_loot.scss            | 38 +++++++++++++++++++++++++++++++
 static/scss/_misc.scss            | 26 ---------------------
 static/scss/main.scss             |  1 +
 4 files changed, 46 insertions(+), 31 deletions(-)
 create mode 100644 static/scss/_loot.scss

diff --git a/loot/templates/loot/overview.html b/loot/templates/loot/overview.html
index 0a1b868..7db4ee2 100644
--- a/loot/templates/loot/overview.html
+++ b/loot/templates/loot/overview.html
@@ -50,11 +50,13 @@
             <tr>
                 <td colspan="5" class="collapse-cell">
                     <div class="collapse" id="row-{{ l.id }}">
-                        <h3>{{ l.name }} <a href="{% url "lootedit" l.id %}">{% translate "Edit" %}</a></h3>
-                        {{ l.description_html|safe }}
-                        {% if l.value_per_unit %}
-                            <p>{% translate "Value each" %}: {{ l.value_per_unit|format_money_html }}</p>
-                        {% endif %}
+                        <div class="cell-box">
+                            <h3>{{ l.name }} <a href="{% url "lootedit" l.id %}">{% translate "Edit" %}</a></h3>
+                            {{ l.description_html|safe }}
+                            {% if l.value_per_unit %}
+                                <p>{% translate "Value each" %}: {{ l.value_per_unit|format_money_html }}</p>
+                            {% endif %}
+                        </div>
                     </div>
                 </td>
             </tr>
diff --git a/static/scss/_loot.scss b/static/scss/_loot.scss
new file mode 100644
index 0000000..2440cf9
--- /dev/null
+++ b/static/scss/_loot.scss
@@ -0,0 +1,38 @@
+.collapse-cell {
+  padding: 0 !important;
+  border: none !important;
+}
+
+.cell-box {
+  padding: 0.5rem;
+  //border: solid 1px $gray-900;
+}
+
+.chev {
+  transition: transform .2s;
+  width: 13px;
+  height: auto;
+}
+
+tr.collapsed .chev {
+  transform: rotate(90deg);
+}
+
+tr.collapse-button {
+  transition: all .2s;
+
+  &:not(.collapsed) {
+    background: $gray-800;
+    color: white;
+  }
+}
+
+
+tr td:first-child {
+  width: 20px;
+}
+
+svg.icon {
+  width: 16px;
+  height: auto;
+}
diff --git a/static/scss/_misc.scss b/static/scss/_misc.scss
index 190a1e7..2d72e63 100644
--- a/static/scss/_misc.scss
+++ b/static/scss/_misc.scss
@@ -25,24 +25,6 @@ blockquote {
 }
 
 
-.collapse-cell {
-  padding: 0 !important;
-  border: none !important;
-}
-
-.chev {
-  transition: transform .2s;
-  width: 13px;
-  height: auto;
-}
-
-tr.collapsed .chev {
-  transform: rotate(90deg);
-}
-
-tr.collapse-button:not(.collapsed) {
-  background: darkgray;
-}
 
 
 .side-card {
@@ -118,11 +100,3 @@ footer {
   }
 }
 
-tr td:first-child {
-  width: 20px;
-}
-
-svg.icon {
-  width: 16px;
-  height: auto;
-}
diff --git a/static/scss/main.scss b/static/scss/main.scss
index 45b02a1..ac6392e 100644
--- a/static/scss/main.scss
+++ b/static/scss/main.scss
@@ -5,5 +5,6 @@
 
 @import "misc";
 @import "avatar";
+@import "loot";