mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-11 19:46:16 -08:00
style: redesign start page
This commit is contained in:
4gray committed
1 parent
3ae9a3c95e
commit
de4c3d6813
8 files changed
+88
-76
No files matched your search
@@ -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,
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div fxFlex="100px">
|
||||
<img src="./assets/icons/icon-tv-256.png" height="100" />
|
||||
</div>
|
||||
<div fxFlex="100" fxLayoutAlign="start center">
|
||||
<div fxLayout="column">
|
||||
<div fxFlex class="title">IPTVnator</div>
|
||||
<div class="subtitle">Please select a playlist from the list or add a new playlist via file upload or via url</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
:host {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.1em
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #999;
|
||||
font-size: 0.9em;
|
||||
margin-top: 10px
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
})
|
||||
export class HeaderComponent {}
|
||||
@@ -1,48 +1,50 @@
|
||||
<div style="padding: 15px;">
|
||||
<div class="logo-container">
|
||||
<img src="./assets/icons/icon.png" class="logo" />
|
||||
</div>
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxFlexAlign="start start">
|
||||
<div [fxFlex]="playlists?.length > 0 ? 50 : 100">
|
||||
<mat-tab-group [dynamicHeight]="true">
|
||||
<mat-tab label="Add via file upload">
|
||||
<ng-template matTabContent>
|
||||
<div class="drop-container" ngFileDrop [options]="options"
|
||||
(uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
|
||||
<mat-icon class="upload-icon">save_alt</mat-icon>
|
||||
<p class="upload-title">
|
||||
Drag & drop files here
|
||||
</p>
|
||||
<p>or</p>
|
||||
<input type="file" ngFileSelect [options]="options"
|
||||
(uploadOutput)="onUploadOutput($event)" class="input-file" name="file" id="file"
|
||||
[uploadInput]="uploadInput" multiple>
|
||||
<label for="file">
|
||||
Choose a playlist
|
||||
</label>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab label="Add via URL">
|
||||
<ng-template matTabContent>
|
||||
<div class="url-form">
|
||||
<mat-form-field class="full-width">
|
||||
<input matInput placeholder="Playlist URL (m3u, m3u8)" [(ngModel)]="playlistUrl">
|
||||
</mat-form-field>
|
||||
<button mat-flat-button [disabled]="!playlistUrl" color="primary" (click)="sendPlaylistsUrl()">ADD PLAYLIST</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div *ngIf="playlists?.length > 0" fxFlex="50" id="recent-playlists">
|
||||
<mat-card-subtitle>Added playlists ({{playlists.length}})</mat-card-subtitle>
|
||||
<app-header fxLayout="row"></app-header>
|
||||
<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> Recently added playlists
|
||||
</ng-template>
|
||||
<app-recent-playlists [playlists]="playlists" (playlistClicked)="getPlaylist($event)"
|
||||
(removeClicked)="removePlaylist($event)">
|
||||
</app-recent-playlists>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">attach_file</mat-icon> Add via file upload
|
||||
</ng-template>
|
||||
<ng-template matTabContent>
|
||||
<div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)"
|
||||
[uploadInput]="uploadInput">
|
||||
<mat-icon class="upload-icon">save_alt</mat-icon>
|
||||
<p class="upload-title">
|
||||
Drag & drop files here
|
||||
</p>
|
||||
<p>or</p>
|
||||
<input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)"
|
||||
class="input-file" name="file" id="file" [uploadInput]="uploadInput" multiple>
|
||||
<label for="file">
|
||||
Choose a playlist
|
||||
</label>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">link</mat-icon> Add via URL
|
||||
</ng-template>
|
||||
<ng-template matTabContent>
|
||||
<div class="url-form">
|
||||
<mat-form-field class="full-width">
|
||||
<input matInput placeholder="Playlist URL (m3u, m3u8)" [(ngModel)]="playlistUrl">
|
||||
</mat-form-field>
|
||||
<button mat-flat-button [disabled]="!playlistUrl" color="primary"
|
||||
(click)="sendPlaylistsUrl()">ADD PLAYLIST</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
|
||||
@@ -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;
|
||||
|
||||
@@ -5,7 +5,7 @@ mat-list-item {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
mat-nav-list {
|
||||
max-height: 325px;
|
||||
height: calc(100vh - 182px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ $material-icons-font-path: '~material-icons/iconfont/';
|
||||
|
||||
body,
|
||||
html {
|
||||
background: #011627;
|
||||
background: #fff;
|
||||
font-family: caption;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user