mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
fix(dashboard): improve rooms selector and player responsiveness
This commit is contained in:
KostyaDanovsky
parent
754c148e69
commit
a77a1c3c70
7 changed files with 197 additions and 185 deletions
|
|
@ -34,13 +34,13 @@
|
|||
<div class="footer">
|
||||
|
||||
<div class="volume">
|
||||
<i class="nb-volume-mute quiet"></i>
|
||||
<i class="nb-volume-mute"></i>
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||
(input)="setVolume(volume.value)" #volume>
|
||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||
</div>
|
||||
<i class="nb-volume-high loud"></i>
|
||||
<i class="nb-volume-high"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
|
||||
.shuffle, .loop {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.active {
|
||||
|
|
@ -135,10 +135,7 @@
|
|||
height: 3.5rem;
|
||||
border: 2px solid nb-theme(separator);
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.play {
|
||||
|
|
@ -150,9 +147,15 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 1.25rem;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
margin: 0.25rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
height: 2.25rem;
|
||||
margin: 0;
|
||||
|
|
@ -178,118 +181,96 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quite, .loud {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.quite {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.loud {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
border: none;
|
||||
&.collapsed {
|
||||
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls, .volume {
|
||||
max-width: 20rem;
|
||||
margin: 0 auto;
|
||||
.body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
.cover {
|
||||
height: 4.5rem;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cover {
|
||||
img {
|
||||
height: 4.5rem;
|
||||
flex-direction: row;
|
||||
width: 4.5rem;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
margin: 0;
|
||||
border-radius: 0 0 0 nb-theme(radius);
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-left: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
}
|
||||
border-radius: 0 0 0 nb-theme(radius);
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: calc(100% - 6rem);
|
||||
align-self: flex-start;
|
||||
position: absolute;
|
||||
margin-top: calc(-0.75rem + 1px);
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
.details {
|
||||
margin-left: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
.timing {
|
||||
h4 {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: calc(100% - 6rem);
|
||||
align-self: flex-start;
|
||||
position: absolute;
|
||||
margin-top: calc(-0.75rem + 1px);
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
.timing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0;
|
||||
|
||||
.prev, .shuffle, .loop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0;
|
||||
|
||||
.prev, .shuffle, .loop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.next {
|
||||
font-size: 1.8rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.play {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.play, .next {
|
||||
font-size: 2rem;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.volume {
|
||||
display: none;
|
||||
.volume {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.cover {
|
||||
.details {
|
||||
font-size: 0.875rem;
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xl, xxl) {
|
||||
.controls {
|
||||
margin: 0.875rem -1rem;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.volume {
|
||||
margin: 0 -1rem;
|
||||
|
||||
i {
|
||||
margin: 0.25rem;
|
||||
@include media-breakpoint-down(is) {
|
||||
.cover {
|
||||
.details {
|
||||
font-size: 0.75rem;
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component, HostBinding, Input } from '@angular/core';
|
||||
import { PlayerService, Track } from '../../../@core/data/player.service';
|
||||
|
||||
import { PlayerService, Track } from '../../../../@core/data/player.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-player',
|
||||
|
|
@ -1,84 +1,86 @@
|
|||
<div class="header">Room Management</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class="room-selector" [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
||||
<defs>
|
||||
<div class="room-selector">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
||||
<defs>
|
||||
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stroke-pattern {
|
||||
fill: none;
|
||||
stroke: #bdc4cd;
|
||||
|
|
@ -60,12 +65,7 @@
|
|||
.header {
|
||||
@include nb-card-header();
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.room-selector {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,24 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ngx-room-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
/deep/ .room-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
flex: 1;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
&.expanded ngx-room-selector {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, HostBinding } from '@angular/core';
|
||||
import { NbMediaBreakpoint } from '@nebular/theme';
|
||||
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-rooms',
|
||||
|
|
@ -8,7 +8,7 @@ import { NbMediaBreakpoint } from '@nebular/theme';
|
|||
<nb-card size="large">
|
||||
<i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
|
||||
<ngx-room-selector (select)="select($event)"></ngx-room-selector>
|
||||
<ngx-player [collapsed]="isCollapsed()"></ngx-player>
|
||||
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
|
|
@ -18,6 +18,19 @@ export class RoomsComponent {
|
|||
private expanded: boolean;
|
||||
private selected: number;
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
|
||||
this.breakpoints = breakpointService.getBreakpointsMap();
|
||||
themeService.onMediaQueryChange()
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
}
|
||||
|
||||
select(roomNumber) {
|
||||
if (this.isSelected(roomNumber)) {
|
||||
this.expand();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue