Dymas/ani-cli-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reflow config page into responsive grid

Browse Source
This commit is contained in:
Dymas
2026-05-25 10:40:30 +02:00
parent 1b887269da
commit 58f96cb6dd
6 changed files with 144 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+4
View File
@@ -1,5 +1,9 @@
# Changelog # Changelog
## 0.40.5 - 2026-05-25
- Moved the Config page `Dependencies` panel to the top as a full-width card and changed the remaining settings panels to a two-column layout that collapses back to one column at `1080px` and below.
## 0.40.4 - 2026-05-25 ## 0.40.4 - 2026-05-25
- Widened the watchlist auto-download modal layout so `Name source` and `Name` each fill half of the dialog row instead of staying in narrow grid cells. - Widened the watchlist auto-download modal layout so `Name source` and `Name` each fill half of the dialog row instead of staying in narrow grid cells.
README.md
+5
View File
@@ -187,6 +187,11 @@ Use it to set:
9. Discord webhook URL. 9. Discord webhook URL.
10. Discord notification events plus a test action. 10. Discord notification events plus a test action.
Layout:
- `Dependencies` stays at the top as a full-width runtime status card.
- The remaining Config sections use two columns on larger screens and collapse to one column at `1080px` width and below.
Saved settings are written to `.ani-cli-web/config.json`. Saved settings are written to `.ani-cli-web/config.json`.
Discord notification events: Discord notification events:
VERSION
+1 -1
View File
@@ -1 +1 @@
0.40.4 0.40.5
app_support.py
+1 -1
View File
@@ -19,7 +19,7 @@ from uuid import uuid4
PROJECT_ROOT = Path(__file__).resolve().parent PROJECT_ROOT = Path(__file__).resolve().parent
ANI_CLI = os.environ.get("ANI_CLI_BIN") or shutil.which("ani-cli") or "ani-cli" ANI_CLI = os.environ.get("ANI_CLI_BIN") or shutil.which("ani-cli") or "ani-cli"
APP_NAME = "ani-cli-web" APP_NAME = "ani-cli-web"
VERSION = "0.40.4" VERSION = "0.40.5"
ALLANIME_BASE = "allanime.day" ALLANIME_BASE = "allanime.day"
ALLANIME_API = f"https://api.{ALLANIME_BASE}" ALLANIME_API = f"https://api.{ALLANIME_BASE}"
ALLANIME_REFERER = "https://allmanga.to" ALLANIME_REFERER = "https://allmanga.to"
config_page.py
+19 -4
View File
@@ -280,14 +280,28 @@ CONFIG_HTML = r"""<!doctype html>
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
.settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
.settings-main, .deps { .settings-main, .deps {
width: min(760px, 100%); width: min(1180px, 100%);
}
.deps {
width: min(1180px, 100%);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.app { grid-template-columns: 1fr; } .app { grid-template-columns: 1fr; }
aside { border-right: 0; border-bottom: 1px solid var(--line); } aside { border-right: 0; border-bottom: 1px solid var(--line); }
.toolbar, .row { align-items: stretch; flex-direction: column; } .toolbar, .row { align-items: stretch; flex-direction: column; }
} }
@media (max-width: 1080px) {
.settings-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
.form-grid, .check-grid { .form-grid, .check-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -320,6 +334,9 @@ CONFIG_HTML = r"""<!doctype html>
</aside> </aside>
<main> <main>
<section class="deps" id="deps"></section>
<div class="notice" id="notice"></div>
<div class="settings-grid">
<section class="settings settings-main"> <section class="settings settings-main">
<div class="toolbar"> <div class="toolbar">
<div> <div>
@@ -328,7 +345,6 @@ CONFIG_HTML = r"""<!doctype html>
</div> </div>
<button class="primary" id="saveConfigBtn" type="button">Save</button> <button class="primary" id="saveConfigBtn" type="button">Save</button>
</div> </div>
<div class="notice" id="notice"></div>
<div class="stack"> <div class="stack">
<label>Default folder <label>Default folder
<input id="downloadDir" placeholder="/home/me/Downloads/Anime"> <input id="downloadDir" placeholder="/home/me/Downloads/Anime">
@@ -430,8 +446,7 @@ CONFIG_HTML = r"""<!doctype html>
</div> </div>
</div> </div>
</section> </section>
</div>
<section class="deps" id="deps"></section>
</main> </main>
</div> </div>
test_app.py
+6
View File
@@ -1959,6 +1959,12 @@ class TemplateHelperTests(unittest.TestCase):
self.assertIn("async function api(path, options = {})", APP.CONFIG_HTML) self.assertIn("async function api(path, options = {})", APP.CONFIG_HTML)
self.assertIn("async function api(path, options = {})", APP.WATCHLIST_HTML) self.assertIn("async function api(path, options = {})", APP.WATCHLIST_HTML)
def test_config_page_places_dependencies_before_settings_grid(self):
self.assertIn('<section class="deps" id="deps"></section>', APP.CONFIG_HTML)
self.assertIn('<div class="settings-grid">', APP.CONFIG_HTML)
self.assertLess(APP.CONFIG_HTML.index('<section class="deps" id="deps"></section>'), APP.CONFIG_HTML.index('<div class="settings-grid">'))
self.assertIn("@media (max-width: 1080px)", APP.CONFIG_HTML)
def test_search_page_sends_watchlist_auto_download_series(self): def test_search_page_sends_watchlist_auto_download_series(self):
self.assertIn('auto_download_series: $("seasonInput").value || "1"', APP.INDEX_HTML) self.assertIn('auto_download_series: $("seasonInput").value || "1"', APP.INDEX_HTML)