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;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
font-size: 80%;
color: #999;


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

@ -1165,14 +1165,14 @@
<div id="dczRelayTemplate" class="template">
<div class="pure-g">
<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 id="dczMagnitudeTemplate" class="template">
<div class="pure-g">
<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>
</div>
@ -1180,14 +1180,14 @@
<div id="tspkRelayTemplate" class="template">
<div class="pure-g">
<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 id="tspkMagnitudeTemplate" class="template">
<div class="pure-g">
<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>
</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;
}
#layout.active #menu {
left: 150px;
width: 150px;
left: 160px;
width: 160px;
}
#layout.active .menu-link {
left: 150px;
left: 160px;
}
/*
The content `<div>` is where all your content goes.
@ -80,8 +80,8 @@ appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
margin-left: -160px; /* "#menu" width */
width: 160px;
position: fixed;
top: 0;
left: 0;
@ -216,21 +216,21 @@ Hides the menu at `48em`, but modify this based on your app's needs.
}
#layout {
padding-left: 150px; /* left col width "#menu" */
padding-left: 160px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
left: 160px;
}
.menu-link {
position: fixed;
left: 150px;
left: 160px;
display: none;
}
#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 {
position: relative;
left: 150px;
left: 160px;
}
}

Loading…
Cancel
Save