initial jquery mobile commit

AUTHORS

@@ -5,4 +5,7 @@ Mopidy:
 https://github.com/mopidy/mopidy/blob/develop/AUTHORS
 
 Icons:
-https://github.com/hybridgroup/betterfrontend/blob/master/iconic/AUTHORS
+https://github.com/hybridgroup/betterfrontend/blob/master/iconic/AUTHORS
+
+Background:
+Openclipart / Chrisdesign

webclient/back.txt

@@ -0,0 +1,226 @@
+        <div class="navbar navbar-inverse navbar-fixed-top">
+            <div class="navbar-inner">
+                <div class="container-fluid">
+                    <a type="button" class="btn btn-navbar" style="margin-left: 7px; margin-top: 10px;" data-toggle="collapse" data-target=".nav-collapse"> <img src="img/icons/arrow_down_16x16.png" /></a>
+                    <div class="nav pull-right" id="mainmenu">
+                        <a href="#playlists"><img src="img/icons/list_nested_24x21.png" />
+                        <div class="nav-collapse menutext nobreak hidden-phone">
+                            Playlists
+                        </div></a>
+                        <a href="#current"><img src="img/icons/list_24x21.png" />
+                        <div class="nav-collapse nobreak menutext hidden-phone">
+                            Queue
+                        </div></a>
+                        <a href="#search"><img src="img/icons/magnifying_glass_24x24.png" />
+                        <div class="nav-collapse nobreak menutext hidden-phone">
+                            Search
+                        </div></a>
+                    </div>
+
+                    <div id="controlbt" class="nav">
+                        <span id="back"><a href="#" onclick="return backbt();"> <img src="img/icons/arrow_left_alt1_24x24.png" /></a></span>
+                        <span><a href="#" onclick="doPrevious(); return false"><img src="img/icons/first_16x16.png" alt="Previous Track" /></a></span>
+                        <span id="playpause"><a href="#" onclick="doPlayPause(); return false"><img src="img/icons/pause_18x24.png" alt="Play" id="playbt" /></a></span>
+                        <span><a href="#" onclick="doNext(); return false"><img src="img/icons/last_16x16.png" alt="Next Track" /></a></span>
+                        <span><a href="#" onclick="showControls(); return false"><img src="img/icons/cog_24x24.png" alt="More controls" class="breakafter" /></a></span>
+                    </div>
+
+                    <div id="songinfo" class="nav nav-collapse span5" onclick="expandSonginfo();">
+                        <div  class="span5" id="infoname"></div>
+                        <br/>
+                        <div  class="span5" id="infoartist"></div>
+                        <br/>
+                    </div>
+
+                </div><!-- /container -->
+                <div class="nav-collapse" id="slidercontainer">
+                    <span id="songelapsed">0:00</span>
+                    <input id="trackslider" type="range" onmousedown="pauseTimer();" onchange="doSeekPos(this.value);" class="nobreak" />
+                    <span id="songlength" class="pull-right">0:00</span>
+                </div>
+
+            </div><!-- /.navbar-inner -->
+        </div><!-- /.navbar -->
+
+        <div class="container-fluid">
+            <div class="row-fluid">
+
+                <div class="span11 content" id="playlistspane">
+                    <div class="row-fluid">
+                        <div class="span4">
+                            <!-- <h2>Playlists</h2> -->
+                            <p>
+                                <ul id="playlistslist"></ul>
+                            </p>
+                            <img src="img/loader.gif" id="playlistsloader" class="loader" />
+                        </div>
+                        <div class="span8" id="playlisttablediv">
+                            <table id="pltable" class="table table-bordered table-striped">
+                                <thead>
+                                    <tr>
+                                        <!--	<th>#</th> -->
+                                        <th>Title</th>
+                                        <th>Artist</th>
+                                        <th>Album</th>
+                                        <th>Length</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="playlisttable"></tbody>
+                            </table>
+                            <img src="img/loader.gif" id="playlistloader" class= "loader" />
+                        </div>
+
+                    </div><!--/row-->
+                </div>
+
+                <div class="span11 content" id="currentpane">
+                    <h4>Play Queue</h4>
+                    <table class="table table-bordered table-striped">
+                        <thead>
+                            <tr>
+                                <!--	<th>#</th> -->
+                                <th>Title</th>
+                                <th>Artist</th>
+                                <th>Album</th>
+                                <th>Length</th>
+                            </tr>
+                        </thead>
+                        <tbody id="currenttable"></tbody>
+                    </table>
+                    <img src="img/loader.gif" id="currentloader" class= "loader" />
+                </div>
+
+                <div class="span11 content" id="albumspane">
+                    <div class="row-fluid">
+                        <div>
+                            <!--							<h4>Album</h4> -->
+                            <h3 id="h_albumname"></h3>
+                            <h5 id="h_albumartist"></h5>
+                            <p>
+                                <ul id="albumslist"></ul>
+                            </p>
+                        </div>
+                    </div><!--/row-->
+                    <table class="table table-striped table-bordered">
+                        <thead>
+                            <tr>
+                                <th>Title</th>
+                                <th>Artist</th>
+                                <th>Album</th>
+                                <th>Length</th>
+                            </tr>
+                        </thead>
+                        <tbody id="albumstable"></tbody>
+                    </table>
+                    <img src="img/loader.gif" id="albumsloader" class= "loader" />
+                </div>
+
+                <div class="span11 content" id="artistspane">
+                    <div class="row-fluid">
+                        <div>
+                            <!--							<h4>Artist</h4> -->
+                            <h3 id="h_artistname"></h3>
+                            <p>
+                                <ul id="artistslist"></ul>
+                            </p>
+                        </div>
+                    </div><!--/row-->
+                    <div id="artiststable"></div>
+                    <img src="img/loader.gif" id="artistsloader" class="loader" />
+                </div>
+
+                <div class="content" id="searchpane">
+                    <div class="input-append">
+                        <input id="searchinput" class="span2" onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text">
+                        <button class="btn" type="button" onclick="return initSearch(event.value);" >
+                            Search!
+                        </button>
+                    </div>
+
+                    <img src="img/loader.gif" id="allresultloader" class= "loader" />
+
+                    <div id="searchresults">
+                        <div class="span5" id="searchartists">
+                            <h4>Artists</h4>
+                            <table class="table table-bordered table-striped">
+                                <tbody id="artistresulttable"></tbody>
+                            </table>
+                        </div>
+                        <div class="span5" id="searchalbums">
+                            <h4>Albums</h4>
+                            <table class="table table-bordered table-striped">
+                                <tbody id="albumresulttable"></tbody>
+                            </table>
+                        </div>
+                        <div class="span10" style="text-align: center" id="expandsearch">
+                            <a href="#" onclick="toggleSearch(); return false;"><img src="img/icons/arrow_down_16x16.png"></a>
+                        </div>
+                        <div class="span11" id="searchtracks">
+                            <h4>Tracks</h4>
+                            <table class="table table-bordered table-striped">
+                                <thead>
+                                    <tr>
+                                        <th>Title</th>
+                                        <th>Artist</th>
+                                        <th>Album</th>
+                                        <th>Length</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="trackresulttable"></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <!-- search div -->
+
+            </div><!--/row fluid-->
+        </div><!--/.fluid-container-->
+
+        <div id="controlsmodal" class="modal hide" role="dialog">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">
+                    &times;
+                </button><h5 id="modalname"></h5>
+                <div id="modalartist"></div>
+                <br/>
+                <div id="modalalbum"></div>
+            </div>
+            <div class="modal-body">
+                <a href="#" onclick="doRandom(); return false"><img src="img/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a> &nbsp; <a href="#" onclick="doRepeat(); return false"><img src="img/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
+                <br/>
+                <br/>
+                <a href="#" onclick="doMute(); return false;"><img id="mutebt" src="img/icons/volume_16x12.png" alt="" /></a>
+                <input id="volumeslider" type="range" max="100" onchange="doVolume(this.value);" class="nobreak" />
+            </div>
+            <div class="modal-footer">
+                <a href="#" class="close" data-dismiss="modal">Close</a>
+            </div>
+        </div>
+
+        <div id="offlinemodal" class="modal hide">
+            <div class="modal-header">
+                <h3>Connecting</h3>
+            </div>
+            <div class="modal-body">
+                <p>
+                    Trying to reach the server. Please wait...
+                    <br/>
+                    <br/>
+                    <img src="img/loader.gif" class="loader" />
+                </p>
+            </div>
+        </div>
+
+        <div id="loadingmodal" class="modal hide">
+            <div class="modal-header">
+                <h3>Loading data...</h3>
+            </div>
+            <div class="modal-body">
+                <p>
+                    Getting data from Spotify. This could take a while if you just started Mopidy. Please wait...
+                    <br/>
+                    <br/>
+                    <img src="img/loader.gif" class="loader" />
+                </p>
+            </div>
+        </div>

