mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01: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="footer">
|
||||||
|
|
||||||
<div class="volume">
|
<div class="volume">
|
||||||
<i class="nb-volume-mute quiet"></i>
|
<i class="nb-volume-mute"></i>
|
||||||
<div class="progress-wrap">
|
<div class="progress-wrap">
|
||||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||||
(input)="setVolume(volume.value)" #volume>
|
(input)="setVolume(volume.value)" #volume>
|
||||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||||
</div>
|
</div>
|
||||||
<i class="nb-volume-high loud"></i>
|
<i class="nb-volume-high"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import '../../../@theme/styles/themes';
|
@import '../../../../@theme/styles/themes';
|
||||||
@import '~bootstrap/scss/mixins/breakpoints';
|
@import '~bootstrap/scss/mixins/breakpoints';
|
||||||
@import '~@nebular/theme/components/card/card.component.theme';
|
@import '~@nebular/theme/components/card/card.component.theme';
|
||||||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||||
|
|
@ -118,7 +118,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.shuffle, .loop {
|
.shuffle, .loop {
|
||||||
font-size: 1.25rem;
|
font-size: 1.5rem;
|
||||||
color: nb-theme(color-fg);
|
color: nb-theme(color-fg);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
|
@ -135,10 +135,7 @@
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
border: 2px solid nb-theme(separator);
|
border: 2px solid nb-theme(separator);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
font-size: 1.75rem;
|
||||||
&::before {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.play {
|
.play {
|
||||||
|
|
@ -150,9 +147,15 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 1.25rem;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0.25rem;
|
||||||
|
color: nb-theme(color-fg);
|
||||||
|
}
|
||||||
|
|
||||||
.progress-wrap {
|
.progress-wrap {
|
||||||
height: 2.25rem;
|
height: 2.25rem;
|
||||||
margin: 0;
|
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) {
|
&.collapsed {
|
||||||
border: none;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls, .volume {
|
.body {
|
||||||
max-width: 20rem;
|
display: flex;
|
||||||
margin: 0 auto;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.collapsed {
|
.footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.cover {
|
||||||
display: none;
|
height: 4.5rem;
|
||||||
}
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.body {
|
img {
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
height: 4.5rem;
|
height: 4.5rem;
|
||||||
flex-direction: row;
|
width: 4.5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
border-radius: 0 0 0 nb-theme(radius);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-wrap {
|
.details {
|
||||||
width: calc(100% - 6rem);
|
margin-left: 0.875rem;
|
||||||
align-self: flex-start;
|
text-align: left;
|
||||||
position: absolute;
|
padding: 0;
|
||||||
margin-top: calc(-0.75rem + 1px);
|
|
||||||
margin-left: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.play, .next {
|
||||||
margin: 0;
|
font-size: 2rem;
|
||||||
|
border: none;
|
||||||
.prev, .shuffle, .loop {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.volume {
|
.volume {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
.cover {
|
||||||
|
.details {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-between(xl, xxl) {
|
@include media-breakpoint-down(is) {
|
||||||
.controls {
|
.cover {
|
||||||
margin: 0.875rem -1rem;
|
.details {
|
||||||
justify-content: space-around;
|
font-size: 0.75rem;
|
||||||
}
|
h4 {
|
||||||
|
font-size: 1rem;
|
||||||
.volume {
|
}
|
||||||
margin: 0 -1rem;
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin: 0.25rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import { Component, HostBinding, Input } from '@angular/core';
|
import { Component, HostBinding, Input } from '@angular/core';
|
||||||
import { PlayerService, Track } from '../../../@core/data/player.service';
|
import { PlayerService, Track } from '../../../../@core/data/player.service';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-player',
|
selector: 'ngx-player',
|
||||||
|
|
@ -1,84 +1,86 @@
|
||||||
<div class="header">Room Management</div>
|
<div class="header">Room Management</div>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
<div class="room-selector">
|
||||||
class="room-selector" [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
<defs>
|
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
||||||
|
<defs>
|
||||||
|
|
||||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||||
</filter>
|
</filter>
|
||||||
|
|
||||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="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="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="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="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="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="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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="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="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="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="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="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="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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="-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="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="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="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="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="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"/>
|
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||||
</pattern>
|
</pattern>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<g>
|
<g>
|
||||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g>
|
<g>
|
||||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
<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-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" />
|
||||||
<path class="room-border" [attr.d]="room.border.d" />
|
<path class="room-border" [attr.d]="room.border.d" />
|
||||||
<path class="room-border room-border-glow" [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"
|
<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>
|
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,11 @@
|
||||||
@import '~@nebular/theme/components/card/card.component.theme';
|
@import '~@nebular/theme/components/card/card.component.theme';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.stroke-pattern {
|
.stroke-pattern {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: #bdc4cd;
|
stroke: #bdc4cd;
|
||||||
|
|
@ -60,12 +65,7 @@
|
||||||
.header {
|
.header {
|
||||||
@include nb-card-header();
|
@include nb-card-header();
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
padding-bottom: 0;
|
||||||
|
|
||||||
.room-selector {
|
|
||||||
width: 80%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include nb-for-theme(cosmic) {
|
@include nb-for-theme(cosmic) {
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,24 @@
|
||||||
flex-direction: row;
|
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 {
|
&.expanded ngx-room-selector {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, HostBinding } from '@angular/core';
|
import { Component, HostBinding } from '@angular/core';
|
||||||
import { NbMediaBreakpoint } from '@nebular/theme';
|
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-rooms',
|
selector: 'ngx-rooms',
|
||||||
|
|
@ -8,7 +8,7 @@ import { NbMediaBreakpoint } from '@nebular/theme';
|
||||||
<nb-card size="large">
|
<nb-card size="large">
|
||||||
<i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
|
<i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
|
||||||
<ngx-room-selector (select)="select($event)"></ngx-room-selector>
|
<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>
|
</nb-card>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
|
|
@ -18,6 +18,19 @@ export class RoomsComponent {
|
||||||
private expanded: boolean;
|
private expanded: boolean;
|
||||||
private selected: number;
|
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) {
|
select(roomNumber) {
|
||||||
if (this.isSelected(roomNumber)) {
|
if (this.isSelected(roomNumber)) {
|
||||||
this.expand();
|
this.expand();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue