Skip to content

V
vlc-2-2
Commit 69d23756 authored by Francois Cartegnie's avatar Francois Cartegnie
Browse files
Options

web intf: drop top table design. 

We're in 2011 guys !
parent 3fa04773
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 54 deletions
share/lua/http/css/main.css
View file @ 69d23756
...@@ -35,33 +35,56 @@ body{ ...@@ -35,33 +35,56 @@ body{
#volumeSlider{ #volumeSlider{
width: 100px; width: 100px;
display: inline-block; display: inline-block;
margin-bottom: 20px;
} }
#currentVolume{ #currentVolume{
display: inline-block; display: inline-block;
margin-left: -110px;
} }
#mediaTitle{ #mediaTitle{
position: absolute;
top: 60px;
left: 0px;
width: 500px;
text-align: left; text-align: left;
padding: 5px;
overflow: hidden;
} }
#currentTime{ #currentTime{
float: left;
text-align: left; text-align: left;
} }
#totalTime{ #totalTime{
float: right;
text-align: right; text-align: right;
} }
#controlTable{
position:relative;
height: 140px;
}
#controlButtons{ #controlButtons{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
text-align: left; text-align: left;
width: 380px; width: 380px;
} }
#buttonszone{ #buttonszone{
position: absolute;
top: 5px;
left: 388px;
width: 42px; width: 42px;
vertical-align: top; vertical-align: top;
margin: 0;
padding: 0;
} }
#volumesliderzone{ #volumesliderzone{
margin-left: 20px; position: absolute;
top: 20px;
left: 440px;
width: 205px;
} }
#volumeSlider{ #volumeSlider{
...@@ -69,11 +92,18 @@ body{ ...@@ -69,11 +92,18 @@ body{
} }
#artszone{ #artszone{
position: absolute;
top: 0;
left: 650px;
width: 141px; width: 141px;
vertical-align: top; vertical-align: top;
} }
#seekContainer{ #seekContainer{
position:absolute;
left: 0;
top: 100px;
width: 650px;
vertical-align: bottom; vertical-align: bottom;
} }
......
share/lua/http/index.html
View file @ 69d23756
...@@ -201,57 +201,38 @@ ...@@ -201,57 +201,38 @@
<div class="ui-widget-header" style="text-align: left;"> <div class="ui-widget-header" style="text-align: left;">
<img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Controls
</div> </div>
<table width="100%" border="0" cellspacing="0" id="controlTable" class="ui-widget-content"> <div id="controlTable" class="ui-widget-content">
<tr> <ul id="controlButtons">
<td id="controlButtons"> <li id="buttonPrev" class="button48 ui-corner-all" title="Previous"></li>
<div id="buttonPrev" class="button48 ui-corner-all" title="Previous"></div> <li id="buttonPlay" class="button48 ui-corner-all paused" title="Play"></li>
<div id="buttonPlay" class="button48 ui-corner-all paused" title="Play"></div> <li id="buttonNext" class="button48 ui-corner-all" title="Next"></li>
<div id="buttonNext" class="button48 ui-corner-all" title="Next"></div> <li id="buttonOpen" class="button48 ui-corner-all" title="Open Media"></li>
<div id="buttonOpen" class="button48 ui-corner-all" title="Open Media"></div> <li id="buttonStop" class="button48 ui-corner-all" title="Stop"></li>
<div id="buttonStop" class="button48 ui-corner-all" title="Stop"></div> <li id="buttonFull" class="button48 ui-corner-all" title="Full Screen"></li>
<div id="buttonFull" class="button48 ui-corner-all" title="Full Screen"></div> <li id="buttonSout" class="button48 ui-corner-all" title="Easy Stream"></li>
<div id="buttonSout" class="button48 ui-corner-all" title="Easy Stream"></div> </ul>
</td> <ul id="buttonszone">
<td 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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> </ul>
</td> <div id="volumesliderzone">
<td> <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
<div id="volumesliderzone"> <div id="currentVolume" class="dynamic">50%</div>
<div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div> </div>
<div id="currentVolume" class="dynamic">50%</div> <div id="artszone">
</div> <img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/>
</td> </div>
<td id="artszone" rowspan="3"> <div id="mediaTitle" class="dynamic"></div>
<img id="albumArt" src="/art" width="141px" height="130px" alt="Album Art"/> <div id="seekContainer">
</td> <div id="seekSlider" title="Seek Time" style="width:98%; margin-left:10px;"></div>
</tr> <div id="currentTime" class="dynamic">00:00:00</div>
<tr> <div id="totalTime" class="dynamic">00:00:00</div>
<td colspan="3"> </div>
<div id="mediaTitle" class="dynamic"></div> </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> </div>
<div id="viewContainer" class="ui-widget"> <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> <div class="ui-widget-header" style="text-align: left;"><img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/> Viewer</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment