Reflow config page into responsive grid
This commit is contained in:
Dymas
+127
-112
@@ -280,14 +280,28 @@ CONFIG_HTML = r"""<!doctype html>
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
.settings-main, .deps {
|
||||
width: min(760px, 100%);
|
||||
width: min(1180px, 100%);
|
||||
}
|
||||
.deps {
|
||||
width: min(1180px, 100%);
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.app { grid-template-columns: 1fr; }
|
||||
aside { border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.toolbar, .row { align-items: stretch; flex-direction: column; }
|
||||
}
|
||||
@media (max-width: 1080px) {
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.form-grid, .check-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -320,118 +334,119 @@ CONFIG_HTML = r"""<!doctype html>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Defaults</h2>
|
||||
<p class="muted">Manage the folder, mode, and quality that the Search page starts with.</p>
|
||||
</div>
|
||||
<button class="primary" id="saveConfigBtn" type="button">Save</button>
|
||||
</div>
|
||||
<div class="notice" id="notice"></div>
|
||||
<div class="stack">
|
||||
<label>Default folder
|
||||
<input id="downloadDir" placeholder="/home/me/Downloads/Anime">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Default mode
|
||||
<select id="configMode">
|
||||
<option value="sub">Subtitled (Sub)</option>
|
||||
<option value="dub">Dubbed (Dub)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default quality
|
||||
<select id="configQuality">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">Tip: these are the saved defaults only. The active search form can still be adjusted per download.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Watchlist schedule</h2>
|
||||
<p class="muted">Periodically queue a background watchlist refresh to check for newly available episodes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Automatic refresh
|
||||
<select id="watchlistAutoRefreshEnabled">
|
||||
<option value="false">Disabled</option>
|
||||
<option value="true">Enabled</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Refresh period (minutes)
|
||||
<input id="watchlistAutoRefreshMinutes" type="number" min="1" max="10080" step="1" value="60">
|
||||
</label>
|
||||
<label>Delay between series (seconds)
|
||||
<input id="watchlistRefreshDelaySeconds" type="number" min="0" max="300" step="1" value="5">
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">When enabled, the server periodically starts the existing background “Refresh All” job using this interval. Bulk refreshes now wait this many seconds between shows to avoid flooding upstream sources.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Auto-download</h2>
|
||||
<p class="muted">Automatically queue newly discovered episodes for shows in the `Watching` category after manual or scheduled refreshes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Automatic queueing
|
||||
<select id="autoDownloadEnabled">
|
||||
<option value="false">Disabled</option>
|
||||
<option value="true">Enabled</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default language
|
||||
<select id="autoDownloadMode">
|
||||
<option value="dub">Dubbed (Dub)</option>
|
||||
<option value="sub">Subtitled (Sub)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default quality
|
||||
<select id="autoDownloadQuality">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">Adding a new watchlist entry does not auto-download anything. Auto-download only reacts to later manual refreshes or scheduled refreshes that find new episodes.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Discord notifications</h2>
|
||||
<p class="muted">Send webhook notifications for refresh discoveries, refresh problems, and unexpected runtime errors.</p>
|
||||
</div>
|
||||
<button id="testWebhookBtn" type="button">Test webhook</button>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<label>Discord webhook URL
|
||||
<textarea id="discordWebhookUrl" placeholder="https://discord.com/api/webhooks/..."></textarea>
|
||||
</label>
|
||||
<div class="field-hint">The new-episodes notification includes one card per anime, with local cached thumbnails attached to the webhook when available.</div>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<label>Notify for</label>
|
||||
<div class="check-grid">
|
||||
""" + WEBHOOK_EVENT_OPTIONS + r"""
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="deps" id="deps"></section>
|
||||
<div class="notice" id="notice"></div>
|
||||
<div class="settings-grid">
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Defaults</h2>
|
||||
<p class="muted">Manage the folder, mode, and quality that the Search page starts with.</p>
|
||||
</div>
|
||||
<button class="primary" id="saveConfigBtn" type="button">Save</button>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<label>Default folder
|
||||
<input id="downloadDir" placeholder="/home/me/Downloads/Anime">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Default mode
|
||||
<select id="configMode">
|
||||
<option value="sub">Subtitled (Sub)</option>
|
||||
<option value="dub">Dubbed (Dub)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default quality
|
||||
<select id="configQuality">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">Tip: these are the saved defaults only. The active search form can still be adjusted per download.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Watchlist schedule</h2>
|
||||
<p class="muted">Periodically queue a background watchlist refresh to check for newly available episodes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Automatic refresh
|
||||
<select id="watchlistAutoRefreshEnabled">
|
||||
<option value="false">Disabled</option>
|
||||
<option value="true">Enabled</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Refresh period (minutes)
|
||||
<input id="watchlistAutoRefreshMinutes" type="number" min="1" max="10080" step="1" value="60">
|
||||
</label>
|
||||
<label>Delay between series (seconds)
|
||||
<input id="watchlistRefreshDelaySeconds" type="number" min="0" max="300" step="1" value="5">
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">When enabled, the server periodically starts the existing background “Refresh All” job using this interval. Bulk refreshes now wait this many seconds between shows to avoid flooding upstream sources.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Auto-download</h2>
|
||||
<p class="muted">Automatically queue newly discovered episodes for shows in the `Watching` category after manual or scheduled refreshes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<label>Automatic queueing
|
||||
<select id="autoDownloadEnabled">
|
||||
<option value="false">Disabled</option>
|
||||
<option value="true">Enabled</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default language
|
||||
<select id="autoDownloadMode">
|
||||
<option value="dub">Dubbed (Dub)</option>
|
||||
<option value="sub">Subtitled (Sub)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Default quality
|
||||
<select id="autoDownloadQuality">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-hint">Adding a new watchlist entry does not auto-download anything. Auto-download only reacts to later manual refreshes or scheduled refreshes that find new episodes.</div>
|
||||
</section>
|
||||
|
||||
<section class="settings settings-main">
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<h2>Discord notifications</h2>
|
||||
<p class="muted">Send webhook notifications for refresh discoveries, refresh problems, and unexpected runtime errors.</p>
|
||||
</div>
|
||||
<button id="testWebhookBtn" type="button">Test webhook</button>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<label>Discord webhook URL
|
||||
<textarea id="discordWebhookUrl" placeholder="https://discord.com/api/webhooks/..."></textarea>
|
||||
</label>
|
||||
<div class="field-hint">The new-episodes notification includes one card per anime, with local cached thumbnails attached to the webhook when available.</div>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<label>Notify for</label>
|
||||
<div class="check-grid">
|
||||
""" + WEBHOOK_EVENT_OPTIONS + r"""
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user