yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile Responsive Styles (#580)

Browse Source 
* WIP: Responsive styles

* Flip breakpoints, ensure doc doesn't spread

* Add MenuIcon

* Refactor Sidebar to share mobile responsive styles

* Fix accidental find/replace

* Tweak padding to take into account icon spacing
This commit is contained in:
Tom Moor
2018-02-10 23:24:12 -08:00
committed by GitHub
parent 4cc7338534
commit 6caba86751
17 changed files with 213 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/Editor/Editor.js
View File

@@ -4,8 +4,10 @@ import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { Value, Change } from 'slate';
import { Editor } from 'slate-react';
import type { SlateNodeProps, Plugin } from './types';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import keydown from 'react-keydown';
import type { SlateNodeProps, Plugin } from './types';
import getDataTransferFiles from 'utils/getDataTransferFiles';
import Flex from 'shared/components/Flex';
import ClickablePadding from './components/ClickablePadding';
@@ -20,7 +22,6 @@ import renderMark from './marks';
import createRenderNode from './nodes';
import schema from './schema';
import { isModKey } from './utils';
import styled from 'styled-components';
type Props = {
text: string,
@@ -227,9 +228,15 @@ class MarkdownEditor extends Component {
}
const MaxWidth = styled(Flex)`
margin: 0 60px;
max-width: 46em;
padding: 0 20px;
max-width: 100vw;
height: 100%;
${breakpoint('tablet')`
padding: 0;
margin: 0 60px;
max-width: 46em;
`};
`;
const Header = styled(Flex)`