web intf: drop top table design.

We're in 2011 guys !

diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index c0caf516d790099398929223876e6848a8dff396..c73c15e8ff6bdf13033eb99bc9562f9e94158628 100644 (file)
--- a/share/lua/http/css/main.css
+++ b/share/lua/http/css/main.css
@@ -35,33 +35,56 @@ body{
 #volumeSlider{
        width: 100px;
        display: inline-block;
-       margin-bottom: 20px;
 }
 #currentVolume{
        display: inline-block;
-       margin-left: -110px;
 }
 #mediaTitle{
+       position: absolute;
+       top: 60px;
+       left: 0px;
+       width: 500px;
        text-align: left;
+       padding: 5px;
+       overflow: hidden;
 }
 #currentTime{
+       float: left;
        text-align: left;
 }
 #totalTime{
+       float: right;
        text-align: right;
 }
+#controlTable{
+       position:relative;
+       height: 140px;
+}
 #controlButtons{
+       position: absolute;
+       top: 0;
+       left: 0;
+       padding: 0;
+       margin: 0;
        text-align: left;
        width: 380px;
 }
 
 #buttonszone{
+       position: absolute;
+       top: 5px;
+       left: 388px;
        width: 42px;
        vertical-align: top;
+       margin: 0;
+       padding: 0;
 }
 
 #volumesliderzone{
-       margin-left: 20px;
+       position: absolute;
+       top: 20px;
+       left: 440px;
+       width: 205px;
 }
 
 #volumeSlider{
@@ -69,11 +92,18 @@ body{
 }
 
 #artszone{
+       position: absolute;
+       top: 0;
+       left: 650px;
        width: 141px;
        vertical-align: top;
 }
 
 #seekContainer{
+       position:absolute;
+       left: 0;
+       top: 100px;
+       width: 650px;
        vertical-align: bottom;
 }
 

diff --git a/share/lua/http/index.html b/share/lua/http/index.html
index df65669f2d6fd798cd8fb9a8252beecc4b34dbcd..ca831d3c6979784fbf0f33c3d1706d4363fc2404 100644 (file)
--- a/share/lua/http/index.html
+++ b/share/lua/http/index.html
@@ -201,57 +201,38 @@
                                <div class="ui-widget-header" style="text-align: left;">
                                        <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
                                </div>
-                               <table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content">
-                                       <tr>
-                                               <td id="controlButtons">
-                                                       <div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
-                                                       <div id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></div>
-                                                       <div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
-                                                       <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
-                                                       <div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
-                                                       <div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
-                                                       <div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
-                                               </td>
-                                               <td id="buttonszone">
-                                                       <div id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library" style="float: left;"><span class="ui-icon ui-icon-note"></span></div>
-                                                       <div id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer" style="float: left;"><span class="ui-icon ui-icon-video"></span></div>
-                                                       <div id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams" style="float: left;"><span class="ui-icon ui-icon-script"></span></div>
-                                                       <div id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation" style="float: left;"><span class="ui-icon ui-icon-transfer-e-w"></span></div>
-                                                       <div id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="Equalizer" style="float: left;"><span class="ui-icon ui-icon-signal"></span></div>
-                                                       <div id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="VLM Batch Commands" style="float: left;"><span class="ui-icon ui-icon-suitcase"></span></div>
-                                               </td>
-                                               <td>
-                                                       <div id="volumesliderzone">
-                                                               <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
-                                                               <div id="currentVolume" class="dynamic">50%</div>
-                                                       </div>
-                                               </td>
-                                               <td id="artszone" rowspan="3">
-                                                       <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
-                                               </td>
-                                       </tr>
-                                       <tr>
-                                               <td colspan="3">
-                                                       <div id="mediaTitle" class="dynamic"></div>
-                                               </td>
-                                       </tr>
-                                       <tr>
-                                               <td id="seekContainer" colspan="3">
-                                                       <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
-                                                       <table width="100%">
-                                                               <tr>
-                                                                       <td>
-                                                                               <div id="currentTime" class="dynamic">00:00:00</div>
-                                                                       </td>
-                                                                       <td>
-                                                                               <div id="totalTime" class="dynamic">00:00:00</div>
-                                                                       </td>
-                                                               </tr>
-                                                       </table>
-                                               </td>
-                                       </tr>
-
-                               </table>
+                               <div id="controlTable" class="ui-widget-content">
+                                       <ul id="controlButtons">
+                                               <li id="buttonPrev" class="button48  ui-corner-all" title="Previous"></li>
+                                               <li id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></li>
+                                               <li id="buttonNext" class="button48  ui-corner-all" title="Next"></li>
+                                               <li id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></li>
+                                               <li id="buttonStop" class="button48  ui-corner-all" title="Stop"></li>
+                                               <li id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></li>
+                                               <li id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></li>
+                                       </ul>
+                                       <ul id="buttonszone">
+                                               <li id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Library" style="float: left;"><span class="ui-icon ui-icon-note"></span></li>
+                                               <li id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="Hide / Show Viewer" style="float: left;"><span class="ui-icon ui-icon-video"></span></li>
+                                               <li id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="Manage Streams" style="float: left;"><span class="ui-icon ui-icon-script"></span></li>
+                                               <li id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="Track Synchronisation" style="float: left;"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
+                                               <li id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="Equalizer" style="float: left;"><span class="ui-icon ui-icon-signal"></span></li>
+                                               <li id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="VLM Batch Commands" style="float: left;"><span class="ui-icon ui-icon-suitcase"></span></li>
+                                       </ul>
+                                       <div id="volumesliderzone">
+                                               <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
+                                               <div id="currentVolume" class="dynamic">50%</div>
+                                       </div>
+                                       <div id="artszone">
+                                               <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
+                                       </div>
+                                       <div id="mediaTitle" class="dynamic"></div>
+                                       <div id="seekContainer">
+                                               <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
+                                               <div id="currentTime" class="dynamic">00:00:00</div>
+                                               <div id="totalTime" class="dynamic">00:00:00</div>
+                                       </div>
+                               </div>
                        </div>
                        <div id="viewContainer" class="ui-widget">
                                <div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>