working on making header more consistant with design

This commit is contained in:
Alex Windett 2017-02-06 12:05:58 +00:00
parent 8783e1a1bb
commit 087d420f85
6 changed files with 72 additions and 58 deletions

View File

@ -1,40 +1,44 @@
const Container = require('@ui/components/container');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const BaseElements = require('@ui/components/base-elements');
const PropTypes = require('@root/prop-types');
const React = require('react');
const ReactRouter = require('react-router');
const Styled = require('styled-components');
const flatten = require('lodash.flatten');
const fns = require('@ui/shared/functions');
const constants = require('@ui/shared/constants');
const {
remcalc
} = fns;
const {
colors,
} = constants;
const {
H1,
} = BaseElements;
const {
default: styled
} = Styled;
// Main Contonent Wrapper Styles
const StyledDiv = styled.div`
background-color: #FAFAFA;
height: ${remcalc(91)};
border-bottom: solid ${remcalc(1)} #d8d8d8;
padding: ${remcalc(30)} 0;
margin-bottom: ${remcalc(21)};
`;
const BreadcrumbA = styled.a`
text-decoration: none !important;
text-decoration: none;
`;
const BreadcrumbSpan = styled.span`
color: #646464;
`;
const H1 = styled.h1`
margin: 0 0 0 0;
padding-top: ${remcalc(31)};
padding-bottom: ${remcalc(31)};
color: ${colors.base.secondaryDark};
`;
const {
@ -83,11 +87,7 @@ const Breadcrumb = ({
<Row>
<Column xs={12}>
<StyledDiv>
<H1
style={{
fontSize: remcalc(24)
}}
>
<H1>
{getNameLink(name)}
</H1>
</StyledDiv>

View File

@ -3,7 +3,6 @@ const ReactRouter = require('react-router');
const Styled = require('styled-components');
const Column = require('@ui/components/column');
const Container = require('@ui/components/container');
const Avatar = require('@ui/components/avatar');
const fns = require('@ui/shared/functions');
const logo = require('@resources/logo.svg');
@ -11,6 +10,7 @@ const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const Tooltip = require('@ui/components/tooltip');
const composers = require('@ui/shared/composers');
const constants = require('@ui/shared/constants');
const {
Link
@ -28,26 +28,32 @@ const {
pseudoEl
} = composers;
const {
colors,
} = constants;
const borderSide = props => props.toggled
? 'bottom'
: 'top';
const StyledHeader = styled.header`
background-color: #ffffff;
padding-top: ${remcalc(21)};
padding-bottom: ${remcalc(21)};
background-color: ${colors.base.white};
padding: 0 ${remcalc(18)};
`;
const StyledLogo = styled.img`
padding-top: ${remcalc(10)};
padding-top: ${remcalc(12)};
`;
const StyledProfileWrapper = styled.div`
position: relative;
padding-top: ${remcalc(6)};
text-align: right;
`;
const StyledAvatarWrapper = styled.div`
display: inline-block;
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
@ -55,7 +61,7 @@ const StyledAvatarWrapper = styled.div`
${pseudoEl({
top: '50%',
right: remcalc(10)
right: remcalc(-10),
})}
}
`;
@ -67,8 +73,9 @@ const StyledTooltipWrapper = styled.div`
`;
const StyledName = styled.span`
color: #646464;
font-size: ${remcalc(16)}
color: ${colors.base.secondaryDark};
font-size: ${remcalc(16)};
height: ${remcalc(66)};
position: relative;
top: ${remcalc(-12)};
`;
@ -115,32 +122,30 @@ const Header = ({
return (
<StyledHeader name="application-header">
<Container fluid>
<Row>
<Column lg={10} xs={8}>
<Link to='/'>
<StyledLogo alt='Joyent' src={logo} />
</Link>
</Column>
<Column lg={2} xs={4}>
<StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}>
<EmptyButton onClick={handleToggleClick}>
<StyledName>
{account.name}
</StyledName>
<StyledAvatar
alt={account.name}
name={account.name}
src={account.avatar}
/>
</EmptyButton>
</StyledAvatarWrapper>
{tooltipComponent}
</StyledProfileWrapper>
</Column>
</Row>
</Container>
<Row>
<Column lg={10} xs={8}>
<Link to='/'>
<StyledLogo alt='Joyent' src={logo} />
</Link>
</Column>
<Column lg={2} xs={4}>
<StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}>
<EmptyButton onClick={handleToggleClick}>
<StyledName>
{account.name}
</StyledName>
<StyledAvatar
alt={account.name}
name={account.name}
src={account.avatar}
/>
</EmptyButton>
</StyledAvatarWrapper>
{tooltipComponent}
</StyledProfileWrapper>
</Column>
</Row>
</StyledHeader>
);
};

View File

@ -89,6 +89,10 @@ const Shadow = styled.div`
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
`;
const StyledUL = styled(Ul)`
padding: 0;
`;
const OrgNavigation = ({
orgs = []
}) => {
@ -133,9 +137,9 @@ const OrgNavigation = ({
return (
<StyledNav>
<Container>
<Ul>
<StyledUL>
{navLinks}
</Ul>
</StyledUL>
</Container>
</StyledNav>
);

View File

@ -26,9 +26,7 @@ const {
} = constants;
const StyledHorizontalList = styled(Ul)`
${breakpoints.smallOnly`
padding: 0
`}
padding: 0;
`;
const StyledHorizontalListItem = styled(Li)`

View File

@ -4,11 +4,16 @@ const Styled = require('styled-components');
const React = require('react');
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const {
default: styled
} = Styled;
const {
colors,
} = constants;
const {
remcalc
} = fns;
@ -23,8 +28,8 @@ const elements = [
'font-weight': 600,
'font-style': 'normal',
'font-stretch': 'normal',
'color': '#364acd',
'border-bottom': `${remcalc(1)} solid #d8d8d8`,
'color': colors.base.primaryLight,
'margin' : 0
}
},
{

View File

@ -16,9 +16,11 @@ const {
module.exports = styled.li`
display: inline-block;
margin-right: ${remcalc(24)};
padding-top: ${remcalc(10)};
padding-bottom: ${remcalc(10)};
& + & {
margin-left: ${remcalc(24)};
}
& a {
color: ${colors.base.primary};