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

style(xtream): reorganize navigation layout with section labels and improved styling

Browse Source
This commit is contained in:
4gray committed 2024-12-26 14:03:36 +01:00
1 parent d36b808026
commit f06bcefcd3
2 files changed
+94 -80
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/xtream-tauri/navigation/navigation.component.html
+72 -77
View File
@@ -41,83 +41,78 @@
</div>
</div>
</div>
<mat-nav-list>
<!-- <a
mat-list-item
routerLink="/"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon matListItemIcon>home</mat-icon>
<span matListItemTitle>Home</span>
</a> -->
<a
mat-list-item
(click)="xtreamStore.setSelectedContentType('live')"
routerLink="./live"
[class.active]="isContentTypeActive('live')"
>
<mat-icon matListItemIcon>live_tv</mat-icon>
<span matListItemTitle>Live TV</span>
</a>
<div class="nav-section">
<div class="nav-group-label">Main</div>
<mat-nav-list>
<a
mat-list-item
(click)="xtreamStore.setSelectedContentType('vod')"
routerLink="./vod"
[class.active]="isContentTypeActive('vod')"
>
<mat-icon matListItemIcon>movie</mat-icon>
<span matListItemTitle>Movies</span>
</a>
<a
mat-list-item
(click)="xtreamStore.setSelectedContentType('live')"
routerLink="./live"
[class.active]="isContentTypeActive('live')"
>
<mat-icon matListItemIcon>live_tv</mat-icon>
<span matListItemTitle>Live TV</span>
</a>
<a
mat-list-item
routerLink="./series"
(click)="xtreamStore.setSelectedContentType('series')"
[class.active]="isContentTypeActive('series')"
>
<mat-icon matListItemIcon>tv</mat-icon>
<span matListItemTitle>TV Series</span>
</a>
</mat-nav-list>
</div>
<a
mat-list-item
(click)="xtreamStore.setSelectedContentType('vod')"
routerLink="./vod"
[class.active]="isContentTypeActive('vod')"
>
<mat-icon matListItemIcon>movie</mat-icon>
<span matListItemTitle>Movies</span>
</a>
<div class="nav-section">
<div class="nav-group-label">Library</div>
<mat-nav-list>
<a
mat-list-item
routerLink="./search"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>search</mat-icon>
<span matListItemTitle>Search</span>
</a>
<a
mat-list-item
routerLink="./recent"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>history</mat-icon>
<span matListItemTitle>Recent</span>
</a>
<a
mat-list-item
routerLink="./favorites"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>favorite</mat-icon>
<span matListItemTitle>Favorites</span>
</a>
</mat-nav-list>
</div>
<a
mat-list-item
routerLink="./series"
(click)="xtreamStore.setSelectedContentType('series')"
[class.active]="isContentTypeActive('series')"
>
<mat-icon matListItemIcon>tv</mat-icon>
<span matListItemTitle>TV Series</span>
</a>
<mat-divider />
<a
mat-list-item
routerLink="./search"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>search</mat-icon>
<span matListItemTitle>Search</span>
</a>
<a
mat-list-item
routerLink="./recent"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>history</mat-icon>
<span matListItemTitle>Recent</span>
</a>
<a
mat-list-item
routerLink="./favorites"
routerLinkActive="active"
(click)="xtreamStore.setSelectedContentType(undefined)"
>
<mat-icon matListItemIcon>favorite</mat-icon>
<span matListItemTitle>Favorites</span>
</a>
</mat-nav-list>
<mat-nav-list class="navigation-bottom">
<a mat-list-item (click)="openSettings()">
<mat-icon matListItemIcon>settings</mat-icon>
<span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
</a>
</mat-nav-list>
<div class="navigation-bottom">
<mat-nav-list>
<a mat-list-item (click)="openSettings()">
<mat-icon matListItemIcon>settings</mat-icon>
<span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
</a>
</mat-nav-list>
</div>
src/app/xtream-tauri/navigation/navigation.component.scss
+22 -3
View File
@@ -10,6 +10,7 @@
}
.navigation-bottom {
border-top: 1px solid #333;
margin-top: auto;
padding-bottom: 16px;
}
@@ -173,6 +174,24 @@ mat-icon {
}
}
.navigation-bottom {
padding-bottom: 16px;
}
.nav-section {
margin: 10px 0;
padding: 5px 0;
.nav-group-label {
padding: 0 16px 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
.mat-nav-list {
padding: 0;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
overflow: hidden;
}
}