Fix panel wrap push on desktop (#232)

Fix panel wrap push on desktop.

README.rst

@@ -130,6 +130,7 @@ v2.4.0 (UNRELEASED)
 - The last scroll position is now always saved when navigating between pages or browsing the library.
   (Fixes: `#73 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/73>`_, `#93 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/93>`_).
 - Playlists will now list tracks even if they are no longer available in the library. (Fixes: `#226 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/226>`_).
+- Fixed an issue on Safari where the first page to load would be too wide to fit on the screen.
 
 v2.3.0 (2016-05-15)
 -------------------

mopidy_musicbox_webclient/static/css/webclient.css

@@ -632,27 +632,30 @@ a {
     color: #efefef;
 }
 
-/*tablets and desktop*/
+/*desktop*/
-@media (min-width: 35em) {
+@media (min-width: 55em) {
     /* panel workaround to make it responsive wrap push on wide viewports once open */
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
         margin-right: 17em;
     }
 
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-push.ui-panel-content-fixed-toolbar-position-right,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-push.ui-panel-content-fixed-toolbar-position-right,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-reveal.ui-panel-content-fixed-toolbar-position-right,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-reveal.ui-panel-content-fixed-toolbar-position-right,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
-    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
+    .ui-responsive-panel.ui-page-panel .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
         margin: 0 0 0 17em;
     }
 
     .ui-responsive-panel .ui-panel-dismiss-display-reveal {
         display: none;
     }
+}
 
+/*tablets and desktop*/
+@media (min-width: 35em) {
     .popupDialog {
         min-width: 320px;
     }

mopidy_musicbox_webclient/static/js/gui.js

@@ -20,6 +20,12 @@ function resetSong () {
 }
 
 function resizeMb () {
+    if ($(window).width() < 560) {
+        $('#panel').panel('close')
+    } else {
+        $('#panel').panel('open')
+    }
+
     $('#infoname').html(songdata.track.name)
     $('#infoartist').html(artiststext)
 
@@ -287,10 +293,6 @@ function initSocketevents () {
     })
 }
 
-$(document).bind('pageinit', function () {
-    resizeMb()
-})
-
 /** ************
  * gui stuff  *
  **************/
@@ -371,10 +373,6 @@ function locationHashChanged () {
 
     setHeadline(divid)
 
-    if ($(window).width() < 560) {
-        $('#panel').panel('close')
-    }
-
     $('.mainNav a').removeClass($.mobile.activeBtnClass)
     // i don't know why some li elements have those classes, but they do, so we need to remove them
     $('.mainNav li').removeClass($.mobile.activeBtnClass)
@@ -515,12 +513,6 @@ $(document).ready(function (event) {
         }
     })
 
-    if ($(window).width() < 980) {
-        $('#panel').panel('close')
-    } else {
-        $('#panel').panel('open')
-    }
-
     $.event.special.swipe.horizontalDistanceThreshold = 125 // (default: 30px)  Swipe horizontal displacement must be more than this.
     $.event.special.swipe.verticalDistanceThreshold = 50 // (default: 75px)  Swipe vertical displacement must be less than this.
     $.event.special.swipe.durationThreshold = 500
@@ -556,10 +548,7 @@ $(document).ready(function (event) {
     $('#volumeslider').on('slidestop', function () { volumeSliding = false })
     $('#volumeslider').on('change', function () { controls.doVolume($(this).val()) })
 
-    $(window).resize(function () {
+    $(window).resize(resizeMb).resize()
-        resizeMb()
-    })
-    resizeMb()
 
     // Connect to server
     var websocketUrl = $(document.body).data('websocket-url')

mopidy_musicbox_webclient/static/mb.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2017-02-16:v2
+# 2017-02-18:v1
 
 NETWORK:
 *