Browse Source

Fix webUI layout so signature does not overlay buttons on small screens (#396)

i18n
Xose Pérez 6 years ago
parent
commit
b7a5c128df
5 changed files with 3173 additions and 3177 deletions
  1. BIN
      code/espurna/data/index.html.gz
  2. +3159
    -3159
      code/espurna/static/index.html.gz.h
  3. +0
    -4
      code/html/custom.css
  4. +4
    -4
      code/html/index.html
  5. +10
    -10
      code/html/side-menu.css

BIN
code/espurna/data/index.html.gz View File


+ 3159
- 3159
code/espurna/static/index.html.gz.h
File diff suppressed because it is too large
View File


+ 0
- 4
code/html/custom.css View File

@ -9,10 +9,6 @@
display: none; display: none;
} }
.footer { .footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px; padding: 10px;
font-size: 80%; font-size: 80%;
color: #999; color: #999;


+ 4
- 4
code/html/index.html View File

@ -1165,14 +1165,14 @@
<div id="dczRelayTemplate" class="template"> <div id="dczRelayTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Switch</label> <label class="pure-u-1 pure-u-lg-1-4">Switch</label>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>
</div> </div>
</div> </div>
<div id="dczMagnitudeTemplate" class="template"> <div id="dczMagnitudeTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Magnitude</label> <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-2 hint center"></div> <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
</div> </div>
</div> </div>
@ -1180,14 +1180,14 @@
<div id="tspkRelayTemplate" class="template"> <div id="tspkRelayTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Switch</label> <label class="pure-u-1 pure-u-lg-1-4">Switch</label>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0" /></div>
</div> </div>
</div> </div>
<div id="tspkMagnitudeTemplate" class="template"> <div id="tspkMagnitudeTemplate" class="template">
<div class="pure-g"> <div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Magnitude</label> <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0" /></div>
<div class="pure-u-1 pure-u-lg-1-2 hint center"></div> <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
</div> </div>
</div> </div>


+ 10
- 10
code/html/side-menu.css View File

@ -29,12 +29,12 @@ This is the parent `<div>` that contains the menu and the content area.
padding-left: 0; padding-left: 0;
} }
#layout.active #menu { #layout.active #menu {
left: 150px;
width: 150px;
left: 160px;
width: 160px;
} }
#layout.active .menu-link { #layout.active .menu-link {
left: 150px;
left: 160px;
} }
/* /*
The content `<div>` is where all your content goes. The content `<div>` is where all your content goes.
@ -80,8 +80,8 @@ appears on the left side of the page.
*/ */
#menu { #menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
margin-left: -160px; /* "#menu" width */
width: 160px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -216,21 +216,21 @@ Hides the menu at `48em`, but modify this based on your app's needs.
} }
#layout { #layout {
padding-left: 150px; /* left col width "#menu" */
padding-left: 160px; /* left col width "#menu" */
left: 0; left: 0;
} }
#menu { #menu {
left: 150px;
left: 160px;
} }
.menu-link { .menu-link {
position: fixed; position: fixed;
left: 150px;
left: 160px;
display: none; display: none;
} }
#layout.active .menu-link { #layout.active .menu-link {
left: 150px;
left: 160px;
} }
} }
@ -243,6 +243,6 @@ Hides the menu at `48em`, but modify this based on your app's needs.
*/ */
#layout.active { #layout.active {
position: relative; position: relative;
left: 150px;
left: 160px;
} }
} }

Loading…
Cancel
Save