shrink controls width when controls are hidden

thisissoon · Jul 27, 2015 · 3adae01 · 3adae01
1 parent a54224a
commit 3adae01
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/app/less/default/modules/controls.less b/app/less/default/modules/controls.less
@@ -27,6 +27,10 @@
     width: 129px;
 }
 
+.no-controls.controls {
+    min-width: 70px;
+}
+
 fm-slider {
     display: inline-block;
     height: max(@thumb-height, @track-height);

diff --git a/app/less/default/modules/footer.less b/app/less/default/modules/footer.less
@@ -29,4 +29,14 @@
         right: 0;
         width: @controls-width;
     }
+
+    .no-controls {
+        &.track {
+            right: 70px;
+        }
+
+        &.controls {
+            width: 70px;
+        }
+    }
 }
diff --git a/app/partials/footer.html b/app/partials/footer.html
@@ -7,9 +7,9 @@
 
 <div ng-controller="PlayerCtrl">
 
-    <fm-track class="track" ng-show="track.track.uri" data-spotify-track="track.track" data-user="track.user" data-timer="trackPositionTimer"></fm-track>
+    <fm-track class="track" ng-show="track.track.uri" data-spotify-track="track.track" data-user="track.user" data-timer="trackPositionTimer" ng-class="{ 'no-controls': !isAuthenticated() }"></fm-track>
 
-    <div class="controls" ng-show="track.track.uri">
+    <div class="controls" ng-show="track.track.uri" ng-class="{ 'no-controls': !isAuthenticated() }">
 
         <div class="playing-animation"
              ng-switch="paused">