style: visual improvements

src/app/home/file-upload/file-upload.component.scss

@@ -1,9 +1,4 @@
 .drop-container {
-    margin: 10px;
-    padding: 10px;
-    height: calc(100vh - 235px);
-    border: 2px dashed #ccc;
-    border-radius: 3px;
     text-align: center;
     color: #666;
 }

src/app/home/recent-playlists/playlist-item/playlist-item.component.html

@@ -4,6 +4,7 @@
     >
     <mat-icon
         mat-list-icon
+        class="upload-type-icon"
         *ngIf="item?.url"
         [matTooltip]="
             ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item?.url
@@ -12,6 +13,7 @@
     >
     <mat-icon
         mat-list-icon
+        class="upload-type-icon"
         *ngIf="!item?.url"
         [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
         >folder</mat-icon
@@ -40,6 +42,7 @@
     <button
         *ngIf="item.url || item.filePath"
         mat-icon-button
+        class="refresh-btn"
         color="accent"
         (click)="$event.stopPropagation(); refreshClicked.emit(item)"
         [matTooltip]="'HOME.PLAYLISTS.REFRESH' | translate"
@@ -49,6 +52,7 @@
     <button
         mat-icon-button
         color="accent"
+        class="edit-btn"
         (click)="$event.stopPropagation(); editPlaylistClicked.emit(item)"
         [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
     >
@@ -57,6 +61,7 @@
     <button
         mat-icon-button
         color="accent"
+        class="delete-btn"
         (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
         [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
     >

src/app/home/recent-playlists/playlist-item/playlist-item.component.scss

@@ -30,3 +30,17 @@ mat-list-item {
     cursor: move;
     margin-left: -20px;
 }
+
+::ng-deep {
+    @media only screen and (max-width: 480px) {
+        .main-container {
+            .favorites-icon,
+            .upload-type-icon,
+            .refresh-btn,
+            .edit-btn,
+            .delete-btn {
+                display: none;
+            }
+        }
+    }
+}

src/app/player/components/channel-list-container/channel-list-container.component.html

@@ -1,5 +1,11 @@
 <mat-tab-group color="primary" backgroundColor="primary">
-    <mat-tab [label]="'CHANNELS.ALL_CHANNELS' | translate">
+    <mat-tab>
+        <ng-template mat-tab-label>
+            <mat-icon class="tab-icon">list</mat-icon>
+            <div class="tab-title">
+                {{ 'CHANNELS.ALL_CHANNELS' | translate }}
+            </div>
+        </ng-template>
         <mat-list>
             <mat-list-item>
                 <input
@@ -42,7 +48,13 @@
         </mat-nav-list>
     </mat-tab>
 
-    <mat-tab [label]="'CHANNELS.GROUPS' | translate">
+    <mat-tab>
+        <ng-template mat-tab-label>
+            <mat-icon class="tab-icon">category</mat-icon>
+            <div class="tab-title">
+                {{ 'CHANNELS.GROUPS' | translate }}
+            </div>
+        </ng-template>
         <mat-nav-list id="groups-list">
             <mat-accordion multi>
                 <ng-container *ngFor="let groups of groupedChannels | keyvalue">
@@ -88,10 +100,13 @@
         </mat-nav-list>
     </mat-tab>
 
-    <mat-tab
-        *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'"
-        [label]="'CHANNELS.FAVORITES' | translate"
-    >
+    <mat-tab *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'">
+        <ng-template mat-tab-label>
+            <mat-icon class="tab-icon">star</mat-icon>
+            <div class="tab-title">
+                {{ 'CHANNELS.FAVORITES' | translate }}
+            </div>
+        </ng-template>
         <mat-nav-list
             *ngIf="favorites$ | async as favorites"
             id="favorites-list"

src/app/player/components/channel-list-container/channel-list-container.component.scss

@@ -6,10 +6,6 @@
     padding-top: 0;
 }
 
-::ng-deep .mat-expansion-panel-body {
-    padding: 0 !important;
-}
-
 .scroll-viewport {
     min-height: calc(100vh - 165px);
 }
@@ -26,20 +22,24 @@
     overflow: hidden;
 }
 
-::ng-deep .dark-theme {
-    .search-bar {
-        background: #666;
-        color: #fff;
-    }
-
-    .search-bar::placeholder {
-        color: #ccc;
-    }
-}
-
 ::ng-deep {
-    .dark-theme .active {
-        background: #000;
+    .mat-expansion-panel-body {
+        padding: 0 !important;
+    }
+
+    .dark-theme {
+        .search-bar {
+            background: #666;
+            color: #fff;
+        }
+
+        .search-bar::placeholder {
+            color: #ccc;
+        }
+
+        .active {
+            background: #000;
+        }
     }
 
     .mat-tab-label-content {
@@ -83,3 +83,17 @@
 #favorites-list {
     height: calc(100vh - 120px);
 }
+
+@media only screen and (max-width: 480px) {
+    .channel-name {
+        max-width: 100px;
+    }
+
+    .tab-title {
+        display: none;
+    }
+
+    .tab-icon {
+        display: block;
+    }
+}

src/app/player/components/video-player/video-player.component.scss

@@ -58,3 +58,16 @@
 .electron {
     height: calc(100vh - 85px) !important;
 }
+
+@media only screen and (max-width: 480px) {
+    .mat-drawer {
+        width: 200px;
+        min-width: 200px;
+    }
+
+    .playlist-info {
+        .name {
+            max-width: 105px;
+        }
+    }
+}

src/app/shared/components/header/header.component.html

@@ -24,15 +24,17 @@
         <mat-icon>menu</mat-icon>
     </button>
     <mat-menu #menu="matMenu">
-        <button
-            mat-menu-item
-            [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
-            (click)="openSettings()"
-        >
-            <mat-icon>settings</mat-icon>
-            <span>{{ 'MENU.SETTINGS' | translate }}</span>
-        </button>
-        <mat-divider></mat-divider>
+        <ng-container *ngIf="isHome">
+            <button
+                mat-menu-item
+                [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
+                (click)="openSettings()"
+            >
+                <mat-icon>settings</mat-icon>
+                <span>{{ 'MENU.SETTINGS' | translate }}</span>
+            </button>
+            <mat-divider></mat-divider>
+        </ng-container>
         <button
             mat-menu-item
             [attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"

src/app/shared/components/header/header.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HomeComponent } from '../../../home/home.component';
 import { DataService } from '../../../services/data.service';
 import { WhatsNewService } from '../../../services/whats-new.service';
 import { AboutDialogComponent } from '../about-dialog/about-dialog.component';
@@ -10,12 +11,12 @@ import { AboutDialogComponent } from '../about-dialog/about-dialog.component';
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
     /** Title of the header */
-    @Input() title: string;
+    @Input() title!: string;
 
     /** Subtitle of the header */
-    @Input() subtitle: string;
+    @Input() subtitle!: string;
 
     /** Environment flag */
     isElectron = this.dataService.isElectron;
@@ -29,18 +30,22 @@ export class HeaderComponent {
     /** Modals to show for the updated version of the application */
     modals = this.whatsNewService.getLatestChanges();
 
-    /** Creates an instance of SettingsComponent and injects angulars router module
-     * @param router angulars router
-     * @param dataService
-     * @param whatsNewService
-     */
+    isHome = true;
+
+    /** Creates an instance of SettingsComponent */
     constructor(
-        private router: Router,
+        private activatedRoute: ActivatedRoute,
+        private dialog: MatDialog,
         private dataService: DataService,
-        private whatsNewService: WhatsNewService,
-        private dialog: MatDialog
+        private router: Router,
+        private whatsNewService: WhatsNewService
     ) {}
 
+    ngOnInit() {
+        this.isHome =
+            this.activatedRoute.snapshot.component.name === HomeComponent.name;
+    }
+
     /**
      * Navigates to the settings page
      */

src/styles.scss

@@ -21,6 +21,7 @@ html {
 @media (display-mode: standalone) {
     body {
         overscroll-behavior-y: contain;
+        overflow: hidden;
     }
 }
 
@@ -97,4 +98,8 @@ textarea,
     #favorites-list {
         height: calc(100vh - 148px) !important;
     }
+
+    .scroll-viewport {
+        min-height: calc(100vh - 200px) !important;
+    }
 }