http: Ensure mobile buttons are on one line
authorMathieu Parent <math.parent@gmail.com>
Thu, 3 Aug 2017 16:27:04 +0000 (18:27 +0200)
committerJean-Baptiste Kempf <jb@videolan.org>
Fri, 4 Aug 2017 07:51:35 +0000 (09:51 +0200)
Tested with 320x480 or wider.

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org>
share/lua/http/css/mobile.css
share/lua/http/mobile.html

index e503334..005aea8 100644 (file)
@@ -7,6 +7,7 @@ root {
 body{
        font: 11pt Helvetica, Arial, sans-serif;
        background-color:#EEE;
+       margin: 0px;
 }
 
 #libraryTree{
@@ -81,12 +82,12 @@ body{
 #buttons{
        margin:0 auto; 
        position: relative; 
-       width:265px;
+       width: 288px;
 }
 .button48{
        width: 48px;
        height: 48px;
-       margin: 5px 0px 5px 15px;
+       margin: 5px 0px 5px 0px;
        background: none;
        border: none;
        display: inline-block;
index 475ab30..3c5f660 100644 (file)
                <div style="width:100%"><div id="mediaTitle" class="dynamic centered"></div></div>
                <div id="play_controls">
                        <div id="buttons">
-                               <div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
-                               <div id="buttonRewd" class="button48  ui-corner-all" title="Rewind"></div>
-                               <div id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></div>
-                               <div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
-                               <div id="buttonFwrd" class="button48  ui-corner-all" title="Forward"></div>
-                               <div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
+                               <div id="buttonPrev" class="button48  ui-corner-all" title="Previous">
+                               </div><div id="buttonRewd" class="button48  ui-corner-all" title="Rewind">
+                               </div><div id="buttonPlay" class="button48  ui-corner-all paused" title="Play">
+                               </div><div id="buttonStop" class="button48  ui-corner-all" title="Stop">
+                               </div><div id="buttonFwrd" class="button48  ui-corner-all" title="Forward">
+                               </div><div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
                        </div>
                        <div id="seekSlider" title="Seek Time" style="font-size:15px;"></div>
                        <div id="currentTime" class="dynamic">00:00:00</div>
                </div>
                <div id="controls">
                        <div id="buttons">
-                               <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
-                               <div id="buttonFull" class="button48  ui-corner-all" title="Full Screen"></div>
-                               <div id="buttonEQ" class="button48 ui-corner-all" title="Equalizer"></div>
-                               <div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
+                               <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media">
+                               </div><div id="buttonFull" class="button48  ui-corner-all" title="Full Screen">
+                               </div><div id="buttonEQ" class="button48 ui-corner-all" title="Equalizer">
+                               </div><div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>
                        </div>
                        <div id="volumeSlider" title="Volume" style="font-size:15px;">
                                <img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/>