Track player optimisations for mobile

public/templates/directives/track-player.html

@@ -1,7 +1,9 @@
 <div class="single-player">
     <a href="#" class="play-button" pfm-eat-click ng-click="play()">
+        <div class="button-container">
           <i class="icon-play" ng-if="!track.isPlaying"></i>
           <i class="icon-pause" ng-if="track.isPlaying"></i>
+        </div>
     </a>
-    <img pfm-src-loader="::track.covers.thumbnail" pfm-src-size="thumbnail" />
+    <img pfm-src-loader="::image" pfm-src-size="thumbnail" />
 </div>

public/templates/tracks/frame.html

@@ -42,7 +42,7 @@
     </ul>
 
     <header>
-        <pfm-track-player track="::track"></pfm-track-player>
+        <pfm-track-player class="hidden-xs" track="::track"></pfm-track-player>
         <h1>{{track.title}}</h1>
         <h2>
 			<span ng-if="track.album">
@@ -53,5 +53,7 @@
         </h2>
     </header>
 
+    <pfm-track-player class="visible-xs-block" track="::track" size="normal"></pfm-track-player>
+
     <div ui-view></div>
 </div>

resources/assets/scripts/app/directives/track-player.coffee

@@ -19,12 +19,17 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackPlayer', () ->
     templateUrl: '/templates/directives/track-player.html'
     scope:
         track: '=track',
+        size: '@size',
         class: '@class'
     replace: true
 
     controller: [
         '$scope', 'player'
         ($scope, player) ->
+            if $scope.size == 'normal'
+                $scope.image = $scope.track.covers.normal
+            else
+                $scope.image = $scope.track.covers.thumbnail
             $scope.play = () ->
                 player.playTracks [$scope.track], 0
     ]

resources/assets/styles/content.less

@@ -325,6 +325,18 @@ html .single-player .play-button {
   height: @icon-size;
   position: relative;
 
+  .button-container {
+    display: table;
+    width: 100%;
+    height: 100%;
+
+    > i {
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+
   .play-button {
     .transition(background 250ms ease-out);
 
@@ -404,10 +416,10 @@ html {
 
     line-height: normal;
     padding: 0px;
-    padding: 5px 0px;
+    margin: 5px 0px;
     padding-right: 10px;
     position: relative;
-    height: 56px;
+    height: 43px;
 
     .icons {
       float: right;

resources/assets/styles/layout.less

@@ -45,9 +45,11 @@ header {
       float: right;
       padding: 2px;
       cursor: pointer;
+      text-decoration: none;
 
-      &:hover {
+      &:hover, &:focus {
         background: #ddd;
+        color: darken(@pfm-purple, 20%);
       }
 
       span {

resources/assets/styles/mobile.less

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 768px) {
   html, body {
     overflow: hidden !important;
   }
@@ -152,4 +152,32 @@
       }
     }
   }
+
+  .track-details {
+    .single-player {
+      &.visible-xs-block {
+        float: none;
+        width: 100%;
+        height: 100%;
+      }
+
+      a {
+        font-size: 22pt;
+        background: rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    header {
+      margin-bottom: 0px;
+      h1 {
+        font-size: 16pt;
+      }
+      h2 {
+        font-size: 11pt;
+      }
+      h1, h2 {
+        margin-left: 0px !important;
+      }
+    }
+  }
 }

resources/views/shared/_app_layout.blade.php

@@ -76,7 +76,7 @@
             <a href="/">
               <img src="/images/ponyfm-logo-white.svg" class="logo">
             </a>
-            <li><pfm-search></pfm-search></li>
+            <li><pfm-search class="hidden-xs"></pfm-search></li>
             <li ng-class="{selected: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a href="/tracks">Tracks</a></li>
             <li ng-class="{selected: stateIncludes('content.albums') || stateIncludes('content.album')}"><a href="/albums">Albums</a></li>
             <li ng-class="{selected: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a href="/playlists">Playlists</a></li>