From a20c05ba88f80a775938cae3f14e4adaab7a0bbc Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Wed, 13 Sep 2017 17:44:33 +0300
Subject: [PATCH] fix(dashboard): improve player and rooms responsiveness

---
 .../contacts/contacts.component.html          |  2 +-
 .../rooms/player/player.component.html        |  6 +-
 .../rooms/player/player.component.scss        | 86 ++++++++++++-------
 .../dashboard/rooms/rooms.component.scss      | 10 ++-
 .../pages/dashboard/rooms/rooms.component.ts  |  4 +-
 5 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html
index 4e3e7cb5..fc6d5535 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.html
+++ b/src/app/pages/dashboard/contacts/contacts.component.html
@@ -1,4 +1,4 @@
-<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'large' : 'xlarge'">
+<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
   <nb-tabset fullWidth>
     <nb-tab tabTitle="Contacts">
       <div class="contact" *ngFor="let c of contacts">
diff --git a/src/app/pages/dashboard/rooms/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html
index 35feb6a8..ecf18a50 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.html
+++ b/src/app/pages/dashboard/rooms/player/player.component.html
@@ -2,11 +2,11 @@
 
 <div class="body">
 
-  <div class="cover">
-    <img [src]="track.cover">
+  <div class="track-info">
+    <div class="cover" style.background-image="url('{{track.cover}}')"></div>
     <div class="details">
       <h4>{{ track.name }}</h4>
-      <span class="artist">{{ track.artist }}</span>
+      <span>{{ track.artist }}</span>
     </div>
   </div>
 
diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss
index 3bb46fe4..9ac569b5 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@@ -8,14 +8,16 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-left: 2px solid nb-theme(separator);
+  height: 100%;
 
   .header {
     @include nb-card-header();
   }
 
   .body {
-    padding: nb-theme(card-padding);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
   .footer {
@@ -23,23 +25,28 @@
     border-top: 1px solid nb-theme(separator);
   }
 
-  .cover {
+  .track-info {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    flex: 1;
+    padding: nb-theme(card-padding);
 
-    img {
-      height: 10rem;
-      width: 10rem;
+    .cover {
       border-radius: nb-theme(radius) / 2;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: 10rem;
+      height: 10rem;
     }
 
     .details {
       text-align: center;
-      padding: 1.75rem 0 1.5rem;
+      padding-top: 1.5rem;
 
-      .artist {
+      span {
         color: nb-theme(color-fg);
       }
     }
@@ -48,7 +55,6 @@
   .progress-wrap {
     position: relative;
     height: 1rem;
-    margin: 0 -#{nb-theme(card-padding)};
 
     .progress-foreground {
       background-color: nb-theme(color-success);
@@ -97,18 +103,20 @@
 
   .timing {
     padding-top: 0.5rem;
-    margin: 0 -0.25rem;
+    margin: 0 0.5rem;
     display: flex;
     justify-content: space-between;
     color: nb-theme(color-fg);
   }
 
   .controls {
-    // TODO fix controls font-size when complete icons fo
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0.875rem 1.25rem 0;
+    padding: 0.25rem 2rem 1rem;
+    max-width: 400px;
+    width: 100%;
+    margin: 0 auto;
 
     i {
       display: flex;
@@ -147,8 +155,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0;
+    margin: 0 auto;
     position: relative;
+    max-width: 400px;
 
     i {
       font-size: 1.5rem;
@@ -184,6 +193,10 @@
   }
 
   &.collapsed {
+    $player-height: 4.5rem;
+
+    border: none;
+    height: $player-height;
 
     .header {
       display: none;
@@ -191,6 +204,7 @@
 
     .body {
       display: flex;
+      flex-direction: row;
       justify-content: space-between;
       align-items: center;
       padding: 0;
@@ -200,16 +214,17 @@
       display: none;
     }
 
-    .cover {
-      height: 4.5rem;
+    .track-info {
+      height: $player-height;
       flex-direction: row;
-      margin: 0;
+      padding: 0;
+      flex: initial;
 
-      img {
-        height: 4.5rem;
-        width: 4.5rem;
-        margin: 0;
+      .cover {
+        height: $player-height;
+        width: $player-height;
         border-radius: 0 0 0 nb-theme(radius);
+        flex: none;
       }
 
       .details {
@@ -228,7 +243,7 @@
       align-self: flex-start;
       position: absolute;
       margin-top: calc(-0.75rem + 1px);
-      margin-left: 4.5rem;
+      margin-left: $player-height;
     }
 
     .timing {
@@ -236,7 +251,10 @@
     }
 
     .controls {
-      margin: 0 1rem 0 0;
+      padding: 0 1rem 0 0;
+      max-width: inherit;
+      width: inherit;
+      margin: 0;
 
       i {
         width: inherit;
@@ -256,26 +274,28 @@
     .volume {
       display: none;
     }
-  }
 
-  @include media-breakpoint-down(sm) {
-    .cover {
-      .details {
-        font-size: 0.875rem;
+    .track-info .details {
+      @include media-breakpoint-down(sm) {
         h4 {
           font-size: 1.25rem;
         }
+        span {
+          font-size: 0.875rem;
+        }
       }
-    }
-  }
 
-  @include media-breakpoint-down(is) {
-    .cover {
-      .details {
-        font-size: 0.75rem;
+      @include media-breakpoint-down(is) {
         h4 {
           font-size: 1rem;
         }
+        span {
+          font-size: 0.75rem;
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-height: calc(0.75rem * #{nb-theme(line-height)});
+        }
       }
     }
   }
diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss
index d26471f6..c4c69cc8 100644
--- a/src/app/pages/dashboard/rooms/rooms.component.scss
+++ b/src/app/pages/dashboard/rooms/rooms.component.scss
@@ -5,6 +5,7 @@
 @include nb-install-component() {
   ngx-room-selector {
     width: 70%;
+    border-right: 2px solid nb-theme(separator);
   }
 
   ngx-player {
@@ -40,6 +41,7 @@
 
     ngx-room-selector, ngx-player {
       width: 100%;
+      border: none;
     }
 
     nb-card {
@@ -47,9 +49,11 @@
       justify-content: space-between;
 
       .collapse {
-        display: flex;
-        justify-content: center;
-        align-self: center;
+        display: inline-block;
+        position: absolute;
+        top: 0.5rem;
+        left: 50%;
+        transform: translateX(-50%);
         font-size: 3rem;
         color: nb-theme(color-fg);
         transition: display 0.3s ease;
diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts
index fe03b382..45bbad88 100644
--- a/src/app/pages/dashboard/rooms/rooms.component.ts
+++ b/src/app/pages/dashboard/rooms/rooms.component.ts
@@ -5,8 +5,8 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
   selector: 'ngx-rooms',
   styleUrls: ['./rooms.component.scss'],
   template: `
-    <nb-card size="large">
-      <i (click)="collapse()" class="ion-ios-arrow-down collapse" [hidden]="isCollapsed()"></i>
+    <nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : 'medium'">
+      <i (click)="collapse()" class="nb-arrow-down collapse" [hidden]="isCollapsed()"></i>
       <ngx-room-selector (select)="select($event)"></ngx-room-selector>
       <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
     </nb-card>