Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fix page panels scrolling out of the viewport.

Browse Source 
Summary:
Side panels sliding out of the viewport was causing the
browser window to be scrollable, hence it was possible to scroll the
page panels out of the viewport. Solution is to use fixed positioning
instead of absolute.

Test Plan: Tested manually on FF and Chrome.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2714
This commit is contained in:
Cyprien P 2021-01-26 15:54:59 +01:00
parent 587da4db97
commit b5c1fc0c1a
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/client/ui/PagePanels.ts
View File

@ -194,16 +194,19 @@ export const cssLeftPane = styled(cssVBox, `
@media ${mediaSmall} {
.${cssPageContainer.className}-optimizeNarrowScreen & {
width: 240px;
position: absolute;
position: fixed;
z-index: 10;
top: 0;
bottom: 0;
left: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
visibility: hidden;
box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
transition: left 0.4s;
transition: left 0.4s, visibility 0.4s;
will-change: left;
}
.${cssPageContainer.className}-optimizeNarrowScreen &-open {
left: 0;
visibility: visible;
}
}
&-open {
@ -238,16 +241,19 @@ const cssRightPane = styled(cssVBox, `
@media ${mediaSmall} {
.${cssPageContainer.className}-optimizeNarrowScreen & {
width: 240px;
position: absolute;
position: fixed;
z-index: 10;
top: 0;
bottom: 0;
right: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
transition: right 0.4s;
visibility: hidden;
transition: right 0.4s, visibility 0.4s;
will-change: right;
}
.${cssPageContainer.className}-optimizeNarrowScreen &-open {
right: 0;
visibility: visible;
}
}
&-open {