From 13f76fceb1bd048c0de95d0989994c2465535f26 Mon Sep 17 00:00:00 2001 From: 4gray Date: Thu, 30 Jul 2026 01:27:14 +0200 Subject: [PATCH] docs(ui): document narrow channel row priority --- .changes/ui-narrow-channel-epg.md | 7 +++++++ docs/architecture/iptvnator-ui-guidelines.md | 16 ++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 .changes/ui-narrow-channel-epg.md diff --git a/.changes/ui-narrow-channel-epg.md b/.changes/ui-narrow-channel-epg.md new file mode 100644 index 000000000..52e05c173 --- /dev/null +++ b/.changes/ui-narrow-channel-epg.md @@ -0,0 +1,7 @@ +--- +type: fix +area: ui +--- + +Narrow EPG channel rows now keep the current programme, progress, and enabled +channel actions visible instead of dropping useful context. diff --git a/docs/architecture/iptvnator-ui-guidelines.md b/docs/architecture/iptvnator-ui-guidelines.md index 519f2f60a..a4d24adaf 100644 --- a/docs/architecture/iptvnator-ui-guidelines.md +++ b/docs/architecture/iptvnator-ui-guidelines.md @@ -135,6 +135,22 @@ The shared row should be reused instead of rebuilding channel markup per view. start time, progress bar, end time - Action buttons sit on the trailing edge and inherit row color +### Responsive Information Priority + +- EPG-enabled, noncompact rows keep a fixed `68px` height that matches the + virtual-scroll stride. EPG-disabled, compact rows retain their existing + `52px` minimum height. +- At `310px` and below, hide the end time while keeping the start time and + progress bar. +- At `270px` and below, hide the decorative logo while retaining program + context and actions, and tighten horizontal padding to preserve the remaining + content. +- At `220px` and below, hide the start time while keeping the progress bar. +- Narrow width alone must not remove the channel name, program title or + no-program placeholder, progress bar, drag affordance when applicable, or + enabled actions. +- Loading skeletons mirror the same responsive hierarchy and row geometry. + ### Logo Rules - Show fallback icon only when no image is available or image loading fails