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

Unified file card now supports small and medium size

Browse Source 
Duration styling/position updated and added download date time
This commit is contained in:
Isaac Abadi
2020-08-02 18:03:29 -04:00
parent fd35153721
commit f0c4ed4590
3 changed files with 121 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/components/unified-file-card/unified-file-card.component.html
View File

@@ -1,7 +1,5 @@
<div style="position: relative; width: fit-content;">
<div class="duration-time">
<ng-container i18n="Video duration label">Length:</ng-container>&nbsp;{{file_length}}
</div>
<div class="download-time">{{file_obj.registered | date:'shortDate'}}</div>
<button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<mat-menu #action_menu="matMenu">
<button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
@@ -13,13 +11,20 @@
<mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
</button>
</mat-menu>
<mat-card (click)="navigateToFile()" matRipple class="example-card mat-elevation-z6">
<mat-card [matTooltip]="file_obj.title" (click)="navigateToFile()" matRipple class="file-mat-card mat-elevation-z6" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium'}">
<div style="padding:5px">
<div *ngIf="file_obj.thumbnailURL" class="img-div">
<img class="image" [src]="file_obj.thumbnailURL" alt="Thumbnail">
<div style="position: relative">
<img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
<div class="duration-time">
{{file_length}}
</div>
</div>
</div>
<span class="max-two-lines"><strong>{{file_title}}</strong></span>
<span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{file_obj.title}}</strong></span>
</div>
</mat-card>
</div>