Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(player): prevent control buttons overflow

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-22 14:40:25 +03:00
parent 0347c5668e
commit 14a53c8b51
2 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/dashboard/rooms/player/player.component.html
View file

@ -5,7 +5,7 @@
<div class="track-info"> <div class="track-info">
<div class="cover" style.background-image="url('{{track.cover}}')"></div> <div class="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details"> <div class="details">
<h4>{{ track.name }}</h4> <h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
<span>{{ track.artist }}</span> <span>{{ track.artist }}</span>
</div> </div>
</div> </div>
@ -28,11 +28,11 @@
<button class="control-button" nbButton ghost size="medium" (click)="prev()"> <button class="control-button" nbButton ghost size="medium" (click)="prev()">
<nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon> <nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
</button> </button>
<button class="control-button" nbButton ghost size="medium" (click)="playPause()"> <button class="control-button play-button" nbButton ghost size="medium" (click)="playPause()">
<nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva"> <nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
</nb-icon> </nb-icon>
</button> </button>
<button class="control-button" nbButton ghost size="medium" (click)="next()"> <button class="control-button skip-forward-button" nbButton ghost size="medium" (click)="next()">
<nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon> <nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
</button> </button>
<button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop"> <button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">

34
src/app/pages/dashboard/rooms/player/player.component.scss
View file

@ -12,6 +12,13 @@
height: 100%; height: 100%;
} }
.subtitle {
font-family: nb-theme(text-subtitle-font-family);
font-size: nb-theme(text-subtitle-font-size);
font-weight: nb-theme(text-subtitle-font-weight);
line-height: nb-theme(text-subtitle-line-height);
}
.body { .body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -233,18 +240,27 @@
width: inherit; width: inherit;
margin: 0; margin: 0;
i { button {
width: inherit; azaza: ololo;
height: inherit;
}
.prev, .shuffle, .loop {
display: none; display: none;
} }
.play-button,
.skip-forward-button {
display: block;
font-size: 1.3rem;
}
.play, .next { @include media-breakpoint-down(is) {
font-size: 2rem; .play-button,
border: none; .skip-forward-button {
padding: 0.5rem;
}
}
@include media-breakpoint-down(xs) {
.skip-forward-button {
display: none;
}
} }
} }