styling for current view

thisissoon · Jul 29, 2015 · efe78c9 · efe78c9
1 parent b5e8d5f
commit efe78c9
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 43 deletions.
diff --git a/app/less/default/core/normalize.less b/app/less/default/core/normalize.less
@@ -20,5 +20,6 @@ ng-view {
 
     .current-view & {
         bottom: 0;
+        left: 0;
     }
 }
diff --git a/app/less/default/modules/current.less b/app/less/default/modules/current.less
@@ -3,6 +3,43 @@
 // --------------------------------------------------
 
 .current {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+
+    .track,
+    .controls-wrapper {
+        background-color: rgba(red(@track-bg), green(@track-bg), blue(@track-bg), 0.9);
+    }
+
+    .track {
+        padding-left: 20px;
+
+        .track-info,
+        .text-muted {
+            color: @white;
+        }
+
+        .btn-context {
+            .opacity(1);
+        }
+    }
+
+    .controls-wrapper {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+    }
+
+    .progress {
+        border-radius: 0;
+        margin-top: 0;
+    }
+
     .controls {
         .btn {
             .square(50px);
@@ -19,6 +56,23 @@
     }
 
     .timer {
+        display: block;
+        font-size: @font-size-small;
+        left: 0;
+        height: 20px;
         margin-top: 10px;
+        position: absolute;
+        right: 0;
+        top: @progress-height;
+
+        span {
+            float: left;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        span + span {
+            float: right;
+        }
     }
 }
diff --git a/app/less/default/modules/sidebar.less b/app/less/default/modules/sidebar.less
@@ -16,7 +16,7 @@
     z-index: @zindex-sidebar;
 
     .current-view & {
-        bottom: 0;
+        left: -@sidebar-width;
     }
 }
 

diff --git a/app/less/main.less b/app/less/main.less
@@ -108,4 +108,5 @@
     @import "mobile/modules/stats.less";
     @import "mobile/modules/artists.less";
     @import "mobile/modules/albums.less";
+    @import "mobile/modules/current.less";
 }
diff --git a/app/less/mobile/modules/current.less b/app/less/mobile/modules/current.less
@@ -0,0 +1,24 @@
+//
+// Current
+// --------------------------------------------------
+
+.current {
+
+    .track {
+        padding-left: 10px;
+    }
+
+    .controls {
+        margin-top: 30px;
+        min-width: 0;
+
+        .btn {
+            .square(40px);
+            font-size: 1em;
+        }
+
+        .volume-control {
+            width: 129px;
+        }
+    }
+}
diff --git a/app/partials/player/current.html b/app/partials/player/current.html
@@ -1,51 +1,29 @@
-<div class="current">
-    <div class="container-fluid" ng-show="track.track.uri">
+<div class="current img"
+     ng-style="{
+        'background-image': 'url(' + track.track.album.images[0].url + ')'
+     }">
 
-        <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>
-                <p class="text-muted track-info" title="{{ track.allArtists }}">
-                    <a class="text-muted" ng-repeat-start="artist in track.track.artists" ng-href="artists/{{ artist.uri }}">{{ artist.name }}</a><span ng-repeat-end ng-if="!$last">, </span>
-                </p>
-                <p class="text-muted track-info hidden-xs" title="{{ track.track.album.name }}">
-                    <a class="text-muted" ng-href="albums/{{ track.track.album.uri }}">{{ track.track.album.name }}</a>
-                </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 ng-show="track.track.uri">
+
+        <fm-track class="track" data-spotify-track="track.track" data-user="track.user"></fm-track>
+
+        <div class="controls-wrapper">
+
+            <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 class="row">
-            <div class="col-xs-12">
-                <p class="timer lead text-center">
-                    <span ng-show="trackPositionTimer">{{ trackPositionTimer.elapsedTime | date: "H:mm:ss" | removeLeadingZeros }}</span>
-                    <span ng-show="trackPositionTimer" class="hidden-xs">/</span>
-                    <span class="text-muted">{{ track.track.duration | date: "H:mm:ss" | removeLeadingZeros }}</span>
-                </p>
-            </div>
-        </div>
+            <p class="timer text-center">
+                <span ng-show="trackPositionTimer">{{ trackPositionTimer.elapsedTime | date: "H:mm:ss" | removeLeadingZeros }}</span>
+                <span class="text-muted">{{ track.track.duration | date: "H:mm:ss" | removeLeadingZeros }}</span>
+            </p>
+
+            <div class="text-center" ng-include="'partials/player/controls.html'"></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>