Implement showing item details on hover in the storage displays

d2warehouse/app/main.py

@@ -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),
     )
 
 

d2warehouse/app/static/style.css

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

d2warehouse/app/templates/item.html

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

d2warehouse/app/templates/list_stash.html

@@ -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 %}

d2warehouse/app/templates/list_storage.html

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