ux improve
This commit is contained in:
@@ -1,29 +1,51 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="breadcrumb">
|
||||
<a href="/boxes">箱子</a>
|
||||
<span>/</span>
|
||||
<strong>{{ "新建 Box" if not box else "编辑 Box" }}</strong>
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<h1>{{ page_title }}</h1>
|
||||
<div>
|
||||
<div class="type-tag type-box">Box</div>
|
||||
<h1>{{ page_title }}</h1>
|
||||
<p class="muted">
|
||||
{% if box %}
|
||||
你当前正在编辑一个顶层箱子。
|
||||
{% else %}
|
||||
你当前正在创建一个新的顶层箱子。
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<a href="/boxes">返回箱子列表</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>{{ "创建顶层箱子" if not box else "编辑顶层箱子" }}</span>
|
||||
</div>
|
||||
</section>
|
||||
<label class="form-field">
|
||||
名称
|
||||
<input type="text" name="name" value="{{ box.name if box else '' }}" required>
|
||||
<input type="text" name="name" value="{{ box.name if box else '' }}" required autofocus>
|
||||
</label>
|
||||
<label>
|
||||
<label class="form-field">
|
||||
房间
|
||||
<input type="text" name="room" value="{{ box.room if box and box.room else '' }}">
|
||||
</label>
|
||||
<label>
|
||||
<label class="form-field">
|
||||
状态
|
||||
<input type="text" name="status" value="{{ box.status if box and box.status else '' }}">
|
||||
</label>
|
||||
<label>
|
||||
<label class="form-field">
|
||||
备注
|
||||
<textarea name="note" rows="4">{{ box.note if box and box.note else '' }}</textarea>
|
||||
</label>
|
||||
<label>
|
||||
<label class="form-field">
|
||||
图片
|
||||
<input type="file" name="image_file" accept="image/*">
|
||||
</label>
|
||||
|
||||
@@ -1,24 +1,37 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="breadcrumb">
|
||||
<span>首页</span>
|
||||
<span>/</span>
|
||||
<strong>箱子</strong>
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>箱子</h1>
|
||||
<div class="type-tag type-box">Box</div>
|
||||
<h1>箱子总览</h1>
|
||||
<p class="muted">这里管理顶层搬家容器，例如纸箱、行李箱或大收纳箱。</p>
|
||||
</div>
|
||||
<a class="button" href="/boxes/new">新建箱子</a>
|
||||
</div>
|
||||
|
||||
{% if boxes %}
|
||||
<div class="stack">
|
||||
<div class="dense-list">
|
||||
{% for box in boxes %}
|
||||
<section class="card">
|
||||
<h2><a href="/boxes/{{ box.id }}">{{ box.name }}</a></h2>
|
||||
<p class="meta">物品数：{{ box.items|length }}</p>
|
||||
{% if box.room %}<p>房间：{{ box.room }}</p>{% endif %}
|
||||
{% if box.status %}<p>状态：{{ box.status }}</p>{% endif %}
|
||||
{% if box.note %}<p>{{ box.note }}</p>{% endif %}
|
||||
<div class="actions">
|
||||
<section class="compact-row compact-row-box">
|
||||
<div class="compact-main">
|
||||
<div class="row-title-line">
|
||||
<span class="type-tag type-box">Box</span>
|
||||
<h2><a href="/boxes/{{ box.id }}">{{ box.name }}</a></h2>
|
||||
</div>
|
||||
<div class="row-meta-grid">
|
||||
<span>物品数：{{ box.items|length }}</span>
|
||||
<span>房间：{{ box.room or '-' }}</span>
|
||||
<span>状态：{{ box.status or '-' }}</span>
|
||||
</div>
|
||||
{% if box.note %}<p class="row-note">{{ box.note }}</p>{% endif %}
|
||||
</div>
|
||||
<div class="row-actions">
|
||||
<a href="/boxes/{{ box.id }}">查看详情</a>
|
||||
<a href="/boxes/{{ box.id }}/edit">编辑</a>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="breadcrumb">
|
||||
<a href="/boxes">箱子</a>
|
||||
<span>/</span>
|
||||
<strong>{{ box.name }}</strong>
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="type-tag type-box">Box</div>
|
||||
<h1>{{ box.name }}</h1>
|
||||
<p class="muted">查看这个箱子的基本信息，以及它下面的直接物品。</p>
|
||||
</div>
|
||||
@@ -31,16 +37,26 @@
|
||||
<section class="stack">
|
||||
<h2>物品</h2>
|
||||
{% if box.items %}
|
||||
<div class="dense-list">
|
||||
{% for item in box.items %}
|
||||
<article class="card">
|
||||
<article class="compact-row {{ 'compact-row-container' if item.is_container else 'compact-row-item' }}">
|
||||
{% if item.image_blob %}
|
||||
<img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image">
|
||||
<img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image compact-thumb">
|
||||
{% endif %}
|
||||
<h3><a href="/items/{{ item.id }}">{{ item.name }}</a></h3>
|
||||
<p><strong>是否容器：</strong> {{ "是" if item.is_container else "否" }}</p>
|
||||
{% if item.quantity is not none %}<p><strong>数量：</strong> {{ item.quantity }}</p>{% endif %}
|
||||
{% if item.note %}<p><strong>备注：</strong> {{ item.note }}</p>{% endif %}
|
||||
<div class="actions">
|
||||
<div class="compact-main">
|
||||
<div class="row-title-line">
|
||||
<span class="type-tag {{ 'type-container' if item.is_container else 'type-item' }}">
|
||||
{{ "容器型 Item" if item.is_container else "Item" }}
|
||||
</span>
|
||||
<h3><a href="/items/{{ item.id }}">{{ item.name }}</a></h3>
|
||||
</div>
|
||||
<div class="row-meta-grid">
|
||||
<span>数量：{{ item.quantity if item.quantity is not none else 1 }}</span>
|
||||
<span>是否容器：{{ "是" if item.is_container else "否" }}</span>
|
||||
</div>
|
||||
{% if item.note %}<p class="row-note">{{ item.note }}</p>{% endif %}
|
||||
</div>
|
||||
<div class="row-actions">
|
||||
<a href="/items/{{ item.id }}">查看详情</a>
|
||||
<a href="/items/{{ item.id }}/edit">编辑</a>
|
||||
{% if item.is_container %}
|
||||
@@ -52,6 +68,7 @@
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<section class="card">
|
||||
<p>这个箱子里还没有物品。</p>
|
||||
|
||||
Reference in New Issue
Block a user