refactor: code style improvements

src/app/home/home.component.html

@@ -15,15 +15,21 @@
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon class="tab-icon">list</mat-icon>
-                {{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
+                <div class="tab-title">
+                    {{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
+                </div>
+            </ng-template>
+            <ng-template matTabContent>
+                <app-recent-playlists class="recent-playlists">
+                </app-recent-playlists>
             </ng-template>
-            <app-recent-playlists class="recent-playlists">
-            </app-recent-playlists>
         </mat-tab>
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon class="tab-icon">attach_file</mat-icon>
-                {{ 'HOME.TABS.FILE_UPLOAD' | translate }}
+                <div class="tab-title">
+                    {{ 'HOME.TABS.FILE_UPLOAD' | translate }}
+                </div>
             </ng-template>
             <ng-template matTabContent>
                 <app-file-upload
@@ -35,7 +41,9 @@
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon class="tab-icon">link</mat-icon>
-                {{ 'HOME.TABS.URL_UPLOAD' | translate }}
+                <div class="tab-title">
+                    {{ 'HOME.TABS.URL_UPLOAD' | translate }}
+                </div>
             </ng-template>
             <ng-template matTabContent>
                 <app-url-upload
@@ -46,7 +54,9 @@
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon class="tab-icon">text_format</mat-icon>
-                {{ 'HOME.TABS.TEXT_IMPORT' | translate }}
+                <div class="tab-title">
+                    {{ 'HOME.TABS.TEXT_IMPORT' | translate }}
+                </div>
             </ng-template>
             <ng-template matTabContent>
                 <app-text-import

src/app/home/home.component.scss

@@ -18,3 +18,9 @@
     width: 100%;
     display: block;
 }
+
+@media only screen and (max-width: 480px) {
+    .tab-title {
+        display: none;
+    }
+}

src/app/home/home.component.ts

@@ -12,24 +12,9 @@ import {
 } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
+import { PlaylistMeta } from '../shared/playlist-meta.type';
 import { ChannelStore } from '../state';
 
-/** Type to describe meta data of a playlist */
-export type PlaylistMeta = Pick<
-    Playlist,
-    | 'count'
-    | 'title'
-    | 'filename'
-    | '_id'
-    | 'url'
-    | 'importDate'
-    | 'userAgent'
-    | 'filePath'
-    | 'updateDate'
-    | 'updateState'
-    | 'position'
->;
-
 @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { PlaylistMeta } from '../../home.component';
+import { PlaylistMeta } from '../../../shared/playlist-meta.type';
 
 @Component({
     selector: 'app-playlist-item',

src/app/home/recent-playlists/recent-playlists.component.spec.ts

@@ -14,7 +14,7 @@ import {
 import { DataService } from '../../services/data.service';
 import { DialogService } from '../../services/dialog.service';
 import { ElectronServiceStub } from '../../services/electron.service.stub';
-import { PlaylistMeta } from '../home.component';
+import { PlaylistMeta } from '../../shared/playlist-meta.type';
 import { RecentPlaylistsComponent } from './recent-playlists.component';
 
 describe('RecentPlaylistsComponent', () => {

src/app/home/recent-playlists/recent-playlists.component.ts

@@ -15,7 +15,7 @@ import {
     PLAYLIST_UPDATE_POSITIONS,
 } from './../../../../shared/ipc-commands';
 import { DialogService } from './../../services/dialog.service';
-import { PlaylistMeta } from './../home.component';
+import { PlaylistMeta } from './../../shared/playlist-meta.type';
 import { PlaylistInfoComponent } from './playlist-info/playlist-info.component';
 
 @Component({

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

@@ -1,13 +1,11 @@
-<div fxFlex="100px">
+<div class="logo">
     <img src="./assets/icons/icon-tv-256.png" height="100" />
 </div>
-<div fxFlex="100" fxLayoutAlign="start center">
-    <div fxLayout="column">
-        <div fxFlex class="title">{{ title }}</div>
-        <div class="subtitle">{{ subtitle }}</div>
-    </div>
+<div class="main">
+    <div class="title">{{ title }}</div>
+    <div class="subtitle">{{ subtitle }}</div>
 </div>
-<div fxLayout="column" fxFlex="50px" fxLayoutAlign="center center">
+<div class="menu">
     <button
         *ngIf="isElectron; else pwaMenu"
         mat-icon-button
@@ -18,18 +16,26 @@
 </div>
 
 <ng-template #pwaMenu>
-    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open menu">
+    <button
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        [attr.aria-label]="'MENU.OPEN' | translate"
+    >
         <mat-icon>menu</mat-icon>
     </button>
     <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="openSettings()">
+        <button
+            mat-menu-item
+            [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
+            (click)="openSettings()"
+        >
             <mat-icon>settings</mat-icon>
-            <span>Settings</span>
+            <span>{{ 'MENU.SETTINGS' | translate }}</span>
         </button>
         <mat-divider></mat-divider>
         <button
             mat-menu-item
-            aria-label="Support IPTVnator on GitHub"
+            [attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"
             (click)="openUrl('https:///github.com/4gray/iptvnator')"
         >
             <mat-icon>recommend</mat-icon>
@@ -37,28 +43,28 @@
         </button>
         <button
             mat-menu-item
-            aria-label="Report a bug"
+            [attr.aria-label]="'MENU.BUG_REPORT' | translate"
             (click)="openUrl('https://github.com/4gray/iptvnator/issues')"
         >
             <mat-icon>bug_report</mat-icon>
-            <span>Report a bug</span>
+            <span>{{ 'MENU.BUG_REPORT' | translate }}</span>
         </button>
         <mat-divider></mat-divider>
         <button
             mat-menu-item
-            aria-label="What is new?"
+            [attr.aria-label]="'MENU.WHAT_IS_NEW' | translate"
             (click)="setDialogVisibility(true)"
         >
             <mat-icon>new_releases</mat-icon>
-            <span>What is new</span>
+            <span>{{ 'MENU.WHAT_IS_NEW' | translate }}</span>
         </button>
         <button
             mat-menu-item
-            aria-label="About this application"
+            [attr.aria-label]="'MENU.ABOUT_ARIA' | translate"
             (click)="openAboutDialog()"
         >
             <mat-icon>info</mat-icon>
-            <span>About</span>
+            <span>{{ 'MENU.ABOUT' | translate }}</span>
         </button>
     </mat-menu>
 </ng-template>

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

@@ -1,14 +1,38 @@
 :host {
     background: #000;
     color: #fff;
+    display: flex;
+    width: 100%;
 }
 
-.title {
-    font-size: 1.1em;
+.logo {
+    flex: 1 1 100px;
 }
 
-.subtitle {
-    color: #999;
-    font-size: 0.9em;
-    margin-top: 10px;
+.main {
+    place-content: center flex-start;
+    align-self: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100%;
+    max-width: 100%;
+
+    .title {
+        font-size: 1.1em;
+    }
+
+    .subtitle {
+        color: #999;
+        font-size: 0.9em;
+        margin-top: 10px;
+    }
+}
+
+.menu {
+    place-content: center;
+    align-self: center;
+    min-width: 50px;
+    max-width: 50px;
+    display: flex;
 }

src/app/shared/playlist-meta.type.ts

@@ -0,0 +1,16 @@
+import { Playlist } from '../../../shared/playlist.interface';
+
+export type PlaylistMeta = Pick<
+    Playlist,
+    | 'count'
+    | 'title'
+    | 'filename'
+    | '_id'
+    | 'url'
+    | 'importDate'
+    | 'userAgent'
+    | 'filePath'
+    | 'updateDate'
+    | 'updateState'
+    | 'position'
+>;