From 14a53c8b51a620b094b29ab7aa263c8f55f4f245 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Sat, 22 Jun 2019 14:40:25 +0300
Subject: [PATCH] fix(player): prevent control buttons overflow

---
 .../rooms/player/player.component.html        |  6 ++--
 .../rooms/player/player.component.scss        | 34 ++++++++++++++-----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/dashboard/rooms/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html
index d503e2d1..75323a8a 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.html
+++ b/src/app/pages/dashboard/rooms/player/player.component.html
@@ -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">
diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss
index fd4b7846..37b66c51 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@@ -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;
+        }
       }
     }