fix modal dialog for small windows. better onresize handling for sliders and modals

This commit is contained in:
Stewart Allen 2020-06-09 00:25:11 -04:00
commit 4c7c05037b
4 changed files with 29 additions and 8 deletions

View file

@ -146,6 +146,15 @@ th, tr, td {
.russo {
font-family: 'Russo One', sans-serif;
}
.overy {
overflow-y: auto;
}
.mh0 {
min-height: 0;
}
.mh85 {
max-height: 85%;
}
:-moz-any() {
overflow-x: hidden !important;
@ -451,12 +460,12 @@ th, tr, td {
display: none;
position: fixed;
z-index: 20;
transform: translateY(-50%);
top: 50%;
left: 0px;
right: 0px;
bottom: 0px;
height: 300px;
transform: translateY(-50%);
background-color: var(--bg-gray);
border-bottom: 1px solid black;
border-top: 1px solid black;
@ -473,7 +482,6 @@ th, tr, td {
padding: 10px;
min-height: 20px;
font-size: smaller;
xfont-family: monospace;
background-color: rgba(255,255,255,0.75);
}
@ -677,6 +685,7 @@ th, tr, td {
.t-pad2 {
width: 10px;
}
#devices {
width: 200px;
}

View file

@ -193,7 +193,7 @@
</div>
<div id="mid-mcol" class="grow">
<div id="modal">
<div class="col">
<div id="modal-box" class="col">
<div class="mod-top row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
<div id="mod-help" class="mdialog col">
@ -211,17 +211,17 @@
<button id="mode-cam" class="dev-type"><label>CNC</label></button>
<button id="mode-laser" class="dev-type"><label>LASER</label></button>
</div>
<div class="row">
<div class="row mh0">
<div id="devices" class="t-33 col"><select id="device-list" size="15" class="grow"></select></div>
<div class="t-pad"></div>
<div id="device" class="col t-body t-inset"></div>
<div id="device" class="col t-body t-inset overy"></div>
<div class="t-pad"></div>
<div id="gcode-edit" class="t-body t-inset col">
<div class="set-header col">gcode editor</div>
<div id="dev-gcode" class="grow"></div>
</div>
</div>
<div id="device-action" class="flow-row">
<div id="device-action" class="row">
<div class="grow"></div>
<button id="device-add"><i class="fas fa-plus"></i></button>
<button id="device-del"><i class="fas fa-minus"></i></button>