diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 341cad954..d7ab0f492 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.component';
import { ChannelListContainerComponent } from './channel-list-container/channel-list-container.component';
import { FilterPipeModule } from 'ngx-filter-pipe';
+import { HeaderComponent } from './playlist-uploader/header/header.component';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -32,6 +33,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
declarations: [
AppComponent,
ChannelListContainerComponent,
+ HeaderComponent,
PlaylistUploaderComponent,
VideoPlayerComponent,
RecentPlaylistsComponent,
diff --git a/src/app/playlist-uploader/header/header.component.html b/src/app/playlist-uploader/header/header.component.html
new file mode 100644
index 000000000..5957190a2
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.html
@@ -0,0 +1,9 @@
+
+

+
+
+
+
IPTVnator
+
Please select a playlist from the list or add a new playlist via file upload or via url
+
+
\ No newline at end of file
diff --git a/src/app/playlist-uploader/header/header.component.scss b/src/app/playlist-uploader/header/header.component.scss
new file mode 100644
index 000000000..bd54c4077
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.scss
@@ -0,0 +1,14 @@
+:host {
+ background: #000;
+ color: #fff;
+}
+
+.title {
+ font-size: 1.1em
+}
+
+.subtitle {
+ color: #999;
+ font-size: 0.9em;
+ margin-top: 10px
+}
\ No newline at end of file
diff --git a/src/app/playlist-uploader/header/header.component.ts b/src/app/playlist-uploader/header/header.component.ts
new file mode 100644
index 000000000..c699c3ec0
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-header',
+ templateUrl: './header.component.html',
+ styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {}
diff --git a/src/app/playlist-uploader/playlist-uploader.component.html b/src/app/playlist-uploader/playlist-uploader.component.html
index 14d72d4c3..c4891148d 100644
--- a/src/app/playlist-uploader/playlist-uploader.component.html
+++ b/src/app/playlist-uploader/playlist-uploader.component.html
@@ -1,48 +1,50 @@
-
-
-

-
-
-
-
0 ? 50 : 100">
-
-
-
-
-
save_alt
-
- Drag & drop files here
-
-
or
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
0" fxFlex="50" id="recent-playlists">
-
Added playlists ({{playlists.length}})
+
+
+
+
+
+
+ list Recently added playlists
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+ attach_file Add via file upload
+
+
+
+
save_alt
+
+ Drag & drop files here
+
+
or
+
+
+
+
+
+
+
+ link Add via URL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/playlist-uploader/playlist-uploader.component.scss b/src/app/playlist-uploader/playlist-uploader.component.scss
index 61d25ec33..b6664c514 100644
--- a/src/app/playlist-uploader/playlist-uploader.component.scss
+++ b/src/app/playlist-uploader/playlist-uploader.component.scss
@@ -1,45 +1,22 @@
-mat-card {
- padding: 0 !important;
- max-width: 900px;
- margin: 0 auto;
-}
-
-.logo-container {
- text-align: center;
-
- .logo {
- width: 128px;
- padding-bottom: 20px;
- }
-}
-
::ng-deep {
.mat-tab-label-content {
text-transform: uppercase;
}
-}
+ .mat-tab-group.mat-background-primary .mat-tab-header {
+ background: #000 !important;
+ }
-#recent-playlists {
- border-radius: 0 4px 4px 0;
- background: #eee;
- padding: 16px 0;
- border-left: 1px solid #ccc;
-
- .mat-card-subtitle {
- padding: 0px 16px;
- text-transform: uppercase;
- border-bottom: 1px solid #ccc;
- height: 32px;
- margin-bottom: 0 !important;
+ .mat-tab-group.mat-background-primary .mat-tab-header-pagination {
+ display:none;
}
}
.drop-container {
margin: 10px;
padding: 10px;
- height: 300px;
+ height: calc(100vh - 230px);
border: 2px dashed #ccc;
border-radius: 3px;
text-align: center;
diff --git a/src/app/recent-playlists/recent-playlists.component.scss b/src/app/recent-playlists/recent-playlists.component.scss
index 676645fa2..3402474e9 100644
--- a/src/app/recent-playlists/recent-playlists.component.scss
+++ b/src/app/recent-playlists/recent-playlists.component.scss
@@ -5,7 +5,7 @@ mat-list-item {
padding-top: 0 !important;
}
mat-nav-list {
- max-height: 325px;
+ height: calc(100vh - 182px);
overflow: auto;
}
diff --git a/src/styles.scss b/src/styles.scss
index 29cf02dda..5e33716f6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,7 +7,7 @@ $material-icons-font-path: '~material-icons/iconfont/';
body,
html {
- background: #011627;
+ background: #fff;
font-family: caption;
}