diff --git a/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui-dark.css b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui-dark.css new file mode 100755 index 00000000..4a4ba273 --- /dev/null +++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui-dark.css @@ -0,0 +1,74 @@ +/**************************** +*New colors +*main bg 121314 +*sidebar bg 1c1c1f +*active text dfe0e6 (or white) +*inactive text 88898c +*hover 222326 +*green 84bd00 +****************************/ + + +.ui-bar-a{border:1px solid #121314;background:#1c1c1f;} +.ui-bar-a a.ui-link{color:#dfe0e6;} +.ui-bar-a a.ui-link:visited{color:#dfe0e6 } +.ui-bar-a a.ui-link:hover{color:#84bd00} +.ui-bar-a a.ui-link:active{color:#84bd00} +.ui-body-a,.ui-overlay-a{border:2px solid #1c1c1f ;color:#dfe0e6 ;background:#1c1c1f;} +.ui-body-a .ui-link{color:#dfe0e6;} +.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#dfe0e6} +.ui-body-a.ui-input-text.ui-focus{border:2px solid #222326;} +.ui-btn-up-a{border:1px solid #121314;background:#1c1c1f;font-weight:normal;} +.ui-btn-hover-a{border:1px solid #222326;background:#222326;} +.ui-btn-down-a{border:1px solid #222326;background:#222326;} +.ui-bar-a .ui-btn-up-a,.ui-bar-a .ui-btn-down-a,.ui-bar-a .ui-btn-hover-a{background-color:#eee;border:1px solid #eee} +.ui-body-b,.ui-overlay-b{border:2px solid #eee;color:#222326;background:#121314;} +.ui-body-b .ui-link:visited,.ui-body-b .ui-link:hover,.ui-body-b .ui-link:active{color:#84bd00} +.ui-body-b.ui-input-text.ui-focus{border:2px solid #84bd00;} +.ui-btn-up-b{border:1px solid #1c1c1f;background:#88898c;} +.ui-btn-hover-b{border:1px solid #84bd00;background:#84bd00;} +.ui-btn-down-b{border:1px solid #84bd00;background:#84bd00;} +.ui-body-c,.ui-overlay-c{border:2px solid #1c1c1f;color:#fff ;background:#121314;} +.ui-body-c .ui-link{color:#dfe0e6;} +.ui-body-c .ui-link:visited,.ui-body-c .ui-link:hover,.ui-body-c .ui-link:active{color:#84bd00} +.ui-btn-up-c{border:1px solid #121314;background:#1c1c1f;color:#dfe0e6;} +.ui-btn-up-c:visited,.ui-btn-up-c a.ui-link-inherit{color:#fff;} +.ui-btn-down-c{border:0px;} +.ui-body-d,.ui-overlay-d{color:#222326;} +.ui-body-e,.ui-overlay-e{color:#222326;} +.ui-body-f,.ui-overlay-f{color:#222326;} +.ui-body-g,.ui-overlay-g{color:#222326;} +.ui-btn-active { + border: none; + border-right: 4px solid #84bd00; + background: #222326 /*{global-active-background-color}*/; + color: #84bd00 /*{global-active-color}*/; +} +.ui-btn-active.ui-slider-bg { + background: #84bd00; + } +.ui-slider-handle { + background: #dfe0e6; + border: 1px solid #222326; + } +.ui-slider-handle.ui-btn-corner-all { + border-radius: 20%; + -webkit-border-radius: 20%; + border: 1px solid #222326; + } + +.ui-mini .ui-btn-inner { font-size: 16.5px; padding: .55em 11px .5em; } +.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 0px; } +.ui-slider-track.ui-mini {top: 12px;} +.ui-slider-track.ui-mini .ui-slider-handle { + height: 12px; + width: 12px; + border-radius: 7px; + margin: -7px 0 0 -3px; + } + +.ui-panel-display-reveal { + -webkit-box-shadow: inset 0px 0 5px rgba(0,0,0,.15); + -moz-box-shadow: inset 0px 0 5px rgba(0,0,0,.15); + box-shadow: inset 0px 0 5px rgba(0,0,0,.15); + } diff --git a/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css old mode 100644 new mode 100755 index b13fc489..8a4fc941 --- a/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css +++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css @@ -146,7 +146,7 @@ .ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{font-family:Lato,sans-serif} .ui-body-a .ui-link-inherit{color:#333} .ui-body-a .ui-link{color:#2c3e50;font-weight:bold;} -.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#4e6d8d} +.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#fff} .ui-body-a.ui-input-text{border:2px solid #eee;} .ui-body-a.ui-input-text.ui-focus{border:2px solid #4e6d8d;-webkit-transition:border linear .2s;-moz-transition:border linear .2s;-o-transition:border linear .2s;transition:border linear .2s} .ui-btn-up-a{border:1px solid #2c3e50;background:#2c3e50;font-weight:bold;color:#fff;} @@ -346,6 +346,8 @@ input.ui-input-text.ui-slider-input { border: 2px solid #eee !important; } +#theme .ui-btn.ui-submit {display: inline-block; width: 45%} +#theme-choose {color:white;margin-left:25%} /* corner rounding classes -----------------------------------------------------------------------------------------------------------*/ @@ -1684,7 +1686,7 @@ div.ui-mobile-viewport { overflow-x: hidden; } .ui-footer .ui-btn-block { display: block; } .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, -.ui-mini .ui-btn-inner { font-size: 12.5px; padding: .55em 11px .5em; } +.ui-mini .ui-btn-inner { font-size: 18.5px; padding: .1em 11px .5em; } .ui-fullsize .ui-btn-inner, .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 20px; } .ui-btn-icon-notext { width: 24px; height: 24px; } @@ -2379,7 +2381,7 @@ label.ui-slider { margin-bottom: .4em; } div.ui-slider { - height: 30px; + height: 10px; margin: .5em 0; zoom: 1; } @@ -2432,7 +2434,7 @@ input.ui-input-text.ui-slider-input { top: 6px; } .ui-slider-track.ui-mini { - height: 12px; + height: 4px; top: 8px; } .ui-slider-bg { diff --git a/mopidy_musicbox_webclient/static/css/webclient-dark.css b/mopidy_musicbox_webclient/static/css/webclient-dark.css new file mode 100755 index 00000000..d96b82e8 --- /dev/null +++ b/mopidy_musicbox_webclient/static/css/webclient-dark.css @@ -0,0 +1,137 @@ +/**************************** +DARK THEME CSS +*New colors +*main bg 121314 +*sidebar bg 1c1c1f +*active text dfe0e6 (or white) +*inactive text 88898c +*hover 222326 +*green 84bd00 +****************************/ + +.hide {display:none;} +.show {display:inline-block;} + +#headermenubtn{ + background-color: #1c1c1f; + border: 0px; +} + +#headermenubtn2{ + background-color: #1c1c1f; +} + +#close-btn{ + background-color: #1c1c1f; +} + +#page{ + background-color: #121314; +} + +#homerows div { + background-color: #000000; +} + +.table li a { + color: #dfe0e6 !important; +} + +.table li { + background-color: #121314; + border: 1px solid #1c1c1f; +} + +#homerows div { + border: 1px solid #CECECE; +} + +.albumdivider { + background-color: #1c1c1f !important; +} + +.smalldivider { + background-color: #1c1c1f !important; +} + +#playlistslist li a { + background-color: #000; +} + +#playlisttracksback { + background-color: #000; +} + +#browselist li { + background-color: #000; +} + +#browselist a:hover { + color:#84bd00; +} + +.playlistactive { + background-color: #1c1c1f; + border-right: 4px solid #84bd00; +} + +currenttrack2 { + background-image: url('../images/icons/play_alt_16x16.png'); +} + +.currenttrack { + background-image: url('../images/icons/play_alt_12x12.png'); + background-color: #dfe0e6; +} + +.nowPlayingControls #btplayNowPlaying{ + margin-left: 20px; + margin-right: 20px; +} + +#modalartist a, #modalalbum a { + color: #eee; +} + +#modalalbum a:hover ,#modalartist a:hover{ + color: #84bd00; +} + + +#controlspopup, #artistpopup, #coverpopup { + background: grey; +} + +#btplayNowPlaying { + margin-bottom: 5px; +} + +/* +#playlistspane { + margin: 0px !important; + padding: 2px !important; + overflow-y: hidden; +} +*/ + +#nowPlayingFooter{ + color: #1c1c1f; +} + +#controldiv{ + background: none repeat scroll 0% 0% rgb(44, 62, 80); +} + + +@media (max-width: 35em){ + + #nowPlayingpane{ + padding: 15px 25px 0px 25px; + } + + #nowPlayingpane #controlspopupimage{ + max-width: 100%; + } +} + + diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css old mode 100644 new mode 100755 index 507f7914..565b0a79 --- a/mopidy_musicbox_webclient/static/css/webclient.css +++ b/mopidy_musicbox_webclient/static/css/webclient.css @@ -48,6 +48,8 @@ } #playlistslistdiv { display:block; + height:800px; + overflow-y: scroll; } /*search*/ .srch-breakpoint.ui-grid-a .ui-block-b { @@ -101,6 +103,15 @@ } } + + .hide { + display:none; + } + .show { + display:inline-block; + } + + /*********** * Side Panel and Navigation */ @@ -139,6 +150,20 @@ #headermenubtn{ width: 50px; } + +#headermenubtn2{ + width: 30px; + border: 0px; + float:right; +} + +#close-btn{ + width: 30px; +/* background-color: #1c1c1f;*/ + border: 0px; + float:right; +} + #headersearchbtn{ text-align: right; } @@ -156,6 +181,13 @@ width: 100%; } +#trackslaider.ui-slider-handle { display: none; } + +#sidepaneltrackslider .ui-slider-track { + margin-left: 2px; + margin-right: 15px; +} + #slidercontainer { margin-top: 7px; margin-bottom: 5px; @@ -163,8 +195,8 @@ } .ui-slider-track { - margin-left: 38px; - margin-right: 35px; + margin-left: 16%; + margin-right: 15%; } .ui-slider-input { @@ -182,7 +214,7 @@ #mutebt { float: left; margin-left: 8px; - margin-top: 8px; + margin-top: 3px; } #volumeslider { @@ -292,6 +324,17 @@ padding: 0 !important; /* border: 1px solid blue; */ } +#playlisttracks { + height:800px; + overflow-y: scroll; +} + +#playlisttracksback { + height: 30px; + margin: 2px; + padding-top: 2px; + background-color: #aaa; +} .albumli { padding-left: 5px; @@ -312,7 +355,9 @@ .currenttrack2 { background-image: url('../images/icons/play_alt_12x12.png'); background-repeat: no-repeat; - background-position: 4px 51%; +/* background-position: 4px 51%;*/ + background-position: left center; + } .currenttrack { background-image: url('../images/icons/play_alt_16x16.png'); @@ -322,7 +367,7 @@ } .currenttrack2 a { - margin-left: 15px; + margin-left: 30px; } .currenttrack a { margin-left: 20px; @@ -339,10 +384,9 @@ /******************* * Now Playing area *******************/ -.nowPlayingControls { - font-size: 20px; - line-height: 45px; - padding-left: 10px; +.nowPlayingControls{ + font-size: 1.2em; + line-height: 50px; } .nowPlayingControls .fa{ vertical-align: -webkit-baseline-middle; @@ -357,7 +401,12 @@ /******************* * Popups *******************/ -#modalalbum a, #modalartist a { +#nowPlayingpaneSidePanel #modalalbum a, #nowPlayingpaneSidePanel #modalartist a { + color: #fff; + text-decoration: none; +} + + #modalalbum a, #modalartist a { color: #444; text-decoration: none; } @@ -367,7 +416,7 @@ } #controlspopup, #artistpopup, #coverpopup { - max-width: 90%; + max-width: 550px; background: white; padding: 5px; } @@ -382,8 +431,8 @@ margin-left: auto; margin-right: auto; margin-bottom: 10px; - max-width:90%; - max-height:90%; + max-width:70%; + max-height:70%; } #buttons { @@ -416,8 +465,8 @@ #playlistspane { /* height: 90% !important;*/ - margin: 0px !important; - padding: 2px !important; +/* margin: 0px !important;*/ +/* padding: 2px !important;*/ } a { @@ -558,8 +607,9 @@ a { } /*smartphones*/ @media (max-width: 35em){ + #nowPlayingpane{ - padding: 15px 25px 0px 25px; + padding: 65px 25px 0px 25px; } #nowPlayingpane #controlspopupimage{ max-width:90%; diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html old mode 100644 new mode 100755 index 9b0ef260..4b42c135 --- a/mopidy_musicbox_webclient/static/index.html +++ b/mopidy_musicbox_webclient/static/index.html @@ -5,6 +5,8 @@ + + @@ -60,6 +120,7 @@ + @@ -108,25 +169,88 @@ Exit Fullscreen + + +--> +
  • +
    • +
  • + +
    +
    • + + +
    + +
    +
    +
    +
    +
    + +

    Choose Theme

    +
    + + +
    + + Close + +
    + +
    Close @@ -207,8 +331,9 @@

    Artists

    @@ -269,8 +394,8 @@

    System

    - - +
    +
    @@ -284,7 +409,9 @@

    - Add to saved streams + +
    +
    @@ -294,7 +421,7 @@

    -
    Back
    +
    Back
    diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js old mode 100644 new mode 100755 index 82d2b967..9efadec6 --- a/mopidy_musicbox_webclient/static/js/gui.js +++ b/mopidy_musicbox_webclient/static/js/gui.js @@ -534,9 +534,27 @@ $(document).ready(function(event) { initStreams(); if ($(window).width() < 980) { + // drop all pane contents down to accomadte size of mobile header with volume slider + $(".pane").attr('style', 'padding-top:40px;'); + $("#panel").panel("close"); + // move volume slider to header if small screen for easy access and hide the now empty li's so not ugly and tidy up other related elements + $("#vol1").prependTo("#vol2"); + $("#mutebt").attr('style', 'float:right'); + $('#vol_li').hide(); + $('#nowplay_li').hide(); + $('#navnowPlaying').show(); + $(".ui-panel-content-wrap").attr('style', 'top:30px'); + e.preventDefault(); }else{ $("#panel").panel("open"); + $('#navnowPlaying').hide(); + // move the trckslider up and into album cover when in full screen to save space and neaten up + $("#nowPlayingpaneInner").prependTo("#nowPlayingpaneSidePanel"); + $("#slidercontainer").appendTo("#album-pic"); + $("#slidercontainer").attr('style', 'margin-top:-21px;width:247px;margin-left:-4px'); +// $("#album-pic").attr('style', 'height:174px'); + e.preventDefault(); } //hide fullscreen button if in UIWebview @@ -611,4 +629,4 @@ function updatePlayIcons (uri) { $(this).removeClass("currenttrack2"); } }); -} +} \ No newline at end of file diff --git a/mopidy_musicbox_webclient/static/js/process_ws.js b/mopidy_musicbox_webclient/static/js/process_ws.js old mode 100644 new mode 100755 index 0b8fda9f..caafc372 --- a/mopidy_musicbox_webclient/static/js/process_ws.js +++ b/mopidy_musicbox_webclient/static/js/process_ws.js @@ -73,7 +73,7 @@ function processPlaystate(data) { * process results of a browse list *********************************************************/ function processBrowseDir(resultArr) { - var backHtml = '

  • Back

    • ' + var backHtml = '

  • Back

    • ' if ( (!resultArr) || (resultArr == '') || (resultArr.length == 0) ) { $('#browsepath').html('No tracks found...'); $('#browselist').html(backHtml);