From a77a1c3c70ba9dfd1375003b60412147f1179ec6 Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Tue, 12 Sep 2017 19:22:10 +0300 Subject: [PATCH] fix(dashboard): improve rooms selector and player responsiveness --- .../{ => rooms}/player/player.component.html | 4 +- .../{ => rooms}/player/player.component.scss | 169 ++++++++---------- .../{ => rooms}/player/player.component.ts | 3 +- .../room-selector.component.html | 158 ++++++++-------- .../room-selector.component.scss | 12 +- .../dashboard/rooms/rooms.component.scss | 19 +- .../pages/dashboard/rooms/rooms.component.ts | 17 +- 7 files changed, 197 insertions(+), 185 deletions(-) rename src/app/pages/dashboard/{ => rooms}/player/player.component.html (94%) rename src/app/pages/dashboard/{ => rooms}/player/player.component.scss (71%) rename src/app/pages/dashboard/{ => rooms}/player/player.component.ts (95%) diff --git a/src/app/pages/dashboard/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html similarity index 94% rename from src/app/pages/dashboard/player/player.component.html rename to src/app/pages/dashboard/rooms/player/player.component.html index aeaf6416..35feb6a8 100644 --- a/src/app/pages/dashboard/player/player.component.html +++ b/src/app/pages/dashboard/rooms/player/player.component.html @@ -34,13 +34,13 @@
- +
- +
diff --git a/src/app/pages/dashboard/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss similarity index 71% rename from src/app/pages/dashboard/player/player.component.scss rename to src/app/pages/dashboard/rooms/player/player.component.scss index 1dd39f20..8fea574f 100644 --- a/src/app/pages/dashboard/player/player.component.scss +++ b/src/app/pages/dashboard/rooms/player/player.component.scss @@ -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; + } } } } diff --git a/src/app/pages/dashboard/player/player.component.ts b/src/app/pages/dashboard/rooms/player/player.component.ts similarity index 95% rename from src/app/pages/dashboard/player/player.component.ts rename to src/app/pages/dashboard/rooms/player/player.component.ts index 53845455..1965db37 100644 --- a/src/app/pages/dashboard/player/player.component.ts +++ b/src/app/pages/dashboard/rooms/player/player.component.ts @@ -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', diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html index 7c8a9d81..16acc382 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html @@ -1,84 +1,86 @@
Room Management
- - +
+ + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - - - {{room.name.text}} - - + + + + + {{room.name.text}} + + +
diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss index 9cb14f89..64319be7 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss @@ -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) { diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss index d2c772c9..d26471f6 100644 --- a/src/app/pages/dashboard/rooms/rooms.component.scss +++ b/src/app/pages/dashboard/rooms/rooms.component.scss @@ -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; } diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts index 865319b7..fe03b382 100644 --- a/src/app/pages/dashboard/rooms/rooms.component.ts +++ b/src/app/pages/dashboard/rooms/rooms.component.ts @@ -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'; - + `, }) @@ -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();