x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(portal): align channel-list no-results placeholders with L4 pattern

Browse Source 
The Xtream and Stalker portal channel-list panels both rendered their
"No channels found" empty state with a 64x64 gradient-tile wrapper
around a 32px icon, which was a one-off treatment that didn't match
the inline empty-state pattern used everywhere else at the same level
(EPG list, groups view, all-channels view): a bare 48px Material icon
at 0.5 opacity, 1.05rem title, 0.85rem 0.65-opacity hint.

Drop the .empty-icon-wrapper tile, switch to the canonical sizes, and
reuse the empty-state-icon / empty-state-title / empty-state-hint
class names so the visual is consistent across all panel-level empty
states.

Also replace the hardcoded EN string in the Stalker variant ("We
couldn't find anything matching ...") with the existing
CHANNELS.TRY_DIFFERENT_SEARCH i18n key, matching the Xtream branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: e3e3d80db476
This commit is contained in:
4grayandClaude Opus 4.7 committed 2026-05-01 23:26:15 +02:00
1 parent 2f7406054d
commit 472ac66185
4 files changed
+44 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
+7 -5
View File
@@ -32,11 +32,13 @@
}
} @else {
<div class="empty-search-state">
<div class="empty-icon-wrapper">
<mat-icon>search_off</mat-icon>
</div>
<h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
<p>We couldn't find anything matching "{{ searchString() }}"</p>
<mat-icon class="empty-state-icon">search_off</mat-icon>
<h3 class="empty-state-title">
{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
</h3>
<p class="empty-state-hint">
{{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
</p>
</div>
}
</div>
libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
+16 -27
View File
@@ -72,50 +72,39 @@
}
.empty-search-state {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 32px 24px;
padding: 40px 24px;
text-align: center;
color: var(--app-muted-color);
.empty-icon-wrapper {
width: 64px;
height: 64px;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
rgba(127, 127, 127, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow:
0 8px 24px -8px rgba(0, 0, 0, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
mat-icon {
width: 32px;
height: 32px;
font-size: 32px;
opacity: 0.8;
}
.empty-state-icon {
width: 48px;
height: 48px;
font-size: 48px;
opacity: 0.5;
margin-bottom: 16px;
}
h3 {
.empty-state-title {
font-size: 1.05rem;
font-weight: 520;
margin: 0 0 8px;
letter-spacing: -0.01em;
margin: 0 0 8px;
text-wrap: balance;
}
p {
.empty-state-hint {
font-size: 0.85rem;
margin: 0;
opacity: 0.65;
line-height: 1.4;
max-width: 260px;
max-width: 240px;
text-wrap: pretty;
}
}
libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
+5 -5
View File
@@ -46,12 +46,12 @@
</cdk-virtual-scroll-viewport>
} @else {
<div class="empty-search-state">
<div class="empty-icon-wrapper">
<mat-icon>search_off</mat-icon>
</div>
<h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
<mat-icon class="empty-state-icon">search_off</mat-icon>
<h3 class="empty-state-title">
{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
</h3>
@if (searchTermInput()) {
<p>
<p class="empty-state-hint">
{{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
</p>
}
libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
+16 -27
View File
@@ -94,51 +94,40 @@
}
.empty-search-state {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 32px 24px;
padding: 40px 24px;
text-align: center;
color: var(--app-muted-color);
animation: fade-in 0.3s ease-out;
.empty-icon-wrapper {
width: 64px;
height: 64px;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
rgba(127, 127, 127, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow:
0 8px 24px -8px rgba(0, 0, 0, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
mat-icon {
width: 32px;
height: 32px;
font-size: 32px;
opacity: 0.8;
}
.empty-state-icon {
width: 48px;
height: 48px;
font-size: 48px;
opacity: 0.5;
margin-bottom: 16px;
}
h3 {
.empty-state-title {
font-size: 1.05rem;
font-weight: 520;
margin: 0 0 8px;
letter-spacing: -0.01em;
margin: 0 0 8px;
text-wrap: balance;
}
p {
.empty-state-hint {
font-size: 0.85rem;
margin: 0;
opacity: 0.65;
line-height: 1.4;
max-width: 260px;
max-width: 240px;
text-wrap: pretty;
}
}