coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests 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

9
app/components/Layout/Layout.js
View File

@ -4,6 +4,7 @@ import { Switch, Route, withRouter } from 'react-router-dom';
import type { Location } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import { observer, inject } from 'mobx-react';
import keydown from 'react-keydown';
import Analytics from 'shared/components/Analytics';
@ -122,12 +123,16 @@ const Container = styled(Flex)`
`;
const Content = styled(Flex)`
margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
margin: 0;
transition: margin-left 200ms ease-in-out;
@media print {
margin-left: 0;
margin: 0;
}
${breakpoint('tablet')`
margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
`};
`;
export default withRouter(inject('user', 'auth', 'ui', 'documents')(Layout));