mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-28 22:10:42 +00:00
Tune the media player UI for tiny devices
This commit is contained in:
parent
ae8063a0af
commit
ae9ed4e8f9
@ -14,7 +14,6 @@
|
||||
|
||||
.music-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
@ -36,4 +35,7 @@ audio {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 599px) {
|
||||
.music-album {
|
||||
max-height: 32px;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div class="music-list feed-page">
|
||||
<mat-card class="events clickable">
|
||||
<mat-card class="events">
|
||||
<div class="events-header">
|
||||
<div class="music-item">
|
||||
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673891743030-8e480bcd5cf47.jpg?w=400" />
|
||||
@ -28,7 +28,7 @@
|
||||
<!-- <app-event-header [pubkey]="event.pubkey"><span class="event-date clickable">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header> -->
|
||||
</div>
|
||||
</mat-card>
|
||||
<mat-card class="events clickable">
|
||||
<mat-card class="events">
|
||||
<div class="events-header">
|
||||
<div class="music-item">
|
||||
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673395914791-e4b9606d5df43.jpg?w=400" />
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="events clickable">
|
||||
<mat-card class="events">
|
||||
<div class="events-header">
|
||||
<div class="music-item">
|
||||
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673318163134-74d83f9a9216b.jpg?w=400" />
|
||||
|
@ -52,7 +52,7 @@
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* number of lines to show */
|
||||
line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.4em;
|
||||
@ -65,9 +65,8 @@
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* number of lines to show */
|
||||
line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
}
|
||||
|
||||
.media-info-text {
|
||||
@ -87,3 +86,9 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 780px) {
|
||||
.hide-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
@ -1,14 +1,14 @@
|
||||
<div class="media-player">
|
||||
<div class="media-info">
|
||||
<img class="music-album" [src]="media.current?.artwork" />
|
||||
<div class="media-info-text">
|
||||
<div class="media-info-text hide-small">
|
||||
<div class="music-title">{{ media.current?.title }}</div>
|
||||
<div class="music-artist">{{ media.current?.artist }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-controls">
|
||||
<div class="media-controls-container">
|
||||
<button (click)="media.rewind(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
|
||||
<button class="hide-small" (click)="media.rewind(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
|
||||
<mat-icon>replay_30</mat-icon>
|
||||
</button>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<mat-icon>skip_next</mat-icon>
|
||||
</button>
|
||||
|
||||
<button (click)="media.forward(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
|
||||
<button class="hide-small" (click)="media.forward(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
|
||||
<mat-icon>forward_30</mat-icon>
|
||||
</button>
|
||||
<button (click)="media.rate()" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
|
||||
@ -36,11 +36,11 @@
|
||||
</div>
|
||||
<div class="media-audio">
|
||||
<div class="media-audio-container">
|
||||
<button *ngIf="media.muted" mat-icon-button (click)="media.mute()">
|
||||
<button class="hide-small" *ngIf="media.muted" mat-icon-button (click)="media.mute()">
|
||||
<mat-icon>volume_off</mat-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
|
||||
<button class="hide-small" *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
|
||||
<mat-icon>volume_up</mat-icon>
|
||||
</button>
|
||||
<!--
|
||||
@ -52,7 +52,7 @@
|
||||
<mat-icon>volume_down</mat-icon>
|
||||
</button> -->
|
||||
|
||||
<button mat-icon-button>
|
||||
<button class="hide-small" mat-icon-button>
|
||||
<mat-icon>queue_music</mat-icon>
|
||||
</button>
|
||||
<button (click)="media.exit()" mat-icon-button>
|
||||
|
Loading…
Reference in New Issue
Block a user