Properly center status message in vnc_lite

This gets rid of the table and uses a flexbox instead.
This commit is contained in:
Samuel Mannehed 2017-10-31 18:51:33 +01:00
parent cf3b528281
commit 4023a6e1c7
2 changed files with 28 additions and 26 deletions

View File

@ -11,8 +11,6 @@ body {
background-color:#313131; background-color:#313131;
border-bottom-right-radius: 800px 600px; border-bottom-right-radius: 800px 600px;
height:100%; height:100%;
width:100%;
display: table;
} }
html { html {
@ -21,18 +19,15 @@ html {
} }
#noVNC_status_bar { #noVNC_status_bar {
margin-top:0px; width: 100%;
display:flex;
justify-content: space-between;
} }
#noVNC_status { #noVNC_status {
padding-top: 4px;
height: auto;
text-align: center;
color: #fff; color: #fff;
font: bold 12px Helvetica; font: bold 12px Helvetica;
position: relative; margin: auto;
width: 100%;
margin-left: 0px;
} }
.noVNC_status_normal { .noVNC_status_normal {
@ -54,6 +49,16 @@ html {
display: none; display: none;
} }
#noVNC_left_dummy_elem {
flex: 1;
}
#noVNC_buttons {
flex: 1;
display: flex;
justify-content: flex-end;
}
/* Do not set width/height for VNC_canvas or incorrect /* Do not set width/height for VNC_canvas or incorrect
* scaling will occur. Canvas size depends on remote VNC * scaling will occur. Canvas size depends on remote VNC
* settings and noVNC settings. */ * settings and noVNC settings. */

View File

@ -279,23 +279,20 @@
<body> <body>
<div id="noVNC_status_bar"> <div id="noVNC_status_bar">
<table border=0 width="100%"><tr> <div id="noVNC_left_dummy_elem"></div>
<td><div id="noVNC_status"> <div id="noVNC_status">Loading</div>
Loading <div id="noVNC_buttons">
</div></td> <input type=button value="Send CtrlAltDel"
<td width="1%"><div id="noVNC_buttons"> id="sendCtrlAltDelButton" class="noVNC_shown">
<input type=button value="Send CtrlAltDel" <span id="noVNC_xvp_buttons" class="noVNC_hidden">
id="sendCtrlAltDelButton" class="noVNC_shown"> <input type=button value="Shutdown"
<span id="noVNC_xvp_buttons" class="noVNC_hidden"> id="xvpShutdownButton">
<input type=button value="Shutdown" <input type=button value="Reboot"
id="xvpShutdownButton"> id="xvpRebootButton">
<input type=button value="Reboot" <input type=button value="Reset"
id="xvpRebootButton"> id="xvpResetButton">
<input type=button value="Reset" </span>
id="xvpResetButton"> </div>
</span>
</div></td>
</tr></table>
</div> </div>
<canvas id="noVNC_canvas" width="0" height="0"> <canvas id="noVNC_canvas" width="0" height="0">
Canvas not supported. Canvas not supported.