earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve detail page mobile layout - smaller title, compact back button, action buttons in one row

Browse Source
This commit is contained in:
Zichao Lin
2026-07-05 23:15:10 +08:00
parent a4cd204237
commit a502c14c99
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/static/style.css
View File

@@ -218,6 +218,7 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.detail-title-row { display: flex; align-items: center; gap: .75rem; } .detail-title-row { display: flex; align-items: center; gap: .75rem; }
.detail-title-row h1 { margin: 0; } .detail-title-row h1 { margin: 0; }
.btn-back { padding: .35rem .6rem; font-size: 1rem; text-decoration: none; } .btn-back { padding: .35rem .6rem; font-size: 1rem; text-decoration: none; }
.detail-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
/* Filter */ /* Filter */
.filter-bar { margin-bottom: 1.25rem; } .filter-bar { margin-bottom: 1.25rem; }
@@ -241,7 +242,9 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.recent-meta .recent-time { display: inline; } .recent-meta .recent-time { display: inline; }
.recent-item { gap: .5rem; padding: .5rem; } .recent-item { gap: .5rem; padding: .5rem; }
.section-header { flex-direction: column; gap: .75rem; } .section-header { flex-direction: column; gap: .75rem; }
.section-header .btn { width: 100%; } .section-header .btn { width: auto; }
.detail-title-row h1 { font-size: 1.2rem; }
.btn-back { padding: .25rem .5rem; font-size: .85rem; }
.profile-grid { grid-template-columns: 1fr; } .profile-grid { grid-template-columns: 1fr; }
.profile-card-stats { gap: .75rem; flex-wrap: wrap; } .profile-card-stats { gap: .75rem; flex-wrap: wrap; }
} }

2
app/templates/postcard_detail.html
View File

@@ -6,7 +6,7 @@
<a href="/profiles/{{ postcard.profile_id }}/postcards" class="btn btn-back">←</a> <a href="/profiles/{{ postcard.profile_id }}/postcards" class="btn btn-back">←</a>
<h1>{{ postcard.card_number }}</h1> <h1>{{ postcard.card_number }}</h1>
</div> </div>
<div> <div class="detail-actions">
<a href="/postcards/{{ postcard.id }}/edit" class="btn">编辑</a> <a href="/postcards/{{ postcard.id }}/edit" class="btn">编辑</a>
{% if postcard.status == 'sent' %} {% if postcard.status == 'sent' %}
<form method="post" action="/postcards/{{ postcard.id }}/mark-delivered" class="inline"> <form method="post" action="/postcards/{{ postcard.id }}/mark-delivered" class="inline">