Make the items show in a grid

This commit is contained in:
2023-10-28 19:58:39 +02:00
parent 5cca2ef748
commit ad42bba804
3 changed files with 46 additions and 9 deletions

View File

@@ -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);
}

View File

@@ -1,5 +1,5 @@
<div class="item">
<input type="checkbox" name="{{tabloop.index0}}_{{itemloop.index0}}" value="remove" /> ({{tabloop.index0}}, {{itemloop.index0}})
<input type="checkbox" id="{{tabloop.index0}}_{{itemloop.index0}}" name="{{tabloop.index0}}_{{itemloop.index0}}" value="remove" />
<label class="item" for="{{tabloop.index0}}_{{itemloop.index0}}">
<ul>
<li class="name color-{{item.color}}">{{item.name}}</li>
{% if item.quality and item.quality >= 5 %}
@@ -11,4 +11,4 @@
{% endfor %}
{% endif %}
</ul>
</div>
</label>

View File

@@ -8,14 +8,14 @@
<body>
<form action="/stash/{{stash_name}}/store" method="POST">
{% for tab in stash.tabs %}
<div>
{% set tabloop = loop %}
<h2>Tab {{tabloop.index}}</h2>
{% for item in tab.items %}
{% set itemloop = loop %}
{% include "item.html" %}
{% endfor %}
</div>
<div class="stash-tab">
{% for item in tab.items %}
{% set itemloop = loop %}
{% include "item.html" %}
{% endfor %}
</div>
{% endfor %}
<input type="submit" value="Remove items">
</form>