Skip to content

admin: responsive UI for phones, tablets and ultrawide - #115

Merged
Postlog merged 1 commit into
mainfrom
feat/responsive-admin
Jun 20, 2026
Merged

admin: responsive UI for phones, tablets and ultrawide#115
Postlog merged 1 commit into
mainfrom
feat/responsive-admin

Conversation

@Postlog

@Postlog Postlog commented Jun 17, 2026

Copy link
Copy Markdown
Owner

Makes the admin panel usable on every screen size — mini-phones (320px) → phones → tablets → laptops → desktops → ultrawide. Almost all of it is static (internal/handlers/web/static/{app.css,app.js,index.html}); the only Go change is a one-line dev tweak (see "Dev" below). Desktop (≥992px) is visually unchanged. Rebased onto the current main (English UI #117 + the subscription-links popup #116); the new sublinks modal reuses the generic responsive modal.

What changed

  • Navbar collapses into a hamburger below lg (992px): an animated toggle + a full-width collapsible menu. The tabs moved from <a> (no href, unreachable by keyboard) to <button> + a :focus-visible ring.
  • Users/Nodes tables turn into cards with data-label rows below 992px (two-up on tablets via CSS-grid; the table returns at ≥992px). The user description shows inline on the card (not a floating gray tooltip), and Bootstrap's row-hover cell tint (an inset box-shadow that lit the card title block) is dropped on cards.
  • Config constructors and rule/group/sub-rule rows stack below 768px; the orphaned delete is right-aligned.
  • Touch: bigger tap targets on pointer:coarse; inputs keep their normal size (no 16px iOS-no-zoom bump — it blew the dense config selects/inputs out of proportion). Hover popovers open on tap (:focus-within + tabindex).
  • Modals become a flex column that scrolls only the body — header/footer stay pinned even on a short landscape screen (max-height + dvh with a vh fallback).
  • Monaco (base-YAML) no longer traps page scroll on touch.
  • Ultrawide: the container widens (≥1600px → 1320px, ≥2200px → 1560px).
  • Dev: render.go serves the live SUBGEN_STATIC_DIR assets with Cache-Control: no-cache, so an edited CSS/JS shows on a plain reload (heuristic caching otherwise served a stale asset for minutes — defeating the live-edit feature).

Verification

Driven with a real browser at 320 / 360 / 500 / 768 / 850 / 1024 / 1280 / 1600px (all tabs, modals incl. the subscription-links popup, login, plus a real :hover on the cards) — no horizontal overflow, no desktop regression. make all is green (build + vet + lint 0 issues + unit -race + integration + apitest). The Cyrillic guard (grep -rI '[А-Яа-я]') stays clean.

Commit authored by the bot postlog-vibecoder; the PR is opened under Postlog because the bot is currently rate-limited (spam mute). Awaiting a reviewer approval before merge.

🤖 Generated with Claude Code

@Postlog
Postlog force-pushed the feat/responsive-admin branch 2 times, most recently from b216705 to 2ceeb8d Compare June 18, 2026 17:03
@Postlog Postlog changed the title admin: адаптивная вёрстка под мобильные/планшеты/ultrawide admin: responsive UI for phones, tablets and ultrawide Jun 18, 2026
@Postlog
Postlog force-pushed the feat/responsive-admin branch 4 times, most recently from a91ad27 to 8147ba6 Compare June 19, 2026 10:27
Make the admin panel usable on every screen — mini-phones (320px) through
ultrawide. Mostly static (app.css/app.js/index.html), plus a one-line dev-only
tweak so the live SUBGEN_STATIC_DIR assets actually reload. The desktop
(>=992px) is visually unchanged.

- navbar collapses into a hamburger below lg (992px): an animated toggle + a
  full-width collapsible menu; the tabs became <button> (keyboard-operable).
- Users/Nodes tables turn into data-label cards below 992px (two-up on tablets
  via CSS-grid; the table returns at >=992px). The user description shows inline
  on a card instead of a floating gray tooltip, and Bootstrap's row-hover cell
  tint (an inset box-shadow that lit the card title block) is dropped on cards.
- config constructors and rule/group/sub-rule rows stack below 768px.
- bigger tap targets on touch (pointer:coarse); inputs keep their normal size
  (no 16px bump — it blew the dense config selects/inputs out of proportion).
- hover popovers open on tap (:focus-within); modals scroll their body only
  (header/footer pinned); Monaco no longer traps page scroll; the container
  widens on ultrawide.
- render.go: serve dev SUBGEN_STATIC_DIR assets with Cache-Control: no-cache so
  an edited CSS/JS shows on a plain reload (heuristic caching otherwise served a
  stale asset for minutes, defeating the live-edit feature).

Verified with a real browser at 320/360/500/768/850/1024/1280/1600px (no
horizontal overflow, no desktop regression); make all is green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Postlog
Postlog force-pushed the feat/responsive-admin branch from 8147ba6 to cd2734f Compare June 19, 2026 11:12
@Postlog
Postlog merged commit 3e0b599 into main Jun 20, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants