From 94e9a5119c3a63924891ecd7354ed9a1e8b47dfd Mon Sep 17 00:00:00 2001 From: 4gray Date: Sun, 29 Mar 2026 18:16:54 +0200 Subject: [PATCH] refactor(styles): implement panel header mixins for consistent layout across components Entire-Checkpoint: 84693b066142 --- .../category-content-view.component.scss | 42 ++----------- .../stalker-live-stream-layout.component.html | 13 ++-- .../stalker-live-stream-layout.component.scss | 33 ++++++++++ .../groups-view/groups-view.component.html | 11 +++- .../groups-view/groups-view.component.scss | 38 ++++-------- libs/ui/styles/_panel-header.scss | 60 +++++++++++++++++++ 6 files changed, 127 insertions(+), 70 deletions(-) create mode 100644 libs/ui/styles/_panel-header.scss diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss index 6be33e345..290c92f68 100644 --- a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss +++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss @@ -1,3 +1,5 @@ +@use '../../../../../../ui/styles/panel-header' as panel; + :host { display: flex; flex-direction: column; @@ -16,52 +18,20 @@ // ─── Sticky header bar — styled like a widget header ───────────────────────── .category-content-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 12px; - padding: 0 20px; - min-height: 52px; - flex-shrink: 0; - position: sticky; - top: 0; - z-index: 2; - // distinct widget-header surface so it reads over the content below - background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high)); - border-bottom: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05)); + @include panel.standard-panel-header($sticky: true); } // ─── Category meta (title + subtitle) ──────────────────────────────────────── .category-meta { - min-width: 0; - display: flex; - align-items: baseline; - gap: 10px; - flex: 1; + @include panel.standard-panel-meta(); } .category-title { - margin: 0; - font-size: 0.95rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - // Explicit token so it never blends with the header background - color: var(--app-heading-color, var(--mat-sys-on-surface)); - letter-spacing: -0.01em; + @include panel.standard-panel-title(); } .category-subtitle { - white-space: nowrap; - font-size: 0.78rem; - font-weight: 500; - color: var(--app-body-color, var(--mat-sys-on-surface-variant)); - // pill chip appearance - background: var(--mat-sys-surface-container); - padding: 2px 8px; - border-radius: 999px; - flex-shrink: 0; + @include panel.standard-panel-subtitle(); } // ─── Paginator — flush right, no ghost background ──────────────────────────── diff --git a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html index bae52cdfb..01732db0b 100644 --- a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html +++ b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html @@ -9,15 +9,16 @@ [defaultWidth]="400" storageKey="sidebar-width" > -
-
+
+

{{ selectedCategoryTitle() }}

@if (visibleChannels().length > 0) { - {{ - visibleChannels().length - }} + {{ visibleChannels().length }} + {{ visibleChannels().length === 1 ? 'item' : 'items' }} }
@@ -33,7 +34,7 @@ } @else { @for (item of visibleChannels(); track item.id ?? $index) { @if (selectedGroup(); as group) {
-
+

@if (group.key) { {{ group.key | titlecase }} @@ -76,7 +76,10 @@ {{ 'CHANNELS.UNGROUPED' | translate }} }

- {{ group.count }} + + {{ group.count }} + {{ group.count === 1 ? 'item' : 'items' }} +
@@ -103,7 +106,9 @@ [progressPercentage]="channel.progressPercentage" [selected]="activeChannelUrl() === channel?.url" [showFavoriteButton]="true" - [isFavorite]="favoriteIds().has(channel?.url)" + [isFavorite]=" + channel?.url ? favoriteIds().has(channel.url) : false + " (clicked)="onChannelClick(channel)" (favoriteToggled)="onFavoriteToggle(channel, $event)" /> diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss index beb13bd0b..03da9c30e 100644 --- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss +++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss @@ -1,4 +1,5 @@ @use '../../../../../styles/portal-sidebar'; +@use '../../../../../styles/panel-header' as panel; @use '../../../../../../../apps/web/src/nav-list.scss'; :host { @@ -52,33 +53,21 @@ color: var(--mat-sys-on-surface); } +.groups-content-header { + @include panel.standard-panel-header(); + border-top-left-radius: inherit; +} + +.category-meta { + @include panel.standard-panel-meta(); +} + .category-title { - margin: 0; - font-size: 0.94rem; - font-weight: 600; - letter-spacing: -0.01em; - color: var(--mat-sys-on-surface); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @include panel.standard-panel-title(0.94rem); } -.category-count { - flex-shrink: 0; - font-size: 0.72rem; - font-weight: 500; - color: var(--mat-sys-on-surface-variant); - background: var(--mat-sys-surface-container); - padding: 2px 8px; - border-radius: 999px; -} - -.category-heading { - display: flex; - align-items: baseline; - gap: 8px; - flex: 1; - min-width: 0; +.category-subtitle { + @include panel.standard-panel-subtitle(); } .groups-nav-list { @@ -108,7 +97,6 @@ } .groups-content-panel > .groups-content-header { - border-bottom: none; border-top-left-radius: inherit; } diff --git a/libs/ui/styles/_panel-header.scss b/libs/ui/styles/_panel-header.scss new file mode 100644 index 000000000..0738bf244 --- /dev/null +++ b/libs/ui/styles/_panel-header.scss @@ -0,0 +1,60 @@ +@mixin standard-panel-header( + $sticky: false, + $padding: 0 20px, + $gap: 12px, + $min-height: 52px, + $z-index: 2, + $border-color: var(--app-widget-header-border, rgba(255, 255, 255, 0.05)) +) { + display: flex; + justify-content: space-between; + align-items: center; + gap: $gap; + padding: $padding; + min-height: $min-height; + flex-shrink: 0; + background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high)); + border-bottom: 1px solid $border-color; + + @if $sticky { + position: sticky; + top: 0; + z-index: $z-index; + } +} + +@mixin standard-panel-meta($gap: 10px) { + min-width: 0; + display: flex; + align-items: baseline; + gap: $gap; + flex: 1; +} + +@mixin standard-panel-title($font-size: 0.95rem) { + margin: 0; + font-size: $font-size; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--app-heading-color, var(--mat-sys-on-surface)); + letter-spacing: -0.01em; +} + +@mixin standard-panel-subtitle( + $font-size: 0.78rem, + $font-weight: 500, + $padding: 2px 8px, + $color: var(--app-body-color, var(--mat-sys-on-surface-variant)), + $background: var(--mat-sys-surface-container) +) { + white-space: nowrap; + font-size: $font-size; + font-weight: $font-weight; + color: $color; + background: $background; + padding: $padding; + border-radius: 999px; + flex-shrink: 0; +} \ No newline at end of file