From dc33cc97342cdd7ba713282cb6cabf98783ec6ff Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 1 Jul 2018 10:20:57 -0700 Subject: [PATCH] position sticky --- app/components/Sidebar/Sidebar.js | 4 +- app/scenes/Document/Document.js | 43 ++++++++--------- app/scenes/Document/components/Breadcrumb.js | 6 +++ app/scenes/Document/components/Header.js | 50 +++++++++++++------- 4 files changed, 62 insertions(+), 41 deletions(-) diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js index 1b0a89102..f69ac1620 100644 --- a/app/components/Sidebar/Sidebar.js +++ b/app/components/Sidebar/Sidebar.js @@ -59,7 +59,7 @@ const Container = styled(Flex)` background: ${props => props.theme.smoke}; transition: left 100ms ease-out; margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')}; - z-index: 1; + z-index: 2; @media print { display: none; @@ -101,7 +101,7 @@ const Toggle = styled.a` left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)}; right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')}; z-index: 1; - margin: 16px; + margin: 12px; ${breakpoint('tablet')` display: none; diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index ef5147934..87fa7ff1e 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -269,7 +269,7 @@ class DocumentScene extends React.Component { } return ( - + {isMoving && document && } {titleText && } {(this.isUploading || this.isSaving) && } @@ -278,7 +278,7 @@ class DocumentScene extends React.Component { ) : ( - + {this.isEditing && ( { )} + {document && + !isShare && ( +
+ )} { toc /> - {document && - !isShare && ( -
- )} - + )} ); @@ -330,13 +328,14 @@ class DocumentScene extends React.Component { } const MaxWidth = styled(Flex)` - padding: 0 20px; + padding: 0 16px; max-width: 100vw; + width: 100%; height: 100%; ${breakpoint('tablet')` - padding: 0; - margin: 60px; + padding: 0 24px; + margin: 60px auto; max-width: 46em; `}; `; diff --git a/app/scenes/Document/components/Breadcrumb.js b/app/scenes/Document/components/Breadcrumb.js index 72b3e5b8b..352a1f005 100644 --- a/app/scenes/Document/components/Breadcrumb.js +++ b/app/scenes/Document/components/Breadcrumb.js @@ -1,5 +1,6 @@ // @flow import * as React from 'react'; +import breakpoint from 'styled-components-breakpoint'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { CollectionIcon, GoToIcon } from 'outline-icons'; @@ -32,6 +33,11 @@ const Breadcrumb = ({ document }: Props) => { const Wrapper = styled(Flex)` width: 33.3%; + display: none; + + ${breakpoint('tablet')` + display: flex; + `}; `; const Slash = styled(GoToIcon)` diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index 0d064d31e..b3a7b28cf 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import { throttle } from 'lodash'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; @@ -22,7 +22,6 @@ type Props = { isSaving: boolean, isPublishing: boolean, savingIsDisabled: boolean, - editMode: boolean, onDiscard: () => *, onSave: ({ done?: boolean, @@ -36,10 +35,6 @@ type Props = { class Header extends React.Component { @observable isScrolled = false; - componentWillMount() { - this.handleScroll(); - } - componentDidMount() { window.addEventListener('scroll', this.handleScroll); } @@ -48,10 +43,12 @@ class Header extends React.Component { window.removeEventListener('scroll', this.handleScroll); } - handleScroll = () => { + updateIsScrolled = () => { this.isScrolled = window.scrollY > 75; }; + handleScroll = throttle(this.updateIsScrolled, 50); + handleNewDocument = () => { this.props.history.push(documentNewUrl(this.props.document)); }; @@ -68,6 +65,13 @@ class Header extends React.Component { this.props.onSave({ done: true, publish: true }); }; + handleClickTitle = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + render() { const { document, @@ -76,19 +80,19 @@ class Header extends React.Component { isPublishing, isSaving, savingIsDisabled, - editMode, } = this.props; return ( - {document.title} + + {document.title} + {!isDraft && !isEditing && } {isDraft && ( @@ -160,19 +164,25 @@ const Status = styled.div` `; const Wrapper = styled(Flex)` - width: 33.3%; + width: 100%; + align-self: flex-end; + + ${breakpoint('tablet')` + width: 33.3%; + `}; `; const Actions = styled(Flex)` - position: fixed; + position: sticky; top: 0; right: 0; - left: ${props => (props.editMode ? '0' : props.theme.sidebarWidth)}; + left: 0; + z-index: 1; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid ${props => (props.isCompact ? props.theme.smoke : 'transparent')}; padding: 12px; - transition: all 100ms ease-out; + transition: padding 100ms ease-out; -webkit-backdrop-filter: blur(20px); @media print { @@ -180,13 +190,11 @@ const Actions = styled(Flex)` } ${breakpoint('tablet')` - padding: ${props => - props.isCompact ? '12px' : `${props.theme.padding} 0`}; + padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)}; `}; `; const Title = styled.div` - width: 33.3%; font-size: 16px; font-weight: 600; text-align: center; @@ -196,6 +204,14 @@ const Title = styled.div` overflow: hidden; transition: opacity 100ms ease-in-out; opacity: ${props => (props.isHidden ? '0' : '1')}; + cursor: ${props => (props.isHidden ? 'default' : 'pointer')}; + display: none; + width: 0; + + ${breakpoint('tablet')` + display: block; + width: 33.3%; + `}; `; const Link = styled.a`