webclient/css/ws.css

@@ -2,138 +2,85 @@
  *
  */
 
-.menutext {
-    vertical-align: bottom;
+/* Responsive stuff */
+
+@media all and (min-width: 50.1em) {
+    .pl-breakpoint.ui-grid-a .ui-block-a { width: 32.95%; }
+    .pl-breakpoint.ui-grid-a .ui-block-b { width: 65.92%; }
+    .pl-breakpoint.ui-grid-a .ui-block-a { clear: left; }
+    .header-breakpoint.ui-grid-b .ui-block-a { width: 19.95%; }
+    .header-breakpoint.ui-grid-b .ui-block-b { width: 39.92%; }
+    .header-breakpoint.ui-grid-b .ui-block-c { width: 39.92%; }
+    .pl-breakpoint.ui-grid-a .ui-block-a { clear: left; }
 }
 
+@media all and (max-width: 50em) {
+    .pl-breakpoint .ui-block-a, 
+    .pl-breakpoint .ui-block-b {
+        width: 100%; 
+        float:none; 
+    }
+    .header-breakpoint .ui-block-a,
+    .header-breakpoint .ui-block-b, 
+    .header-breakpoint .ui-block-c {
+        width: 100%; 
+        float:none; 
+    }
+}
+
+/* Slider */
+
 #trackslider {
-    width: 90%;
+    display: inline;
 }
 
 #slidercontainer {
