style: visual improvements

This commit is contained in:
4gray committed 2022-02-10 23:22:45 +01:00
1 parent aa5ba90c8f
commit 45533951f1
8 files changed
+93 -65

No files matched your search

+6
View File
@@ -24,6 +24,12 @@
"ignoreAtRules": ["function", "if", "each", "include", "mixin"]
}
],
"media-feature-name-no-unknown": [
true,
{
"ignoreMediaFeatureNames": ["display-mode"]
}
],
"value-keyword-case": null,
"string-quotes": "single",
"value-no-vendor-prefix": null,
+54 -56
View File
@@ -1,58 +1,56 @@
<!-- Application header-->
<app-header
fxLayout="row"
[title]="'HOME.TITLE' | translate"
[subtitle]="'HOME.SUBTITLE' | translate"
></app-header>
<div class="grid-container">
<!-- Application header-->
<app-header
[title]="'HOME.TITLE' | translate"
[subtitle]="'HOME.SUBTITLE' | translate"
></app-header>
<!-- Tab-based layout -->
<div fxLayout="row" fxFlexAlign="start start">
<div fxFlex="100">
<mat-tab-group
[dynamicHeight]="true"
color="primary"
backgroundColor="primary"
mat-stretch-tabs
>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">list</mat-icon>
{{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
</ng-template>
<app-recent-playlists
[playlists]="playlists"
(playlistClicked)="getPlaylist($event)"
(refreshClicked)="refreshPlaylist($event)"
(removeClicked)="removeClicked($event)"
>
</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 }}
</ng-template>
<ng-template matTabContent>
<app-file-upload
(fileRejected)="rejectFile($event)"
(fileSelected)="handlePlaylist($event)"
></app-file-upload>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">link</mat-icon>
{{ 'HOME.TABS.URL_UPLOAD' | translate }}
</ng-template>
<ng-template matTabContent>
<app-url-upload
(urlAdded)="sendPlaylistsUrl($event)"
></app-url-upload>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<!-- Tab-based layout -->
<mat-tab-group
[dynamicHeight]="true"
color="primary"
backgroundColor="primary"
mat-stretch-tabs
>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">list</mat-icon>
{{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
</ng-template>
<app-recent-playlists
class="recent-playlists"
[playlists]="playlists"
(playlistClicked)="getPlaylist($event)"
(refreshClicked)="refreshPlaylist($event)"
(removeClicked)="removeClicked($event)"
>
</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 }}
</ng-template>
<ng-template matTabContent>
<app-file-upload
(fileRejected)="rejectFile($event)"
(fileSelected)="handlePlaylist($event)"
></app-file-upload>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">link</mat-icon>
{{ 'HOME.TABS.URL_UPLOAD' | translate }}
</ng-template>
<ng-template matTabContent>
<app-url-upload
(urlAdded)="sendPlaylistsUrl($event)"
></app-url-upload>
</ng-template>
</mat-tab>
</mat-tab-group>
<!-- Loading spinner -->
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
</div>
<!-- Loading spinner -->
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+11
View File
@@ -7,3 +7,14 @@
display: none;
}
}
.playlists-container {
grid-area: playlists;
}
.recent-playlists {
height: calc(100vh - 152px);
overflow: auto;
width: 100%;
display: block;
}
@@ -6,12 +6,6 @@ mat-list-item {
padding-top: 0 !important;
}
mat-nav-list {
height: calc(100vh - 192px);
overflow: auto;
width: 100%;
}
.meta {
font-size: 12px !important;
color: #666;
@@ -1,4 +1,4 @@
#video-player {
width: 100%;
height: calc(100vh - 100px);
height: calc(100vh - 60px);
}
@@ -8,6 +8,7 @@
.mat-drawer-content {
background: #000;
overflow: hidden;
}
.mat-drawer {
@@ -3,7 +3,7 @@
.video-js {
position: relative !important;
width: 100% !important;
height: calc(100vh - 85px);
height: calc(100vh - 54px);
}
/* Hide the captions settings item from the captions menu. */
+19 -1
View File
@@ -59,11 +59,12 @@ textarea,
.dark-theme {
::-webkit-scrollbar {
overflow-y: scroll;
background: rgb(100 100 100);
background: #1d1d1d;
}
::-webkit-scrollbar-thumb {
background-color: rgb(60 60 60);
border-radius: 10px;
}
}
@@ -78,3 +79,20 @@ textarea,
color: #fff !important;
}
}
.cet-container {
height: calc(100vh);
.video-js {
height: calc(100vh - 82px) !important;
}
#video-player {
width: 100%;
height: calc(100vh - 80px) !important;
}
.recent-playlists {
height: calc(100vh - 152px - 28px) !important;
}
}