add controls to current view

thisissoon · Jul 27, 2015 · c11d8f5 · c11d8f5
1 parent a4cd50b
commit c11d8f5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/app/less/default/core/normalize.less b/app/less/default/core/normalize.less
@@ -18,7 +18,7 @@ ng-view {
     position: fixed;
     top: @view-position-top;
 
-    .current ng-view {
+    .current & {
         bottom: 0;
     }
 }
diff --git a/app/less/default/modules/controls.less b/app/less/default/modules/controls.less
@@ -8,11 +8,15 @@
     .flex-direction(row);
     .flex-wrap(nowrap);
     .justify-content(space-between);
-    background-color: @controls-bg;
     height: @controls-height;
     min-width: 340px;
     padding-right: 30px;
     text-align: right;
+
+    .current & {
+        .justify-content(center);
+        padding-right: 0;
+    }
 }
 
 .playing-animation {

diff --git a/app/less/default/modules/track.less b/app/less/default/modules/track.less
@@ -60,6 +60,10 @@
     .align-self(center);
     margin-right: 20px;
     min-width: 400px;
+
+    .current & {
+        margin-right: 0;
+    }
 }
 
 .track-body {

diff --git a/app/partials/player/current.html b/app/partials/player/current.html
@@ -1,10 +1,12 @@
-<div class="container-fluid">
+<div class="container-fluid" ng-show="track.track.uri">
+
     <div class="row">
         <div class="col-xs-4 col-xs-offset-4 text-center">
             <img class="img-responsive" ng-src="{{ track.track.album.images[0].url }}" alt="{{ track.track.name }} album cover">
         </div>
     </div>
     <br>
+
     <div class="row">
         <div class="col-xs-12 text-center">
             <p class="lead track-heading track-info" title="{{ track.name }}">{{ track.track.name }}</p>
@@ -16,4 +18,23 @@
             </p>
         </div>
     </div>
+    <br>
+
+    <div class="row">
+        <div class="col-xs-12">
+            <div class="track-progress" ng-show="trackPositionTimer && track">
+                <div class="progress">
+                    <div class="progress-bar" role="progressbar" aria-valuenow="{{ trackPositionTimer.elapsedTime }}" aria-valuemin="0" aria-valuemax="{{ track.track.duration }}" ng-style="{ width: trackPositionTimer.percent + '%' }"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-xs-12 text-center">
+            <div ng-include="'partials/player/controls.html'"></div>
+        </div>
+    </div>
 </div>
+
+<div ng-include="'partials/loading.html'" ng-show="!track.track.uri"></div>