sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use absolute positioning instead of fixed (#1860)

Browse Source
This commit is contained in:
Aakansha Doshi 2020-07-02 18:57:47 +05:30 committed by GitHub
parent d9e84b90ce
commit b21f723eee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app.css
View File

@ -8,7 +8,7 @@
} }
.LoadingMessage { .LoadingMessage {
position: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;

2
src/components/FixedSideContainer.css
View File

@ -1,6 +1,6 @@
.FixedSideContainer { .FixedSideContainer {
--margin: 0.25rem; --margin: 0.25rem;
position: fixed; position: absolute;
pointer-events: none; pointer-events: none;
} }

10
src/components/LayerUI.tsx
View File

@ -224,7 +224,12 @@ const LayerUI = ({
))} ))}
</UserList> </UserList>
</div> </div>
{ </FixedSideContainer>
);
};
const renderBottomAppMenu = () => {
return (
<div <div
className={`App-menu App-menu_bottom zen-mode-transition ${ className={`App-menu App-menu_bottom zen-mode-transition ${
zenModeEnabled && "App-menu_bottom--transition-left" zenModeEnabled && "App-menu_bottom--transition-left"
@ -242,8 +247,6 @@ const LayerUI = ({
</Section> </Section>
</Stack.Col> </Stack.Col>
</div> </div>
}
</FixedSideContainer>
); );
}; };
@ -315,6 +318,7 @@ const LayerUI = ({
/> />
)} )}
{renderFixedSideContainer()} {renderFixedSideContainer()}
{renderBottomAppMenu()}
{ {
<aside <aside
className={`layer-ui__wrapper__github-corner zen-mode-transition ${ className={`layer-ui__wrapper__github-corner zen-mode-transition ${

9
src/css/styles.scss
View File

@ -259,13 +259,14 @@ button,
} }
.App-menu_bottom { .App-menu_bottom {
position: fixed; position: absolute;
bottom: 0; bottom: 0;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-gap: 4px; grid-gap: 4px;
align-items: flex-start; align-items: flex-start;
cursor: default; cursor: default;
pointer-events: none !important; pointer-events: none !important;
left: 0.25rem;
&--transition-left { &--transition-left {
section { section {
@ -394,7 +395,7 @@ button,
} }
.dropdown-select__language.dropdown-select--floating { .dropdown-select__language.dropdown-select--floating {
position: fixed; position: absolute;
bottom: 10px; bottom: 10px;
:root[dir="ltr"] & { :root[dir="ltr"] & {
right: 44px; right: 44px;
@ -426,7 +427,7 @@ button,
} }
.help-icon { .help-icon {
position: fixed; position: absolute;
cursor: pointer; cursor: pointer;
fill: $oc-gray-6; fill: $oc-gray-6;
bottom: 14px; bottom: 14px;
@ -455,7 +456,7 @@ button,
} }
.github-corner { .github-corner {
position: fixed; position: absolute;
top: 0; top: 0;
z-index: 2; z-index: 2;
:root[dir="ltr"] & { :root[dir="ltr"] & {