diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
index 7a3c2c1..43d61de 100644
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -18,52 +18,58 @@
.header-breakpoint.ui-grid-b .ui-block-a {
width: 30%;
}
+
.header-breakpoint.ui-grid-b .ui-block-b {
width: 30%;
}
+
.header-breakpoint.ui-grid-b .ui-block-c {
width: 30.1%;
}
+
/*playlists*/
.pl-breakpoint.ui-grid-a .ui-block-a {
width: 32.95%;
}
+
.pl-breakpoint.ui-grid-a .ui-block-b {
width: 65.4%;
}
+
.pl-breakpoint.ui-grid-a .ui-block-a {
clear: left;
}
+
.pl-breakpoint.ui-grid-a .ui-block-a {
clear: left;
}
+
#playlisttracksdiv {
margin-left: 10px;
}
+
#playlisttracksback {
display:none;
}
+
#playlisttracksdiv {
display:block;
}
+
#playlistslistdiv {
display:block;
}
+
/*search*/
.srch-breakpoint.ui-grid-a .ui-block-b {
margin-left: .5em;
}
+
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
width: 49%;
}
-/* .scroll {
- overflow-y: auto;
- overflow-x: hidden;
- }
-*/
}
-
/* phone landscape */
@media all and (max-width: 960px) {
/*header*/
@@ -71,45 +77,50 @@
width: 35%;
clear: left;
}
+
.header-breakpoint.ui-grid-b .ui-block-b {
display: none;
}
+
.header-breakpoint.ui-grid-b .ui-block-c {
width: 33%;
}
+
/*playlists*/
.pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
width: 100%;
}
+
/*search*/
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
width: 100%;
}
-/* .scroll {
- width: 100%;
- heigth: 99%;
- }
-*/
+
#playlisttracksback {
display:block;
}
+
#playlisttracksdiv {
display:none;
}
+
#playlistslistdiv {
display:block;
}
+
}
-/***********
- * Side Panel and Navigation
- */
+/*****************************
+ * Side Panel and Navigation *
+ *****************************/
.mainNav .fa{
float: right;
}
+
.mainNav .navtxt{
float: left;
}
+
.mainNav .navtxt:after{
clear: left;
}
@@ -137,9 +148,9 @@
font-size: 15px;
}
-/***********************
- * Track Slider
- ***********************/
+/******************
+ * Track Slider *
+ ******************/
#trackslider {
display: inline;
@@ -180,9 +191,9 @@
display: inline;
}
-/***********
- * pages, content
- */
+/********************
+ * Pages, content *
+ ********************/
#page{
background-color: #fff;
}
@@ -195,16 +206,13 @@
display: none;
}
-
-
#artistviewimage, #albumviewcover {
float: right;
- heigth: 90px;
+ height: 90px;
max-width: 90%;
}
/*** home ***/
-
#homerows div {
text-align:center;
background-color: #2C3E50;
@@ -217,9 +225,9 @@
#homerows div i {
font-size: 28px;
}
-/*********************
- * listviews
- ********************/
+/***************
+ * listviews *
+ ***************/
.table li a {
color: #555 !important;
font-size: 80% !important;
@@ -241,22 +249,7 @@
list-style-type:none;
}
-/*.table li:first-child { */
- /*-moz-border-radius-topleft: 2px;*/
- /*-moz-border-radius-topright: 2px;*/
- /*-webkit-border-top-left-radius: 2px;*/
- /*-webkit-border-top-right-radius: 2px;*/
- /*border-top-right-radius: 2px;*/
- /*border-top-left-radius: 2px;*/
-/*}*/
-
.table li:last-child {
- /*-moz-border-radius-bottomleft: 2px;*/
- /*-moz-border-radius-bottomright: 2px;*/
- /*-webkit-border-bottom-left-radius: 2px;*/
- /*-webkit-border-bottom-right-radius: 2px;*/
- /*border-bottom-left-radius: 2px;*/
- /*border-bottom-right-radius: 2px;*/
border-bottom: 1px solid #CECECE;
}
@@ -265,12 +258,12 @@
}
.albumdivider {
- background-color: #ddd !important;
+ background-color: #ddd !important;
}
.smalldivider {
font-size: 25% !important;
- heigth: 5px !important;
+ height: 5px !important;
background-color: #ddd !important;
}
@@ -281,7 +274,6 @@
#playlistslist, #playlisttracks {
margin: 0 !important;
padding: 0 !important;
-/* border: 1px solid blue; */
}
.albumli {
@@ -295,7 +287,7 @@
.artistcover {
float: right;
width: 30px;
- heigth: 30px;
+ height: 30px;
margin-right: 3px;
margin-top: 3px;
}
@@ -327,9 +319,9 @@
}
-/*******************
- * Now Playing area
- *******************/
+/**********************
+ * Now Playing area *
+ **********************/
#nowPlayingFooter{
height: 50px;
@@ -346,7 +338,7 @@
.footerControls div span {
padding-left: 3px;
padding-right: 3px;
- height=100%;
+ height: 100%;
vertical-align: middle;
}
@@ -356,10 +348,9 @@
margin-right: 10px;
}
-
-/*******************
- * Popups
- *******************/
+/************
+ * Popups *
+ ************/
#modalalbum a, #modalartist a {
color: #444;
text-decoration: none;
@@ -407,14 +398,12 @@
.ui-input-clear-hidden {
display:block !important;
}
-
-/***************
- * common use
- ***************/
+/****************
+ * Common use *
+ ****************/
#playlistspane {
-/* height: 90% !important;*/
margin: 0px !important;
}
@@ -448,7 +437,7 @@ a {
float: right;
}
/**********************
- * Song information
+ * Song information *
**********************/
.ui-footer{
border: 0px;
@@ -464,7 +453,7 @@ a {
#infoname {
overflow: hidden;
white-space: nowrap;
- font: bold;
+ font-weight: bold;
font-size: 14px;
}
@@ -503,9 +492,7 @@ a {
text-align: center;
}
-
/*helper*/
-
.hidden{
display: none;
}
@@ -513,7 +500,6 @@ a {
color: #efefef;
}
-
.settingscoll label {
font-size: 120%;
font-weight: bold;
@@ -528,12 +514,14 @@ a {
.ui-responsive-panel.ui-page-panel-open .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 {
margin: 0 0 0 17em;
}
+
.ui-responsive-panel .ui-panel-dismiss-display-reveal {
display: none;
}
@@ -543,29 +531,34 @@ a {
#nowPlayingpane{
padding: 15px 25px 0px 25px;
}
+
#nowPlayingpane #controlspopupimage{
max-width:90%;
max-height:90%;
}
+
.nowPlaying-artistInfo {
font-size: 12px;
}
+
.nowPlaying-artistInfo h4{
margin: 0px;
font-weight: normal;
font-size: 12px;
}
+
.nowPlaying-artistInfo h3{
margin: 0px 0px 3px 00px;
white-space: nowrap;
overflow: hidden;
-
}
+
#controlspopupimage{
max-width:90%;
max-height:90%;
margin-bottom: 3px;
}
+
#nowPlayingpane #slidercontainer {
margin-left: -5px;
margin-right: -5px;
@@ -579,7 +572,6 @@ a {
}
/* disable text selection for mouse swipe */
-
body * {
-webkit-user-select: none;
-moz-user-select: none;
@@ -587,23 +579,16 @@ body * {
-o-user-select: none;
user-select: none;
}
+
/* but fix for text input (safari certainly needs it)*/
input[type=text] {
- -moz-user-select: text;
- -webkit-user-select: text;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
-o-user-select: text;
user-select: text;
}
-/* type/source of media in listviews */
-/*a[id^="spotify"] {
- margin-left:20px;
- background-image: url('../images/icons/play_alt_12x12.png');
- border: 2px solid black;
- display:block;
-}
-*/
-
.mediaicon {
float: right;
}
\ No newline at end of file
diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
index 651540e..29a7877 100644
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@@ -4,7 +4,6 @@
-
-
+
diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js
index 55bf24e..e5c99fa 100644
--- a/mopidy_musicbox_webclient/static/js/gui.js
+++ b/mopidy_musicbox_webclient/static/js/gui.js
@@ -4,7 +4,7 @@
* show- functions do both
*/
/********************
- * Song Info Sreen
+ * Song Info Sreen *
********************/
function resetSong() {
if (!posChanging) {
@@ -148,9 +148,9 @@ function setSongInfo(data) {
resizeMb();
}
-/***************
- * display popups
- */
+/******************
+ * display popups *
+ ******************/
function closePopups() {
$('#popupTracks').popup('close');
$('#artistpopup').popup('close');
@@ -159,7 +159,6 @@ function closePopups() {
$('#controlspopup').popup('close');
}
-
function popupTracks(e, listuri, trackuri, tlid) {
if (!e)
var e = window.event;
@@ -222,9 +221,9 @@ function showAlbumPopup(popupId) {
showAlbum(popupData[uri].album.uri);
}
-/*********************
- * initialize sockets
- *********************/
+/**********************
+ * initialize sockets *
+ **********************/
function initSocketevents() {
mopidy.on("state:online", function() {
@@ -254,7 +253,6 @@ function initSocketevents() {
});
mopidy.on("event:trackPlaybackPaused", function(data) {
- //setSongInfo(data.tl_track);
pausePosTimer();
setPlayState(false);
});
@@ -305,9 +303,9 @@ $(document).bind("pageinit", function() {
});
-/************************
- * gui stuff
- ************************/
+/**************
+ * gui stuff *
+ **************/
function enterFullscreen() {
if (isMobileSafari) { alert ("To get this app in Full Screen, you have to add it to your home-screen using the Share button."); exit(); }
var elem = document.querySelector("#page");
@@ -324,6 +322,7 @@ function enterFullscreen() {
}
}
}
+
function exitFullscreen() {
document.webkitExitFullscreen();
document.mozCancelFullscreen();
@@ -349,7 +348,6 @@ function switchContent(divid, uri) {
if (uri) {
hash += "?" + uri;
}
- // $.mobile.changePage("#" + hash);
location.hash = "#" + hash;
}
@@ -364,7 +362,6 @@ function setHeadline(site){
//update timer
function updateStatusTimer() {
-// console.log('statustimer');
mopidy.playback.getCurrentTlTrack().then(processCurrenttrack, console.error);
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
//TODO check offline?
@@ -447,7 +444,6 @@ function locationHashChanged() {
break;
}
-
//switch the footer
switch(divid) {
case 'nowPlaying':
@@ -463,9 +459,9 @@ function locationHashChanged() {
return false;
}
-/**********************
- * initialize software
- **********************/
+/***********************
+ * initialize software *
+ ***********************/
$(document).ready(function(event) {
//check for websockets
if (!window.WebSocket) {
@@ -489,8 +485,7 @@ $(document).ready(function(event) {
} else {
mopidy = new Mopidy({callingConvention: 'by-position-or-by-name'});
}
-// mopidy.on(console.log.bind(console)); // Log all events
-// mopidy.on(console.error.bind(console));
+
//initialize events
initSocketevents();
@@ -500,7 +495,6 @@ $(document).ready(function(event) {
switchContent("home");
}
-
initgui = false;
window.onhashchange = locationHashChanged;
@@ -586,7 +580,6 @@ $(document).ready(function(event) {
$.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.scrollSupressionThreshold = 20;
$.event.special.swipe.durationThreshold = 500;
// swipe songinfo and panel
@@ -625,6 +618,7 @@ function updatePlayIcons (uri, tlid) {
$(this).removeClass("currenttrack2");
}
});
+
$('#trackresulttable li').each(function() {
if (this.id == 'trackresulttable-' + uri) {
$(this).addClass('currenttrack2');
diff --git a/mopidy_musicbox_webclient/static/js/images.js b/mopidy_musicbox_webclient/static/js/images.js
index e1b205a..5d89f24 100644
--- a/mopidy_musicbox_webclient/static/js/images.js
+++ b/mopidy_musicbox_webclient/static/js/images.js
@@ -8,7 +8,7 @@ API_SECRET = '2c631802c2285d5d5d1502462fe42a2b';
var fmcache;
var lastfm;
-$(window).load(function() {
+$(window).load(function () {
// create a Cache object
fmcache = new LastFMCache();
// create a LastFM object