[vlc-commits] web intf: drop top table design.
Francois Cartegnie
git at videolan.org
Thu Sep 22 00:17:47 CEST 2011
vlc | branch: master | Francois Cartegnie <fcvlcdev at free.fr> | Thu Sep 22 00:11:24 2011 +0200| [69d2375629241714bdedd4625200e96d60c8c6fc] | committer: Francois Cartegnie
web intf: drop top table design.
We're in 2011 guys !
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=69d2375629241714bdedd4625200e96d60c8c6fc
---
share/lua/http/css/main.css | 36 +++++++++++++++++--
share/lua/http/index.html | 83 ++++++++++++++++--------------------------
2 files changed, 65 insertions(+), 54 deletions(-)
diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index c0caf51..c73c15e 100644
--- 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 df65669..ca831d3 100644
--- 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>
More information about the vlc-commits
mailing list