mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 10:06:15 -08:00
fix(ui): address review — keep the palette reachable and the video visible
Two findings from the Codex review on #1326. Hiding the command-palette trigger on phones removed the only pointer-driven way to open it: the rail renders route links plus Settings and emits nothing, so `commandPaletteRequested` had exactly one source. The button stays and its keyboard-shortcut label is swapped for an icon instead. Doing that exposed a latent flex trap in the same row — an <input> keeps an intrinsic min-width from its `size`, and `min-width: auto` honours it, so the field refused to shrink and pushed the trigger out onto the buttons beside it. The M3U drawer released the shared player floor, which on a short landscape phone (600-640px wide) left the content container at half the shell body. The inline guide inside it is `flex: 0 0 <basis>` and took its full 180px out of a container that no longer had it, so the video could reach zero height. The floor is restored and now yields on short viewports, the video states its own minimum, and the guide is what gives way. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
52d47a5a39
commit
e97414fec6
4 files changed
+55
-6
No files matched your search
@@ -138,8 +138,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Keeps the mixin's player floor rather than releasing it: `height: 50vh`
|
||||
// is a preference, not a reservation, so on a short landscape phone the
|
||||
// drawer could otherwise squeeze the video away entirely.
|
||||
.content-container {
|
||||
height: 50vh;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
@@ -210,10 +210,25 @@
|
||||
|
||||
// The player's floor, not the list's ceiling, is what has to hold: a
|
||||
// phone shows the categories panel above this layout too, and without
|
||||
// a stated minimum the video ends up a sliver under two lists.
|
||||
// a stated minimum the video ends up a sliver under two lists. The
|
||||
// floor yields on a landscape phone, where 240px is most of the shell
|
||||
// body and claiming it would starve the list instead.
|
||||
.content-container {
|
||||
flex: 1 1 auto;
|
||||
min-height: 240px;
|
||||
min-height: min(240px, 50vh);
|
||||
}
|
||||
|
||||
// Inside that container the guide is `flex: 0 0 <basis>`, so on a
|
||||
// short screen it took its full basis out of a container that no
|
||||
// longer had it and the video was left with nothing. Here the video
|
||||
// keeps a floor and the guide is what gives way.
|
||||
.video-player {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.epg.epg--inline {
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+8
-1
@@ -55,7 +55,14 @@
|
||||
'WORKSPACE.SHELL.OPEN_COMMAND_PALETTE' | translate
|
||||
"
|
||||
>
|
||||
{{ commandShortcutLabel }}
|
||||
<!-- The shortcut label is the affordance on a keyboard; on a
|
||||
phone it means nothing, but this button is the only way
|
||||
to open the palette, so it becomes an icon rather than
|
||||
disappearing. -->
|
||||
<span class="command-trigger__shortcut">{{
|
||||
commandShortcutLabel
|
||||
}}</span>
|
||||
<mat-icon class="command-trigger__icon">bolt</mat-icon>
|
||||
</button>
|
||||
</label>
|
||||
}
|
||||
|
||||
+27
-2
@@ -116,6 +116,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.command-trigger__icon {
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.command-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -314,11 +321,29 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Keyboard-only affordances on a screen that usually has no keyboard.
|
||||
// The palette still opens via the actual shortcut and the rail.
|
||||
// An <input> carries an intrinsic min-width from its `size`, and
|
||||
// `min-width: auto` on a flex item honours it — so the input refused
|
||||
// to shrink and pushed the trigger out of the field and onto the
|
||||
// buttons beside it.
|
||||
input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// This button is the only pointer-driven way into the command
|
||||
// palette, so it stays; only its keyboard-shortcut label is swapped
|
||||
// for an icon that means something without a keyboard.
|
||||
.command-trigger {
|
||||
min-width: 28px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.command-trigger__shortcut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.command-trigger__icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions--leading {
|
||||
|
||||
Reference in new issue
Block a user