ux improve

app/templates/items/form.html

@@ -1,32 +1,65 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="breadcrumb">
+    <a href="/boxes">箱子</a>
+    <span>/</span>
+    <a href="/boxes/{{ box.id }}">{{ box.name }}</a>
+    <span>/</span>
+    <strong>{{ "新建 Item" if not item else "编辑 Item" }}</strong>
+</div>
 <div class="page-header">
     <div>
+        <div class="type-tag {{ 'type-container' if item and item.is_container else 'type-item' }}">
+            {{ "容器型 Item" if item and item.is_container else "Item" }}
+        </div>
         <h1>{{ page_title }}</h1>
         <p class="muted">所属箱子：<a href="/boxes/{{ box.id }}">{{ box.name }}</a></p>
+        <p class="muted">
+            {% if item %}
+            你当前正在编辑这个物品，并可决定它是否是一个小容器。
+            {% else %}
+            你当前正在往这个箱子里添加一个 Item，可选择它是普通物品还是小容器。
+            {% endif %}
+        </p>
     </div>
     <a href="/boxes/{{ box.id }}">返回箱子</a>
 </div>
 
-<form method="post" action="{{ form_action }}" class="stack" enctype="multipart/form-data">
-    <label>
+<form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
+    <section class="context-panel">
+        <div class="context-title">当前上下文</div>
+        <div class="context-body">
+            <span class="type-tag type-box">Box</span>
+            <span>{{ box.name }}</span>
+        </div>
+        <div class="context-body">
+            <span class="type-tag {{ 'type-container' if item and item.is_container else 'type-item' }}">
+                {{ "容器型 Item" if item and item.is_container else "Item" }}
+            </span>
+            <span>{{ "创建新的二级物品" if not item else "编辑当前二级物品" }}</span>
+        </div>
+    </section>
+    <label class="form-field">
         名称
-        <input type="text" name="name" value="{{ item.name if item else '' }}" required>
+        <input type="text" name="name" value="{{ item.name if item else '' }}" required autofocus>
     </label>
-    <label>
+    <label class="form-field">
         数量
-        <input type="number" name="quantity" min="0" value="{{ item.quantity if item and item.quantity is not none else '' }}">
+        <input type="number" name="quantity" min="0" value="{{ item.quantity if item and item.quantity is not none else '1' }}">
     </label>
     <label class="checkbox-row">
         <input type="checkbox" name="is_container" {% if item and item.is_container %}checked{% endif %}>
         这个物品本身是一个小容器
     </label>
-    <label>
+    <div class="checkbox-help">
+        勾选后，这个 Item 将作为“第二层容器”，后续可以继续往里面添加最后一级的 SubItem。
+    </div>
+    <label class="form-field">
         备注
         <textarea name="note" rows="4">{{ item.note if item and item.note else '' }}</textarea>
     </label>
-    <label>
+    <label class="form-field">
         图片
         <input type="file" name="image_file" accept="image/*">
     </label>

app/templates/items/show.html

@@ -1,8 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="breadcrumb">
+    <a href="/boxes">箱子</a>
+    <span>/</span>
+    <a href="/boxes/{{ item.box.id }}">{{ item.box.name }}</a>
+    <span>/</span>
+    <strong>{{ item.name }}</strong>
+</div>
 <div class="page-header">
     <div>
+        <div class="type-tag {{ 'type-container' if item.is_container else 'type-item' }}">
+            {{ "容器型 Item" if item.is_container else "Item" }}
+        </div>
         <h1>{{ item.name }}</h1>
         <p class="muted">位于箱子 <a href="/boxes/{{ item.box.id }}">{{ item.box.name }}</a> 中</p>
     </div>
@@ -34,15 +44,24 @@
         <a class="button" href="/items/{{ item.id }}/subitems/new">添加子物品</a>
     </div>
     {% if item.subitems %}
+        <div class="dense-list">
         {% for subitem in item.subitems %}
-        <article class="card">
+        <article class="compact-row compact-row-subitem">
             {% if subitem.image_blob %}
-            <img src="/subitems/{{ subitem.id }}/image" alt="{{ subitem.name }}" class="thumb-image">
+            <img src="/subitems/{{ subitem.id }}/image" alt="{{ subitem.name }}" class="thumb-image compact-thumb">
             {% endif %}
-            <h3>{{ subitem.name }}</h3>
-            {% if subitem.quantity is not none %}<p><strong>数量：</strong> {{ subitem.quantity }}</p>{% endif %}
-            {% if subitem.note %}<p><strong>备注：</strong> {{ subitem.note }}</p>{% endif %}
-            <div class="actions">
+            <div class="compact-main">
+                <div class="row-title-line">
+                    <span class="type-tag type-subitem">SubItem</span>
+                    <h3>{{ subitem.name }}</h3>
+                </div>
+                <div class="row-meta-grid">
+                    <span>数量：{{ subitem.quantity if subitem.quantity is not none else 1 }}</span>
+                    <span>上级容器：{{ item.name }}</span>
+                </div>
+                {% if subitem.note %}<p class="row-note">备注：{{ subitem.note }}</p>{% endif %}
+            </div>
+            <div class="row-actions">
                 <a href="/subitems/{{ subitem.id }}/edit">编辑</a>
                 <form method="post" action="/subitems/{{ subitem.id }}/delete">
                     <button type="submit" class="link-button">删除</button>
@@ -50,6 +69,7 @@
             </div>
         </article>
         {% endfor %}
+        </div>
     {% else %}
     <section class="card">
         <p>还没有子物品。</p>