Improve mobile capture layout
This commit is contained in:
Codex
parent
47ca2b1a50
commit
ee92300e1d
@ -122,6 +122,7 @@ h1 {
|
||||
.offline-panel,
|
||||
.device-panel,
|
||||
.app-settings-panel,
|
||||
.device-settings-panel,
|
||||
.batch-panel,
|
||||
.history-strip,
|
||||
.results {
|
||||
@ -149,6 +150,59 @@ h1 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.device-settings-panel {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.device-settings-panel > summary {
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 0 12px;
|
||||
color: var(--accent);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.device-settings-panel > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-settings-panel > summary::before {
|
||||
content: ">";
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
transition: transform 0.16s ease;
|
||||
}
|
||||
|
||||
.device-settings-panel[open] > summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.device-settings-panel > summary span:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.device-settings-panel .device-panel,
|
||||
.device-settings-panel .app-settings-panel,
|
||||
.device-settings-panel .install-hint,
|
||||
.device-settings-panel .network {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -298,11 +352,15 @@ textarea:focus {
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 118px 92px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#collect-button {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 44px;
|
||||
border: 1px solid var(--accent);
|
||||
@ -332,6 +390,12 @@ button:disabled,
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mobile-status-stack {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.offline-status,
|
||||
.install-hint {
|
||||
background: var(--panel);
|
||||
@ -343,6 +407,10 @@ button:disabled,
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mobile-status-stack .offline-status {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.install-hint {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
@ -726,3 +794,36 @@ button:disabled,
|
||||
padding: 22px 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.mobile-shell {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.setting-actions,
|
||||
.device-panel,
|
||||
.install-hint {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.draft-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.desktop-link,
|
||||
.secondary,
|
||||
button {
|
||||
min-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,33 +18,6 @@
|
||||
<a class="desktop-link" href="/">桌面版</a>
|
||||
</header>
|
||||
|
||||
<section class="device-panel">
|
||||
<label class="field">
|
||||
<span>这台手机/录入人</span>
|
||||
<input id="mobile-device-name" type="text" placeholder="例如：张三手机、商务部手机">
|
||||
</label>
|
||||
<button id="save-device-name-button" class="secondary-button" type="button">保存名称</button>
|
||||
</section>
|
||||
|
||||
<section class="app-settings-panel">
|
||||
<div class="settings-head">
|
||||
<div>
|
||||
<div class="section-title">手机 App 设置</div>
|
||||
<p>绑定电脑或 NAS 地址后，离开局域网再回来也能快速同步。</p>
|
||||
</div>
|
||||
<span id="mobile-app-state" class="app-state">检测中</span>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>电脑 / NAS 地址</span>
|
||||
<input id="mobile-server-url" type="url" placeholder="例如：http://192.168.18.120:3001">
|
||||
</label>
|
||||
<div class="setting-actions">
|
||||
<button id="save-mobile-server-button" class="secondary-button" type="button">保存地址</button>
|
||||
<button id="test-mobile-server-button" class="secondary-button" type="button">测试连接</button>
|
||||
</div>
|
||||
<div id="mobile-binding-summary" class="binding-summary">尚未绑定固定地址，默认使用当前打开页面。</div>
|
||||
</section>
|
||||
|
||||
<form id="collect-form" class="collect-panel">
|
||||
<label class="field">
|
||||
<span>节目名</span>
|
||||
@ -86,27 +59,62 @@
|
||||
<span id="status-text">等待输入节目名</span>
|
||||
</section>
|
||||
|
||||
<section id="offline-status" class="offline-status">
|
||||
<strong>离线录入</strong>
|
||||
<span>首次在局域网打开后，会缓存手机版；之后可离线打开并保存待同步。</span>
|
||||
</section>
|
||||
<div class="mobile-status-stack">
|
||||
<section id="offline-status" class="offline-status">
|
||||
<strong>离线录入</strong>
|
||||
<span>首次在局域网打开后，会缓存手机版；之后可离线打开并保存待同步。</span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="install-hint" class="install-hint">
|
||||
<div>
|
||||
<strong>安装到手机桌面</strong>
|
||||
<span id="install-status">可在手机浏览器菜单中选择“添加到主屏幕”，下次不在局域网也能直接打开录入。</span>
|
||||
</div>
|
||||
<button id="install-app-button" class="secondary-button" type="button" hidden>安装</button>
|
||||
</section>
|
||||
<details class="device-settings-panel">
|
||||
<summary>
|
||||
<span>设备与同步设置</span>
|
||||
<span id="mobile-app-state" class="app-state">检测中</span>
|
||||
</summary>
|
||||
|
||||
<section class="network">
|
||||
<div class="network-title">手机访问地址</div>
|
||||
<div id="network-links">正在读取局域网地址...</div>
|
||||
<details class="network-help">
|
||||
<summary>不在同一 WiFi 怎么办</summary>
|
||||
<p>手机连电脑热点最简单；长期使用可以电脑和手机都装 Tailscale；临时外网访问可以用内网穿透转发 3000 端口。</p>
|
||||
</details>
|
||||
</section>
|
||||
<section class="device-panel">
|
||||
<label class="field">
|
||||
<span>这台手机/录入人</span>
|
||||
<input id="mobile-device-name" type="text" placeholder="例如：张三手机、商务部手机">
|
||||
</label>
|
||||
<button id="save-device-name-button" class="secondary-button" type="button">保存名称</button>
|
||||
</section>
|
||||
|
||||
<section class="app-settings-panel">
|
||||
<div class="settings-head">
|
||||
<div>
|
||||
<div class="section-title">手机 App 设置</div>
|
||||
<p>绑定电脑或 NAS 地址后，离开局域网再回来也能快速同步。</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>电脑 / NAS 地址</span>
|
||||
<input id="mobile-server-url" type="url" placeholder="例如：http://192.168.18.120:3001">
|
||||
</label>
|
||||
<div class="setting-actions">
|
||||
<button id="save-mobile-server-button" class="secondary-button" type="button">保存地址</button>
|
||||
<button id="test-mobile-server-button" class="secondary-button" type="button">测试连接</button>
|
||||
</div>
|
||||
<div id="mobile-binding-summary" class="binding-summary">尚未绑定固定地址，默认使用当前打开页面。</div>
|
||||
</section>
|
||||
|
||||
<section id="install-hint" class="install-hint">
|
||||
<div>
|
||||
<strong>安装到手机桌面</strong>
|
||||
<span id="install-status">可在手机浏览器菜单中选择“添加到主屏幕”，下次不在局域网也能直接打开录入。</span>
|
||||
</div>
|
||||
<button id="install-app-button" class="secondary-button" type="button" hidden>安装</button>
|
||||
</section>
|
||||
|
||||
<section class="network">
|
||||
<div class="network-title">手机访问地址</div>
|
||||
<div id="network-links">正在读取局域网地址...</div>
|
||||
<details class="network-help">
|
||||
<summary>不在同一 WiFi 怎么办</summary>
|
||||
<p>手机连电脑热点最简单；长期使用可以电脑和手机都装 Tailscale；临时外网访问可以用内网穿透转发 3000 端口。</p>
|
||||
</details>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<section class="offline-panel">
|
||||
<div class="offline-head">
|
||||
|
||||
@ -47,3 +47,13 @@ test("mobile app exposes server binding settings for app-like use", () => {
|
||||
assert.match(css, /\.app-settings-panel/);
|
||||
assert.match(css, /\.binding-summary/);
|
||||
});
|
||||
|
||||
test("mobile layout prioritizes quick capture before device settings", () => {
|
||||
assert.ok(html.indexOf('id="collect-form"') < html.indexOf('class="device-settings-panel"'));
|
||||
assert.ok(html.indexOf('id="collect-form"') < html.indexOf('id="mobile-device-name"'));
|
||||
assert.ok(html.indexOf('id="offline-status"') < html.indexOf('id="mobile-server-url"'));
|
||||
assert.match(html, /<details class="device-settings-panel">/);
|
||||
assert.match(css, /\.device-settings-panel/);
|
||||
assert.match(css, /\.mobile-status-stack/);
|
||||
assert.match(css, /#collect-button\s*\{/);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user