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

style(ui): enhance workspace UI with new styles and layout adjustments

Browse Source
This commit is contained in:
4gray committed 2026-02-24 21:15:34 +01:00
1 parent 9193f8bb80
commit 6cae7ade76
10 files changed
+129 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/home/video-player/video-player.component.scss
+1
View File
@@ -35,6 +35,7 @@
background: #000;
color: #fff;
overflow: hidden;
border-radius: 20px 0 0 0;
}
.mat-drawer {
apps/web/src/app/workspace/workspace-context-panel.component.html
+2 -2
View File
@@ -13,9 +13,9 @@
</button>
}
</div>
@if (subtitle(); as text) {
<!-- @if (subtitle(); as text) {
<span class="context-header__badge">{{ text }}</span>
}
} -->
</header>
<div class="context-divider"></div>
apps/web/src/app/workspace/workspace-context-panel.component.scss
+1
View File
@@ -37,6 +37,7 @@
button[mat-icon-button] {
width: 32px;
height: 32px;
padding: 0;
line-height: 32px;
border-radius: 8px;
color: var(--mat-sys-on-surface-variant);
apps/web/src/app/workspace/workspace-settings-context-panel.component.scss
+26
View File
@@ -0,0 +1,26 @@
@import '../../nav-list.scss';
:host {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.panel-title {
margin: 0;
padding: 16px 16px 0;
font-size: 20px;
font-weight: 500;
color: var(--mat-sys-on-surface);
}
.panel-header {
padding: 16px 16px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.6;
flex-shrink: 0;
}
apps/web/src/app/workspace/workspace-settings-context-panel.component.ts
+1 -28
View File
@@ -7,34 +7,7 @@ import { SettingsContextService } from './settings-context.service';
@Component({
selector: 'app-workspace-settings-context-panel',
imports: [MatIconModule, TranslateModule],
styles: [
`
:host {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.panel-title {
margin: 0;
padding: 16px 16px 0;
font-size: 20px;
font-weight: 500;
color: var(--mat-sys-on-surface);
}
.panel-header {
padding: 16px 16px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.6;
flex-shrink: 0;
}
`,
],
styleUrls: ['./workspace-settings-context-panel.component.scss'],
template: `
<h2 class="panel-title">{{ 'SETTINGS.TITLE' | translate }}</h2>
<div class="nav-list" style="margin-top: 16px">
apps/web/src/app/workspace/workspace-shell.component.html
+14 -7
View File
@@ -111,7 +111,7 @@
mat-icon-button
[class.is-active]="isDownloadsView()"
(click)="openDownloadsShortcut()"
[matTooltip]="'Downloads'"
[matTooltip]="'DOWNLOADS.TITLE' | translate"
aria-label="Open downloads"
>
<mat-icon>download</mat-icon>
@@ -134,7 +134,7 @@
mat-icon-button
[class.is-active]="isFavoritesView()"
(click)="toggleFavoritesShortcut()"
[matTooltip]="'Favorites only'"
[matTooltip]="'WORKSPACE.FAVORITES_ONLY' | translate"
[disabled]="!currentContext()"
aria-label="Toggle favorites only"
>
@@ -145,7 +145,10 @@
type="button"
mat-icon-button
[matMenuTriggerFor]="sortMenu"
[matTooltip]="'Sort: ' + contentSortLabel()"
[matTooltip]="
('WORKSPACE.SORT_LABEL' | translate) +
contentSortLabel()
"
aria-label="Sorting options"
>
<mat-icon>sort</mat-icon>
@@ -155,7 +158,9 @@
mat-menu-item
(click)="setContentSortMode('date-desc')"
>
<span>Date Added (Latest First)</span>
<span>{{
'WORKSPACE.SORT_DATE_DESC' | translate
}}</span>
@if (contentSortMode() === 'date-desc') {
<mat-icon>check</mat-icon>
}
@@ -164,7 +169,7 @@
mat-menu-item
(click)="setContentSortMode('date-asc')"
>
<span>Date Added (Oldest First)</span>
<span>{{ 'WORKSPACE.SORT_DATE_ASC' | translate }}</span>
@if (contentSortMode() === 'date-asc') {
<mat-icon>check</mat-icon>
}
@@ -173,7 +178,7 @@
mat-menu-item
(click)="setContentSortMode('name-asc')"
>
<span>Name A-Z</span>
<span>{{ 'WORKSPACE.SORT_NAME_ASC' | translate }}</span>
@if (contentSortMode() === 'name-asc') {
<mat-icon>check</mat-icon>
}
@@ -182,7 +187,9 @@
mat-menu-item
(click)="setContentSortMode('name-desc')"
>
<span>Name Z-A</span>
<span>{{
'WORKSPACE.SORT_NAME_DESC' | translate
}}</span>
@if (contentSortMode() === 'name-desc') {
<mat-icon>check</mat-icon>
}
apps/web/src/app/workspace/workspace-sources-filters-panel.component.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@import '../../nav-list.scss';
:host {
display: flex;
flex-direction: column;
@@ -55,6 +57,7 @@
min-height: 0;
}
.option-list {
overflow-y: auto;
min-height: 0;
@@ -69,4 +72,3 @@
letter-spacing: 0.04em;
color: var(--mat-sys-on-surface-variant);
}
apps/web/src/app/xtream-electron/category-view/category-view.component.scss
+2
View File
@@ -1,3 +1,5 @@
@import '../../../nav-list.scss';
:host {
height: 100%;
overflow-y: auto;
apps/web/src/nav-list.scss
+79
View File
@@ -0,0 +1,79 @@
// ─── Shared List Navigation Styles ────────────────────────────────────────────
.nav-list {
flex: 1;
overflow-y: auto;
padding: 0 8px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--mat-sys-on-surface-variant);
text-align: left;
text-decoration: none;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
box-sizing: border-box;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
span,
.nav-item-label {
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.nav-item-meta {
font-size: 0.8rem;
min-width: 2ch;
text-align: right;
flex-shrink: 0;
color: var(--mat-sys-on-surface-variant);
opacity: 0.7;
}
&:hover {
background: var(--mat-sys-surface-container);
color: var(--mat-sys-on-surface);
}
&.selected,
&.active {
background: var(--mat-sys-primary-container) !important;
color: var(--mat-sys-on-primary-container) !important;
border-color: transparent !important;
font-weight: 600;
* {
color: var(--mat-sys-on-primary-container) !important;
}
.nav-item-meta {
color: var(--mat-sys-on-primary-container) !important;
opacity: 0.85;
}
}
}
apps/web/src/styles.scss
-1
View File
@@ -13,7 +13,6 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
// ─── Shared Components ────────────────────────────────────────────────────────
@import './nav-list.scss';
// ─── macOS specific: space for traffic lights ─────────────────────────────────
app-root.macos-platform app-header .modern-header {