filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-27 01:03:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

made sidebar position absolute

Browse Source
This commit is contained in:
Martina 2020-08-25 21:13:02 -07:00
parent feed11bab5
commit 8e432232c0
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/constants.js
View File

@ -27,10 +27,10 @@ export const system = {
export const zindex = { export const zindex = {
navigation: 1, navigation: 1,
sidebar: 2, sidebar: 4,
header: 3, header: 3,
modal: 4, modal: 5,
tooltip: 5, tooltip: 6,
}; };
export const font = { export const font = {
@ -63,4 +63,4 @@ export const theme = {
export const gateways = { export const gateways = {
ipfs: "ipfs.slate.textile.io", ipfs: "ipfs.slate.textile.io",
} };

25
components/core/ApplicationLayout.js
View File

@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip"; import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
import { Boundary } from "~/components/system/components/fragments/Boundary";
const STYLES_SCROLL = css` const STYLES_SCROLL = css`
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -104,10 +105,15 @@ const STYLES_NAVIGATION = css`
`; `;
const STYLES_SIDEBAR_WEB = css` const STYLES_SIDEBAR_WEB = css`
z-index: ${Constants.zindex.sidebar};
height: 100vh; height: 100vh;
width: ${Constants.sizes.sidebar}px; width: ${Constants.sizes.sidebar}px;
padding: 0; padding: 0;
flex-shrink: 0; flex-shrink: 0;
position: absolute;
background-color: ${Constants.system.foreground};
top: 0;
right: 0;
box-shadow: inset 1px 0 0 0 ${Constants.system.border}; box-shadow: inset 1px 0 0 0 ${Constants.system.border};
${STYLES_SCROLL} ${STYLES_SCROLL}
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
@ -183,6 +189,7 @@ export default class ApplicationLayout extends React.Component {
ref={(c) => { ref={(c) => {
this._body = c; this._body = c;
}} }}
id="slate-client-body"
> >
{this.props.children} {this.props.children}
</div> </div>
@ -191,14 +198,16 @@ export default class ApplicationLayout extends React.Component {
</div> </div>
</div> </div>
{this.props.sidebar ? ( {this.props.sidebar ? (
<div <Boundary onOutsideRectEvent={this.props.onDismissSidebar} enabled>
css={STYLES_SIDEBAR_WEB} <div
ref={(c) => { css={STYLES_SIDEBAR_WEB}
this._sidebar = c; ref={(c) => {
}} this._sidebar = c;
> }}
{sidebarElements} >
</div> {sidebarElements}
</div>
</Boundary>
) : null} ) : null}
</div> </div>
); );