Implement showing item details on hover in the storage displays
This commit is contained in:
@@ -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),
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user