From 21f6b96fbe08c36c6558394d002f9d925b80c4ed Mon Sep 17 00:00:00 2001 From: John Cass Date: Sat, 18 Feb 2017 14:21:57 +0200 Subject: [PATCH] Fix panel wrap push on desktop (#232) Fix panel wrap push on desktop. --- README.rst | 1 + .../static/css/webclient.css | 23 +++++++++-------- mopidy_musicbox_webclient/static/js/gui.js | 25 ++++++------------- mopidy_musicbox_webclient/static/mb.appcache | 2 +- 4 files changed, 22 insertions(+), 29 deletions(-) diff --git a/README.rst b/README.rst index 7bb0b8b..27e49c9 100644 --- a/README.rst +++ b/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 `_, `#93 `_). - Playlists will now list tracks even if they are no longer available in the library. (Fixes: `#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) ------------------- diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css index b5b39ec..d9695e7 100644 --- a/mopidy_musicbox_webclient/static/css/webclient.css +++ b/mopidy_musicbox_webclient/static/css/webclient.css @@ -632,27 +632,30 @@ a { color: #efefef; } -/*tablets and desktop*/ -@media (min-width: 35em) { +/*desktop*/ +@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-open .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-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal { + .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 .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, + .ui-responsive-panel.ui-page-panel .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-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-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-open .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-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-reveal.ui-panel-content-fixed-toolbar-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 .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; } diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js index 1525dd0..25a284c 100644 --- a/mopidy_musicbox_webclient/static/js/gui.js +++ b/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 () { - resizeMb() - }) - resizeMb() + $(window).resize(resizeMb).resize() // Connect to server var websocketUrl = $(document.body).data('websocket-url') diff --git a/mopidy_musicbox_webclient/static/mb.appcache b/mopidy_musicbox_webclient/static/mb.appcache index 76cde83..d32dd12 100644 --- a/mopidy_musicbox_webclient/static/mb.appcache +++ b/mopidy_musicbox_webclient/static/mb.appcache @@ -1,6 +1,6 @@ CACHE MANIFEST -# 2017-02-16:v2 +# 2017-02-18:v1 NETWORK: *