style: layout improvements for mobile devices

src/app/stalker/stalker-main-container.component.ts

@@ -92,14 +92,17 @@ export class StalkerMainContainerComponent implements OnInit {
         {
             contentType: ContentType.ITV,
             label: 'Live Streams',
+            icon: 'live_tv',
         },
         {
             contentType: ContentType.VODS,
             label: 'VOD Streams',
+            icon: 'movie',
         },
         {
             contentType: ContentType.SERIES,
             label: 'Series',
+            icon: 'video_library',
         },
         /* {
             contentType: ContentType.RADIO,

src/app/xtream/category-view/category-view.component.scss

@@ -0,0 +1,38 @@
+:host {
+    margin: 20px;
+    display: block;
+}
+
+mat-card-content {
+    overflow-wrap: break-word;
+}
+
+.no-content {
+    text-align: center;
+
+    .icon {
+        font-size: 64px;
+        height: 64px;
+        width: 64px;
+    }
+}
+
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+
+    .category-item {
+        cursor: pointer;
+        width: 200px;
+    }
+}
+
+@media (max-width: 800px) {
+    .grid {
+        .category-item {
+            width: 100%;
+        }
+    }
+}

src/app/xtream/category-view/category-view.component.ts

@@ -49,40 +49,7 @@ import { PortalStore } from '../portal.store';
             </div>
         </ng-template>
     `,
-    styles: [
-        `
-            :host {
-                margin: 20px;
-                display: block;
-            }
-
-            mat-card-content {
-                overflow-wrap: break-word;
-            }
-
-            .no-content {
-                text-align: center;
-
-                .icon {
-                    font-size: 64px;
-                    height: 64px;
-                    width: 64px;
-                }
-            }
-
-            .grid {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                justify-content: center;
-
-                .category-item {
-                    cursor: pointer;
-                    width: 200px;
-                }
-            }
-        `,
-    ],
+    styleUrl: './category-view.component.scss',
     imports: [
         FilterPipe,
         FormsModule,

src/app/xtream/content-type-navigation-item.interface.ts

@@ -3,4 +3,5 @@ import { ContentType } from './content-type.enum';
 export interface ContentTypeNavigationItem {
     contentType: ContentType;
     label: string;
-}
+    icon?: string;
+}

src/app/xtream/detail-view.scss

@@ -69,6 +69,13 @@
     .image,
     .details {
         flex: 1 1 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+
+        img {
+            border-radius: 0;
+        }
     }
 
     .details {

src/app/xtream/navigation-bar/navigation-bar.component.html

@@ -1,6 +1,7 @@
 <div id="navigation">
     <button mat-button routerLink="/">
-        <mat-icon>home</mat-icon> Playlists
+        <mat-icon>home</mat-icon>
+        <span class="button-label">{{ 'PLAYLISTS' | translate }}</span>
     </button>
 
     <mat-button-toggle-group
@@ -17,12 +18,14 @@
             "
             [value]="item.contentType"
         >
-            {{ item.label }}
+            <mat-icon class="icon">{{ item.icon }}</mat-icon>
+            <span class="label">{{ item.label }}</span>
         </mat-button-toggle>
     </mat-button-toggle-group>
 
     <button mat-button (click)="favoritesClicked.emit()">
-        <mat-icon>star</mat-icon> Favorites
+        <mat-icon>star</mat-icon>
+        <span class="button-label">{{ 'CHANNELS.FAVORITES' | translate }}</span>
     </button>
 </div>
 <div id="sub-panel">

src/app/xtream/navigation-bar/navigation-bar.component.scss

@@ -68,3 +68,22 @@
         }
     }
 }
+
+@media (max-width: 800px) {
+    .button-label {
+        display: none;
+    }
+
+    #sub-panel {
+        height: auto;
+        padding: 10px 1em;
+    }
+
+    .breadcrumbs {
+        flex-direction: column;
+    }
+
+    .label {
+        display: none;
+    }
+}

src/app/xtream/navigation-bar/navigation-bar.component.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
 import { Breadcrumb } from '../breadcrumb.interface';
 import { ContentTypeNavigationItem } from '../content-type-navigation-item.interface';
@@ -17,13 +18,14 @@ import { PortalStore } from '../portal.store';
     styleUrls: ['./navigation-bar.component.scss'],
     standalone: true,
     imports: [
+        FormsModule,
+        MatButtonModule,
         MatButtonToggleModule,
         MatIconModule,
-        MatButtonModule,
-        RouterLink,
         NgFor,
-        FormsModule,
         NgIf,
+        RouterLink,
+        TranslateModule,
     ],
 })
 export class NavigationBarComponent {