Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: fix overlay display failures

Browse source 
Fixed overlay display failures for users on mobile, or users who booted
up in safe mode XD. Noticeable when vertical or horizontal real-estate
is too small for the displayed overlay.

This failure is most evident when you "edit" an interface, or display
your unsaved changes.

When content is wider than the screen view, the table hugs the (widest)
content maximally, and the overlay window becomes scrollable.

Disabled -webkit-overflow-scrolling, left, and right, because both FF
and Safari disable them as invalid anyway.

Signed-off-by: Paul Dee <systemcrash@users.noreply.github.com>
[Merge duplicate modal declarations, remove not applicable modal
 flexbox properties]
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit d1035c1f69)
This commit is contained in:
Paul Dee 2021-10-07 16:26:06 +02:00 committed by Jo-Philipp Wich
parent 26047fb967
commit d24760e60a
1 changed files with 2 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -1161,12 +1161,9 @@ footer {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: -10000px;
right: 10000px;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
z-index: 900; z-index: 900;
overflow-y: scroll; overflow: scroll;
-webkit-overflow-scrolling: touch;
transition: opacity .125s ease-in; transition: opacity .125s ease-in;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -1175,11 +1172,9 @@ footer {
.modal { .modal {
width: 90%; width: 90%;
margin: 5em auto; margin: 5em auto;
display: flex; display: table;
flex-wrap: wrap;
min-height: 32px; min-height: 32px;
max-width: 600px; max-width: 600px;
align-items: center;
border-radius: 3px; border-radius: 3px;
background: var(--background-color-high); background: var(--background-color-high);
box-shadow: 0 0 3px #444; box-shadow: 0 0 3px #444;
@ -1188,7 +1183,6 @@ footer {
} }
.modal > * { .modal > * {
flex-basis: 100%;
line-height: normal; line-height: normal;
margin-bottom: .5em; margin-bottom: .5em;
max-width: 100%; max-width: 100%;
@ -2210,58 +2204,6 @@ div.cbi-value var.cbi-tooltip-container,
flex-basis: 100%; flex-basis: 100%;
} }
#modal_overlay {
position: fixed;
top: 0;
bottom: 0;
left: -10000px;
right: 10000px;
background: rgba(0, 0, 0, 0.7);
z-index: 900;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transition: opacity .125s ease-in;
opacity: 0;
}
#modal_overlay > .modal {
width: 90%;
margin: 5em auto;
display: flex;
flex-wrap: wrap;
min-height: 32px;
max-width: 600px;
align-items: center;
border-radius: 3px;
background: var(--background-color-high);
box-shadow: 0 0 3px #444;
padding: 1em 1em .5em 1em;
min-width: 270px;
}
#modal_overlay .modal > * {
flex-basis: 100%;
line-height: normal;
margin-bottom: .5em;
}
#modal_overlay .modal > pre,
#modal_overlay .modal > textarea {
white-space: pre-wrap;
overflow: auto;
}
body.modal-overlay-active {
overflow: hidden;
height: 100vh;
}
body.modal-overlay-active #modal_overlay {
left: 0;
right: 0;
opacity: 1;
}
html body.apply-overlay-active { html body.apply-overlay-active {
height: calc(100vh - 63px); height: calc(100vh - 63px);
} }