Layout updates based on feedback

public/manifest.json

@@ -0,0 +1,24 @@
+{
+  "short_name": "Pony.fm",
+  "name": "Pony.fm",
+  "icons": [
+    {
+      "src": "images/icons/app-icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/app-icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/app-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}

resources/assets/scripts/app/controllers/application.coffee

@@ -26,7 +26,7 @@ module.exports = angular.module('ponyfm').controller "application", [
         loadingStateName = null
 
         $scope.menuToggle = () ->
-          $scope.menuActive = !$scope.menuActive
+            $scope.menuActive = !$scope.menuActive
 
         if window.pfm.error
             $state.transitionTo 'errors-' + window.pfm.error
@@ -64,6 +64,7 @@ module.exports = angular.module('ponyfm').controller "application", [
 
         statesPreloaded = {}
         $scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
+            $scope.menuActive = false
             $scope.isPinnedPlaylistSelected = false
 
             if newState.name == 'content.playlist'

resources/assets/scripts/shared/layout.coffee

@@ -16,8 +16,14 @@
 
 window.handleResize = () ->
 	windowHeight = $(window).height()
+	windowWidth = $(window).width()
+	isMobile = windowWidth <= 480
 	$siteBody = $ '.site-body'
-	$siteBody.height windowHeight - $('header').height()
+
+	if isMobile
+		$siteBody.height windowHeight - $('.now-playing').height() * 2
+	else
+		$siteBody.height windowHeight - $('header').height()
 
 	$('.dropdown-menu').each () ->
 		$this = $ this
@@ -26,10 +32,11 @@ window.handleResize = () ->
 			'max-height': newMaxHeight
 
 	$('.stretch-to-bottom').each () ->
-		$this = $ this
-		newHeight = windowHeight - $this.offset().top
-		if newHeight > 0
-			$this.height newHeight
+		if !isMobile
+			$this = $ this
+			newHeight = windowHeight - $this.offset().top
+			if newHeight > 0
+				$this.height newHeight
 
 	$('.revealable').each () ->
 		$this = $ this

resources/assets/styles/app.less

@@ -36,3 +36,4 @@
 @import 'components/uploader';
 @import 'components/search';
 @import 'components/track-editor';
+@import 'mobile';

resources/assets/styles/layout.less

@@ -126,7 +126,7 @@ header {
   margin: 0px;
   font-size: 10pt;
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
 
   li {
@@ -292,65 +292,3 @@ header {
 .bun-bottom {
     bottom: 0;
 }
-
-@media only screen and (max-width: 480px) {
-  header {
-    margin-top: 64px;
-  }
-
-  .site-content, .now-playing {
-    margin-left: 0px;
-  }
-
-  .mobile-header {
-    display: block !important;
-    position: absolute;
-    z-index: 10000;
-    background: #84528A;
-    height: 64px;
-    width: 100%;
-    top: 0;
-
-    .logo {
-      text-align: center;
-      vertical-align: middle;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-      height: 40px;
-      width: 160px;
-      padding-top: 16px;
-
-      > img {
-        max-height: 75%;
-      }
-    }
-  }
-
-  .sidebar {
-    left: -160px;
-    transition: transform 0.5s ease;
-    transform: translateX(0px) translateZ(0);
-    perspective: 1000;
-    backface-visibility: hidden;
-    will-change: transform;
-    z-index: 1000;
-  }
-
-  .sidebar.active {
-    transform: translateX(160px) translateZ(0);
-  }
-
-  .user-details > .avatar > span {
-    display: none !important;
-  }
-
-  .track-player {
-    margin-right: 60px !important;
-    .buttons {
-      li.volume, li.status  {
-        display: none;
-      }
-    }
-  }
-}

resources/assets/styles/mobile.less

@@ -0,0 +1,127 @@
+@media only screen and (max-width: 480px) {
+  html, body {
+    overflow: hidden !important;
+  }
+
+  body > header {
+    margin-top: 64px;
+  }
+
+  .site-content {
+    margin-left: 0px;
+    overflow: scroll;
+  }
+
+  .now-playing {
+    margin-left: 0px;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    z-index: 1010;
+    box-shadow: 0 0 8px rgba(0,0,0,0.5);
+  }
+
+  .user-details {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1002;
+  }
+
+  .mobile-header {
+    display: block !important;
+    position: absolute;
+    z-index: 1001;
+    background: #84528A;
+    height: 64px;
+    width: 100%;
+    top: 0;
+
+    .logo {
+      text-align: center;
+      vertical-align: middle;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      height: 40px;
+      width: 160px;
+      padding-top: 16px;
+
+      > img {
+        max-height: 75%;
+      }
+    }
+  }
+
+  .sidebar {
+    left: -170px;
+    transition: transform 0.5s ease;
+    transform: translateX(0px) translateZ(0);
+    perspective: 1000;
+    backface-visibility: hidden;
+    will-change: transform;
+    z-index: 1011;
+    height: ~"calc(100% - 64px)";
+    box-shadow: 0 8px 8px rgba(0,0,0,0.5);
+
+    > a {
+      display: none;
+    }
+  }
+
+  .sidebar.active {
+    transform: translateX(170px) translateZ(0);
+  }
+
+  .user-details > .avatar {
+    border: 0 !important;
+    box-shadow: initial !important;
+    background: transparent !important;
+
+    > img {
+      border-radius: 20px;
+    }
+
+    > span {
+      display: none !important;
+    }
+  }
+
+  .track-player {
+    margin-right: 0px !important;
+    .buttons {
+      li.volume, li.status  {
+        display: none;
+      }
+    }
+  }
+
+  input.search-input {
+    border: 0;
+  }
+
+  .dropdowns {
+    margin-bottom: 0px;
+    > li {
+      margin-bottom: 10px;
+      > .btn {
+        font-size: 10pt;
+      }
+    }
+  }
+  .details-columns {
+    .cboxElement {
+      display: none;
+    }
+    .right {
+      float: none;
+      padding: 0px;
+      width: auto;
+    }
+    .left {
+      margin-right: 0px;
+      margin-left: 0px;
+      margin-top: 10px;
+    }
+  }
+}

resources/views/shared/_layout.blade.php

@@ -23,6 +23,7 @@
         <meta name="description" content="@{{ description }}" />
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <meta name="theme-color" content="#84528A" />
+        <link rel="manifest" href="/manifest.json">
         <base href="/" />
 
         @yield('styles')