Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +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="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details">
<h4>{{ track.name }}</h4>
<h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
<span>{{ track.artist }}</span>
</div>
</div>
@ -28,11 +28,11 @@
<button class="control-button" nbButton ghost size="medium" (click)="prev()">
<nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
</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>
</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>
</button>
<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%;
}
.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 {
display: flex;
flex-direction: column;
@ -233,18 +240,27 @@
width: inherit;
margin: 0;
i {
width: inherit;
height: inherit;
}
.prev, .shuffle, .loop {
button {
azaza: ololo;
display: none;
}
.play-button,
.skip-forward-button {
display: block;
font-size: 1.3rem;
}
.play, .next {
font-size: 2rem;
border: none;
@include media-breakpoint-down(is) {
.play-button,
.skip-forward-button {
padding: 0.5rem;
}
}
@include media-breakpoint-down(xs) {
.skip-forward-button {
display: none;
}
}
}