From cfcf05091999d96117fa3cf8d5c1619bcc4f65d5 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Fri, 26 Aug 2022 11:48:41 +0200
Subject: [PATCH] style: visual improvements

---
 .../file-upload/file-upload.component.scss    |  5 --
 .../playlist-item.component.html              |  5 ++
 .../playlist-item.component.scss              | 14 ++++++
 .../channel-list-container.component.html     | 27 ++++++++---
 .../channel-list-container.component.scss     | 48 ++++++++++++-------
 .../video-player/video-player.component.scss  | 13 +++++
 .../components/header/header.component.html   | 20 ++++----
 .../components/header/header.component.ts     | 31 +++++++-----
 src/styles.scss                               |  5 ++
 9 files changed, 118 insertions(+), 50 deletions(-)

diff --git a/src/app/home/file-upload/file-upload.component.scss b/src/app/home/file-upload/file-upload.component.scss
index 8100802ec..99d829027 100644
--- a/src/app/home/file-upload/file-upload.component.scss
+++ b/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;
 }
diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html b/src/app/home/recent-playlists/playlist-item/playlist-item.component.html
index f542dc72f..73db5c2df 100644
--- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html
+++ b/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"
     >
diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss b/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss
index 10620d0ad..0abf3beaa 100644
--- a/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index 35b1bd2da..f03e7c600 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/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"
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.scss b/src/app/player/components/channel-list-container/channel-list-container.component.scss
index b6f105fc3..33f71eca1 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.scss
+++ b/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;
+    }
+}
diff --git a/src/app/player/components/video-player/video-player.component.scss b/src/app/player/components/video-player/video-player.component.scss
index a823336ee..15070cf6b 100644
--- a/src/app/player/components/video-player/video-player.component.scss
+++ b/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;
+        }
+    }
+}
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index ddc86baa2..8ebf5f799 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/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"
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index f742ac859..f12777265 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/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
      */
diff --git a/src/styles.scss b/src/styles.scss
index e31ebeba8..0d54c7691 100644
--- a/src/styles.scss
+++ b/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;
+    }
 }