-    margin-left: 2%;
-    width: 95%;
     margin-top: 5px;
     margin-bottom: 5px;
 }
+/*
+.ui-slider-track {
+    margin-left: 38px;
+    margin-right: 35px;
+}
 
-#mainmenu a {
-    margin-right: 5px;
+.ui-mobile .ui-page .ui-slider-input,
+.ui-mobile .ui-dialog .ui-slider-input {
+    display : none !important;
+}
+*/
+#songelapsed, #songlength {
+    font-size: 10px;
+    margin-top: 12px;
+}
+
+/* Controls */
+
+#controldiv {
+    height: 30px;
+    width: 175px;
+    margin-left: 10px;
     display: inline;
 }
 
-.menutext a:hover {
-    text-decoration: none;
-    text-underline-position: 0;
-}
-
-#controlbt {
-    margin-top: -5px;
-    height: 30px;
-    width: 174px;
-    left: -10px;
-}
-
-#controlbt img {
+#controldiv img {
     margin-left: 5px;
 }
 
+#previmg {
+    margin-top: -100px;
+}   
 
-#back {
+#btplaypause a img {
+    margin-top: 5px;
+}
+
+#btback {
     margin-right: 5px;
 }
 
-a.name, a.album, a.artist {
-    display: block;
-    height: 100%;
-}
 
-body {
-    padding-top: 80px;
-}
-
-@media (max-width: 979px) {
-    body {
-        padding-top: 0px;
-    }
-    .btsquare {
-        display: block;
-    }
-}
-
-@media (min-width: 979px) {
-    .btsquare {
-        display: inline;
-    }
-}
-
-.nobreak, .btsquare {
-    display: inline;
-}
-
-#allresultloader, .loader {
-    display: none;
-}
-
-#playlistslist li {
-    padding: 5px;
-    list-style-type: none;
-}
-
-#playlistslist li:nth-of-type(odd) {
-    background-color: #444;
-}
-
-#playlistslist li:nth-of-type(even) {
-    background-color: #333;
-}
-
-#volumecontainer {
-    margin-top: 3px;
-}
-
-#searchresults {
-    display: none;
-}
-
-.table tr:hover,
-.table th:hover,
-.table td:hover {
-        background-color: #555 !important;
-}
-
-.table th,
-.table td {
-    padding: 8px;
-}
-
-.brand {
-    margin-right: 20px;
-}
-
-.nav img  {
-    padding-top: 16px;
-}
-
-.navbar, .navbar-inner, .container {
-    padding: 0px;
-    margin: 0px;
-}
-
-.breakafter {
-    margin-right: 15px;
-}
-
-.content {
-    display: none;
-}
-
-.currenttrack {
-    font-weight: bold;
-    background-image: url('../img/icons/play_alt_16x16.png');
-    background-repeat: no-repeat;
-    padding-left: 20px;
-}
+/* Song information */
 
 #infoname {
     overflow: hidden;
@@ -145,7 +92,7 @@ body {
 }
 
 #songinfo {
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 #infoartist {
@@ -153,8 +100,55 @@ body {
     color: #aaa;
     font-size: 11px;
     text-shadow: 1px 1px #333;
+    margin: 2px;
 }
 
-#playlistpane {
-    visibility: hidden;
+/* div */ 
+body {
+ /*   padding-top: 80px;
+/*    background-image:url('../iages/Chrisdesign_LP_Guitar_black.web.png');
+    background-attachment: fixed;
+    background-repeat:no-repeat;
+    background-position:right;
+*/
 }
+
+.nobreak, .btsquare {
+    display: inline !important;
+}
+
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.hidden, #allresultloader, .loader {
+    display: none;
+}
+
+#searchresults {
+    display: none;
+}
+
+.breakafter {
+    margin-right: 15px;
+}
+
+#currentpane, #searchpane, #albumspane, #artistspane {
+    display: none;
+}
+
+/*.currenttrack {
+    font-weight: bold;
+    background-image: url('../img/icons/play_alt_16x16.png');
+    background-repeat: no-repeat;
+    padding-left: 20px;
+}*/
+
+#popupTrackName, #popupAlbumName, .popupArtistName {
+    font-style:oblique;
+}
+