Fixing some layout issues

This commit is contained in:
Tom Moor
2017-09-24 20:03:03 -07:00
parent 504dfbea57
commit 6b82df71e0
5 changed files with 14 additions and 10 deletions

View File

@ -210,6 +210,7 @@ type KeyData = {
} }
const MaxWidth = styled(Flex)` const MaxWidth = styled(Flex)`
padding: 0 60px;
max-width: 50em; max-width: 50em;
height: 100%; height: 100%;
`; `;

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { color, layout } from 'styles/constants'; import { color } from 'styles/constants';
import type { User, Team } from 'types'; import type { User, Team } from 'types';
import Flex from 'components/Flex'; import Flex from 'components/Flex';
@ -37,7 +37,7 @@ const TeamName = styled.div`
const Header = styled(Flex)` const Header = styled(Flex)`
flex-shrink: 0; flex-shrink: 0;
padding: ${layout.padding}; padding: 16px 24px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -49,8 +49,8 @@ const Header = styled(Flex)`
&::after { &::after {
content: ""; content: "";
left: ${layout.hpadding}; left: 24px;
right: ${layout.hpadding}; right: 24px;
background: rgba(0,0,0,.075); background: rgba(0,0,0,.075);
height: 1px; height: 1px;
position: absolute; position: absolute;

View File

@ -4,7 +4,7 @@ import { observable } from 'mobx';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import Flex from 'components/Flex'; import Flex from 'components/Flex';
import styled from 'styled-components'; import styled from 'styled-components';
import { color, layout, fontWeight } from 'styles/constants'; import { color, fontWeight } from 'styles/constants';
import SidebarLink from './SidebarLink'; import SidebarLink from './SidebarLink';
import DropToImport from 'components/DropToImport'; import DropToImport from 'components/DropToImport';
@ -152,7 +152,7 @@ const Header = styled(Flex)`
text-transform: uppercase; text-transform: uppercase;
color: ${color.slate}; color: ${color.slate};
letter-spacing: 0.04em; letter-spacing: 0.04em;
padding: 0 ${layout.hpadding}; padding: 0 24px;
`; `;
const CollectionAction = styled.a` const CollectionAction = styled.a`

View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { layout, color, fontWeight } from 'styles/constants'; import { color, fontWeight } from 'styles/constants';
import styled from 'styled-components'; import styled from 'styled-components';
const activeStyle = { const activeStyle = {
@ -16,7 +16,7 @@ const styleComponent = component => styled(component)`
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 5px ${layout.hpadding}; margin: 5px 24px;
color: ${color.slateDark}; color: ${color.slateDark};
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;

View File

@ -354,10 +354,13 @@ const DropHere = styled(Flex)`
const Meta = styled(Flex)` const Meta = styled(Flex)`
align-items: flex-start; align-items: flex-start;
position: absolute; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
padding: ${layout.padding}; padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(20px);
`; `;
const Container = styled(Flex)` const Container = styled(Flex)`