coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Closes #92 - Sidebar now scrolls instead of squishes

Browse Source
This commit is contained in:
Tom Moor
2017-06-30 22:09:22 -07:00
parent 37ed973322
commit 603d5f2b6b
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/components/Layout/Layout.js
View File

@ -11,6 +11,7 @@ import { textColor } from 'styles/constants.scss';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu'; import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import { LoadingIndicatorBar } from 'components/LoadingIndicator'; import { LoadingIndicatorBar } from 'components/LoadingIndicator';
import Scrollable from 'components/Scrollable';
import SidebarCollection from './components/SidebarCollection'; import SidebarCollection from './components/SidebarCollection';
import SidebarCollectionList from './components/SidebarCollectionList'; import SidebarCollectionList from './components/SidebarCollectionList';
@ -101,21 +102,23 @@ type Props = {
</Header> </Header>
<Flex column> <Flex column>
<LinkSection> <Scrollable>
<SidebarLink to="/search">Search</SidebarLink> <LinkSection>
</LinkSection> <SidebarLink to="/search">Search</SidebarLink>
<LinkSection> </LinkSection>
<SidebarLink to="/dashboard">Home</SidebarLink> <LinkSection>
<SidebarLink to="/starred">Starred</SidebarLink> <SidebarLink to="/dashboard">Home</SidebarLink>
</LinkSection> <SidebarLink to="/starred">Starred</SidebarLink>
<LinkSection> </LinkSection>
{ui.activeCollection <LinkSection>
? <SidebarCollection {ui.activeCollection
document={ui.activeDocument} ? <SidebarCollection
collection={ui.activeCollection} document={ui.activeDocument}
/> collection={ui.activeCollection}
: <SidebarCollectionList />} />
</LinkSection> : <SidebarCollectionList />}
</LinkSection>
</Scrollable>
</Flex> </Flex>
</Sidebar>} </Sidebar>}
@ -135,7 +138,7 @@ const Container = styled(Flex)`
`; `;
const LogoLink = styled(Link)` const LogoLink = styled(Link)`
margin-top: 5px; margin-top: 15px;
font-family: 'Atlas Grotesk'; font-family: 'Atlas Grotesk';
font-weight: bold; font-weight: bold;
color: ${textColor}; color: ${textColor};
@ -166,19 +169,19 @@ const Content = styled(Flex)`
const Sidebar = styled(Flex)` const Sidebar = styled(Flex)`
width: 250px; width: 250px;
margin-left: ${props => (props.editMode ? '-250px' : 0)}; margin-left: ${props => (props.editMode ? '-250px' : 0)};
padding: 10px 20px;
background: rgba(250, 251, 252, 0.71); background: rgba(250, 251, 252, 0.71);
border-right: 1px solid #eceff3; border-right: 1px solid #eceff3;
transition: margin-left 200ms ease-in-out; transition: margin-left 200ms ease-in-out;
`; `;
const Header = styled(Flex)` const Header = styled(Flex)`
margin-bottom: 20px; flex-shrink: 0;
padding: 10px 20px;
`; `;
const LinkSection = styled(Flex)` const LinkSection = styled(Flex)`
margin-bottom: 20px;
flex-direction: column; flex-direction: column;
padding: 10px 20px;
`; `;
export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout)); export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));