TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-21 00:13:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated styling of recent videos component, the search/sort options now look good on mobile

Browse Source
This commit is contained in:
Isaac Abadi
2020-08-14 17:41:55 -04:00
parent e2cec9321e
commit 4302625858
2 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/components/recent-videos/recent-videos.component.html
View File

@@ -1,26 +1,30 @@
<div class="flex-grid"> <div class="container-fluid">
<div class="col"> <div class="row">
<div style="display: inline-block;"> <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
<mat-form-field style="width: 132px;"> <div>
<mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)"> <div style="display: inline-block;">
<mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value"> <mat-form-field style="width: 132px;">
{{filterOption['value']['label']}} <mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
</mat-option> <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
</mat-select> {{filterOption['value']['label']}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="sort-dir-div">
<button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
</div>
</div>
</div>
<div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
<h4 style="text-align: center">My videos</h4>
</div>
<div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
<mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
<input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
<div style="display: inline-block;">
<button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
</div>
</div>
<div class="col">
<h4 style="text-align: center">My videos</h4>
</div>
<div class="col" style="top: 25px;">
<mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
<input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div> </div>
</div> </div>
<div> <div>

10
src/app/components/recent-videos/recent-videos.component.scss
View File

@@ -9,7 +9,7 @@
} }
.search-bar-unfocused { .search-bar-unfocused {
width: 100px; width: 132px;
} }
.search-input { .search-input {
@@ -28,7 +28,13 @@
padding-right: 12px; padding-right: 12px;
} }
.col { .column {
width: 33%; width: 33%;
display: inline-block; display: inline-block;
} }
.sort-dir-div {
display: inline-block;
position: absolute;
top: 10px;
}