Implement showing item details on hover in the storage displays

This commit is contained in:
2025-09-26 22:54:06 +02:00
parent 85003665c9
commit bd96f1e0ac
5 changed files with 51 additions and 22 deletions

View File

@@ -222,7 +222,10 @@ def list_storage(stash_name: str):
items[row["id"]] = Item.load_from_db(row["id"], db=db)
return render_template(
"list_storage.html", stash_name=stash_name, storage_items=items
"list_storage.html",
stash_name=stash_name,
storage_items=items,
storage_count=lambda x: storage_count(x, stash_name),
)
@@ -254,7 +257,10 @@ def list_storage_category(stash_name: str, category: str):
items[row["id"]] = Item.load_from_db(row["id"], db=db)
return render_template(
"list_storage.html", stash_name=stash_name, storage_items=items
"list_storage.html",
stash_name=stash_name,
storage_items=items,
storage_count=lambda x: storage_count(x, stash_name),
)

View File

@@ -47,6 +47,27 @@ body {
display: none;
}
.storage-item-entry {
position: relative;
width: fit-content;
}
.item-hover {
display: none;
position: absolute;
left: 0;
top: 30px;
z-index: 1000;
background: #222;
border: 1px solid #555;
padding: 8px;
min-width: 300px;
}
.storage-item-entry:hover .item-hover {
display: block;
}
.item .name {
font-weight: bold;
}

View File

@@ -1,16 +1,13 @@
<input type="checkbox" id="item_{{tabloop.index0}}_{{itemloop.index0}}" name="item_{{tabloop.index0}}_{{itemloop.index0}}" value="remove" />
<label class="item" for="item_{{tabloop.index0}}_{{itemloop.index0}}">
<ul>
<li class="name color-{{item.color}}">{{item.name}}</li>
{% if item.quality and item.quality >= 5 %}
<li class="name color-{{item.color}}">{{item.basename}}</li>
{% endif %}
<li>(in storage: {{storage_count(item)}})</li>
{% if item.stats %}
{% for stat in item.stats %}
<li>{{stat}}</li>
{% endfor %}
{% endif %}
<li><input class="raw-item" type="text" name="raw item" value="{{item.raw().hex()}}" onfocus="this.select()" readonly></li>
</ul>
</label>
<ul>
<li class="name color-{{item.color}}">{{item.name}}</li>
{% if item.quality and item.quality >= 5 %}
<li class="name color-{{item.color}}">{{item.basename}}</li>
{% endif %}
<li>(in storage: {{storage_count(item)}})</li>
{% if item.stats %}
{% for stat in item.stats %}
<li>{{stat}}</li>
{% endfor %}
{% endif %}
<li><input class="raw-item" type="text" name="raw item" value="{{item.raw().hex()}}" onfocus="this.select()" readonly></li>
</ul>

View File

@@ -14,7 +14,10 @@
<div class="stash-tab" data-tab="{{tabloop.index}}">
{% for item in tab.items %}
{% set itemloop = loop %}
<input type="checkbox" id="item_{{tabloop.index0}}_{{itemloop.index0}}" name="item_{{tabloop.index0}}_{{itemloop.index0}}" value="remove" />
<label class="item" for="item_{{tabloop.index0}}_{{itemloop.index0}}">
{% include "item.html" %}
</label>
{% endfor %}
</div>
{% endfor %}

View File

@@ -10,10 +10,12 @@
<div>
<!-- TODO: Include item.html -->
{% for db_id, item in storage_items.items() %}
<div>
<input type="checkbox" name="item_{{db_id}}" value="take" />
{{item.name}}
({{db_id}})
<div class="storage-item-entry">
<input type="checkbox" name="item_{{db_id}}" id="item_{{db_id}}" value="take" />
<label for="item_{{db_id}}">{{item.name}} ({{db_id}})</label>
<div class="item-hover">
{% include "item.html" %}
</div>
</div>
{% endfor %}
</div>