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

fix(ui): upload button text cut off on mobile, use flex shrink for file input

Browse Source
This commit is contained in:
Zichao Lin
2026-07-05 21:08:10 +08:00
parent 282763e7d8
commit c42d371e08
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/style.css
View File

@@ -130,7 +130,7 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.detail-img { width: 100%; max-width: 400px; border-radius: 8px; border: 1px solid var(--border); } .detail-img { width: 100%; max-width: 400px; border-radius: 8px; border: 1px solid var(--border); }
.detail-img.placeholder { display: flex; align-items: center; justify-content: center; height: 200px; background: var(--bg); color: var(--text-muted); font-size: .95rem; } .detail-img.placeholder { display: flex; align-items: center; justify-content: center; height: 200px; background: var(--bg); color: var(--text-muted); font-size: .95rem; }
.upload-form { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; } .upload-form { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; }
.upload-form input[type="file"] { font-size: .85rem; min-width: 0; max-width: 260px; } .upload-form input[type="file"] { font-size: .85rem; min-width: 0; flex: 1; }
.upload-form .btn { white-space: nowrap; flex-shrink: 0; } .upload-form .btn { white-space: nowrap; flex-shrink: 0; }
.detail-meta dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; } .detail-meta dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.detail-meta dt { font-weight: 600; font-size: .85rem; color: var(--text-muted); } .detail-meta dt { font-weight: 600; font-size: .85rem; color: var(--text-muted); }

17
app/templates/postcard_form.html
View File

@@ -17,11 +17,11 @@
<div id="fields-sent-delivered"> <div id="fields-sent-delivered">
<label>收件人 *</label> <label>收件人 *</label>
<input type="text" name="recipient_name" value="{{ postcard.recipient_name if postcard else '' }}" required> <input type="text" name="recipient_name" id="input-recipient" value="{{ postcard.recipient_name if postcard else '' }}">
<label>国家/地区 *</label> <label>国家/地区 *</label>
<input type="text" name="country" value="{{ postcard.country if postcard else '' }}" required maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase"> <input type="text" name="country" id="input-country" value="{{ postcard.country if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase">
<label>寄出时间 *</label> <label>寄出时间 *</label>
<input type="date" name="send_time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}" required> <input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
<label id="label-arrival">到达时间</label> <label id="label-arrival">到达时间</label>
<input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}"> <input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}">
</div> </div>
@@ -43,6 +43,9 @@ function toggleFields() {
var s = document.getElementById('status-select').value; var s = document.getElementById('status-select').value;
var sd = document.getElementById('fields-sent-delivered'); var sd = document.getElementById('fields-sent-delivered');
var rc = document.getElementById('fields-received'); var rc = document.getElementById('fields-received');
var recipient = document.getElementById('input-recipient');
var country = document.getElementById('input-country');
var sendTime = document.getElementById('input-send-time');
var arrival = document.getElementById('input-arrival'); var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival'); var labelArrival = document.getElementById('label-arrival');
var sender = document.getElementById('input-sender'); var sender = document.getElementById('input-sender');
@@ -50,12 +53,18 @@ function toggleFields() {
if (s === 'received') { if (s === 'received') {
sd.style.display = 'none'; sd.style.display = 'none';
rc.style.display = ''; rc.style.display = '';
recipient.required = false;
country.required = false;
sendTime.required = false;
arrival.required = false;
sender.required = true; sender.required = true;
receive.required = true; receive.required = true;
arrival.required = false;
} else { } else {
sd.style.display = ''; sd.style.display = '';
rc.style.display = 'none'; rc.style.display = 'none';
recipient.required = true;
country.required = true;
sendTime.required = true;
sender.required = false; sender.required = false;
receive.required = false; receive.required = false;
if (s === 'delivered') { if (s === 'delivered') {