From ad42bba8044ed23afdbb95f661aa57c6f87a6a9d Mon Sep 17 00:00:00 2001 From: omicron Date: Sat, 28 Oct 2023 19:58:39 +0200 Subject: [PATCH] Make the items show in a grid --- d2warehouse/app/static/style.css | 37 +++++++++++++++++++++++ d2warehouse/app/templates/item.html | 6 ++-- d2warehouse/app/templates/list_stash.html | 12 ++++---- 3 files changed, 46 insertions(+), 9 deletions(-) diff --git a/d2warehouse/app/static/style.css b/d2warehouse/app/static/style.css index 1eeaeaf..ab19ad0 100644 --- a/d2warehouse/app/static/style.css +++ b/d2warehouse/app/static/style.css @@ -5,12 +5,48 @@ body { color: rgb(240, 240, 240); } +.stash-tab { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 10px; + margin: 0 auto; +} + +@media (max-width: 1600px) { + .stash-tab { + grid-template-columns: repeat(4, 1fr); + } +} + +@media (max-width: 1200px) { + .stash-tab { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 800px) { + .stash-tab { + grid-template-columns: repeat(2, 1fr); + } +} + +.stash-tab input[type="checkbox"] { + display: none; +} + .item .name { font-weight: bold; } .item { + display: block; background-color: #444; + border: solid #555; +} + +input[type="checkbox"]:checked + label { + background-color: #343; + border: solid #464; } .color-rare { @@ -28,3 +64,4 @@ body { .color-runeword { color: rgb(199, 179, 119); } + diff --git a/d2warehouse/app/templates/item.html b/d2warehouse/app/templates/item.html index 20b45c9..22996c1 100644 --- a/d2warehouse/app/templates/item.html +++ b/d2warehouse/app/templates/item.html @@ -1,5 +1,5 @@ -
- ({{tabloop.index0}}, {{itemloop.index0}}) + +
+ diff --git a/d2warehouse/app/templates/list_stash.html b/d2warehouse/app/templates/list_stash.html index 5eec266..e6dbccc 100644 --- a/d2warehouse/app/templates/list_stash.html +++ b/d2warehouse/app/templates/list_stash.html @@ -8,14 +8,14 @@
{% for tab in stash.tabs %} -
{% set tabloop = loop %}

Tab {{tabloop.index}}

- {% for item in tab.items %} - {% set itemloop = loop %} - {% include "item.html" %} - {% endfor %} -
+
+ {% for item in tab.items %} + {% set itemloop = loop %} + {% include "item.html" %} + {% endfor %} +
{% endfor %}