[vlc-commits] Improvements on the main Web Interface
Konstantin Bogdanov
git at videolan.org
Thu Dec 22 23:13:08 CET 2011
vlc | branch: master | Konstantin Bogdanov <var1able at var1able.ru> | Thu Dec 22 23:04:38 2011 +0100| [6d3f1d60857b792d0e219bc9109960dc97eb5b17] | committer: Jean-Baptiste Kempf
Improvements on the main Web Interface
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=6d3f1d60857b792d0e219bc9109960dc97eb5b17
---
share/lua/http/css/main.css | 90 +++++++++++++++-------------
share/lua/http/dialogs/browse_window.html | 2 +-
share/lua/http/index.html | 35 +++++------
share/lua/http/mobile_browse.html | 2 +-
4 files changed, 65 insertions(+), 64 deletions(-)
diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index 0a7df64..ec178f0 100644
--- a/share/lua/http/css/main.css
+++ b/share/lua/http/css/main.css
@@ -3,7 +3,6 @@ root {
}
body{
}
-
#mainContainer{
text-align: center;
width: 800px;
@@ -13,10 +12,11 @@ body{
}
#libraryContainer{
width: 800px;
+ margin-top: 2px;
}
#libraryTree{
height: 300px;
- overflow:scroll;
+ overflow: auto;
white-space: nowrap;
text-align: left;
}
@@ -25,14 +25,17 @@ body{
}
#mediaViewer{
min-height: 500px;
+ background-color:#222;
}
#player{
+ top:0px;
height: 500px;
width: 500px;
+ background-color:#222;
}
#seekSlider{
width: 98%;
- margin-left:10px;
+ margin-left:5px;
}
#volumeSlider{
width: 100px;
@@ -41,62 +44,58 @@ body{
#currentVolume{
display: inline-block;
}
-
#mediaTitle{
- overflow: hidden;
- padding: 5px;
-}
-
-#regular_layout #mediaTitle{
position: absolute;
- top: 60px;
- left: 0px;
- width: 500px;
- text-align: left;
-}
-
-#mobile_layout #mediaTitle{
+ top: 0px;
+ left: 10px;
+ width: 600px;
+ text-align: center;
+ padding: 5px;
+ overflow: auto;
}
-
#currentTime{
+ margin-top:-40px;
float: left;
text-align: left;
}
+
#totalTime{
+ margin-top:-40px;
float: right;
text-align: right;
}
+
#controlTable{
position:relative;
height: 150px;
}
-
-
#controlButtons{
- text-align: left;
- width: 380px;
-}
-
-/* div layout */
-#regular_layout #controlButtons{
position: absolute;
- top: 0;
- left: 0;
+ top: 80px;
+ left: 10px;
padding: 0;
margin: 0;
+ text-align: left;
+ width: 380px;
}
-
-/* still on table layout */
-#mobile_layout #controlButtons{
+#buttonzone {
+ position:absolute;
+ top: 200px;
+ width: 20px;
+ margin-left:-20px;
+ vertical-align:top;
+ padding:0px;
+}
+#buttonzone li{
+ float:left;
}
#buttonszone{
position: absolute;
- top: 5px;
- left: 388px;
- width: 42px;
+ top: 20px;
+ width: 20px;
vertical-align: top;
- margin: 0;
+ margin-left:-20px;
padding: 0;
}
#buttonszone li{
@@ -105,19 +104,21 @@ body{
#volumesliderzone{
position: absolute;
- top: 20px;
- left: 435px;
+ top: 105px;
+ left: 410px;
width: 210px;
}
#volumeSlider{
width: 208px;
}
-
+#libraryTree ul li a {
+ border:none;
+}
#artszone{
position: absolute;
- top: 0;
- left: 648px;
+ top: 0px;
+ right: 10px;
width: 150px;
height: 150px;
vertical-align: top;
@@ -125,9 +126,9 @@ body{
#seekContainer{
position:absolute;
- left: 0;
- top: 100px;
- width: 645px;
+ left: 5px;
+ top: 55px;
+ width: 79%;
vertical-align: bottom;
}
@@ -212,6 +213,11 @@ body{
font-size: 11px;
padding: 0px;
}
+
+#window_equalizer {
+ height:80px !important ;
+}
+
.eqBand{
margin-bottom: 10px;
margin-top: 10px;
diff --git a/share/lua/http/dialogs/browse_window.html b/share/lua/http/dialogs/browse_window.html
index ed5e9b4..a2011ed 100644
--- a/share/lua/http/dialogs/browse_window.html
+++ b/share/lua/http/dialogs/browse_window.html
@@ -35,7 +35,7 @@
</script>
<div id="window_browse" title="<?vlc gettext("Media Browser") ?>">
- <div style="height:500px;overflow: scroll;">
+ <div style="height:500px;overflow: auto;">
<ol id='browse_elements' selectable="selectable">
<li><?vlc gettext("Play List") ?></li>
</ol>
diff --git a/share/lua/http/index.html b/share/lua/http/index.html
index 2d84163..ca72059 100644
--- a/share/lua/http/index.html
+++ b/share/lua/http/index.html
@@ -50,6 +50,9 @@
$('#libraryContainer').animate({
height: 'toggle'
});
+ $('#buttonzone').animate({
+ width: 'toggle'
+ });
return false;
});
$('#buttonViewer').click(function(){
@@ -194,9 +197,6 @@
<div class="centered">
<div id="mainContainer" class="centered">
<div id="controlContainer" class="ui-widget">
- <div class="ui-widget-header" style="text-align: left;">
- <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/><?vlc gettext("Controls") ?>
- </div>
<div id="controlTable" class="ui-widget-content">
<ul id="controlButtons">
<li id="buttonPrev" class="button48 ui-corner-all" title="<?vlc gettext("Previous") ?>"></li>
@@ -230,30 +230,25 @@
</div>
</div>
</div>
+ <div id="libraryContainer" class="ui-widget">
+ <ul id="buttonzone" align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
+ <li id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Shuffle") ?>"><span class="ui-icon ui-icon-shuffle"></span></li>
+ <li id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Loop") ?>"><span class="ui-icon ui-icon-refresh"></span></li>
+ <li id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Repeat") ?>"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
+ <li id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Empty Playlist") ?>"><span class="ui-icon ui-icon-trash"></span></li>
+ <li id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Queue Selected") ?>"><span class="ui-icon ui-icon-plus"></span></li>
+ <li id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Play Selected") ?>"><span class="ui-icon ui-icon-play"></span></li>
+ <li id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
+ </ul>
+ <div id="libraryTree" class="ui-widget-content"></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"/><?vlc gettext("Viewer") ?></div>
<div id="mediaViewer" class="ui-widget-content">
<div href="http://localhost:8081/stream.flv" style="display:block; width:100%" id="player">
<p><?vlc gettext("Loading flowplayer...") ?><br/><?vlc gettext("If nothing appears, check your internet connection.") ?></p>
</div>
</div>
</div>
- <div id="libraryContainer" class="ui-widget">
- <div class="ui-widget-header" style="text-align: left;">
- <img src="images/vlc16x16.png" alt="VLC" width="16" height="16"/><?vlc gettext("Library") ?>
- </div>
- <div align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;">
- <div id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Shuffle") ?>"><span class="ui-icon ui-icon-shuffle"></span></div>
- <div id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Loop") ?>"><span class="ui-icon ui-icon-refresh"></span></div>
- <div id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Repeat") ?>"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></div>
- <div id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Empty Playlist") ?>"><span class="ui-icon ui-icon-trash"></span></div>
- <div id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Queue Selected") ?>"><span class="ui-icon ui-icon-plus"></span></div>
- <div id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Play Selected") ?>"><span class="ui-icon ui-icon-play"></span></div>
- <div id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div>
- </div>
- <div id="libraryTree" class="ui-widget-content"></div>
- </div>
-
<div class="footer">
VLC <?vlc print(vlc.misc.version() .. ' - Lua Web Interface - <a id="mobileintflink" href="/mobile.html">Mobile Interface</a> - ' .. vlc.misc.copyright()) ?>
</div>
diff --git a/share/lua/http/mobile_browse.html b/share/lua/http/mobile_browse.html
index 9d429e2..9cf20be 100644
--- a/share/lua/http/mobile_browse.html
+++ b/share/lua/http/mobile_browse.html
@@ -24,7 +24,7 @@
<head>
<title><?vlc gettext("VLC media player - Web Interface") ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="viewport" content="width=device-width; user-scalable=no" />
+ <meta name="viewport" content="width=device-width" />
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
<script type="text/javascript" src="js/common.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
More information about the vlc-commits
mailing list