design content header

This commit is contained in:
cyril lopez 2017-07-18 14:07:48 +02:00
parent d46f47e0b9
commit 24c05297c4
4 changed files with 24 additions and 8 deletions

View File

@ -12,10 +12,10 @@ class ContentHeader extends React.Component { // eslint-disable-line react/prefe
render() { render() {
return ( return (
<div className={styles.contentHeader}> <div className={styles.contentHeader}>
<div> <div className={styles.title}>
<FormattedMessage {...{id: this.props.content.name}} /> <FormattedMessage {...{id: this.props.name }} />
</div> </div>
<FormattedMessage {...{id: this.props.content.description}} /> <span><FormattedMessage {...{id: this.props.description}} /></span>
</div> </div>
); );
} }

View File

@ -1,3 +1,16 @@
.contentHeader { /* stylelint-disable */ .contentHeader { /* stylelint-disable */
padding: 3rem 4rem;
font-family: Lato;
> span {
color: #787E8F;
font-size: 1.3rem;
line-height: 1.5rem;
}
}
.title {
color: #333740;
font-family: Lato;
font-size: 2.4rem;
line-height: 2.9rem;
} }

View File

@ -8,10 +8,9 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from 'reselect';
import { map } from 'lodash';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { router } from 'app'; import { router } from 'app';
import { FormattedMessage } from 'react-intl';
// design // design
import ContentHeader from 'components/ContentHeader'; import ContentHeader from 'components/ContentHeader';
@ -56,14 +55,17 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
return <div />; return <div />;
} }
return ( return (
<div className={styles.home}> <div className={`${styles.home} col-md-9`}>
<Helmet <Helmet
title="Home" title="Home"
meta={[ meta={[
{ name: 'description', content: 'Description of Home' }, { name: 'description', content: 'Description of Home' },
]} ]}
/> />
<FormattedMessage {...{id: this.props.home.configsDisplay.name}} /> <ContentHeader
name={this.props.home.configsDisplay.name}
description={this.props.home.configsDisplay.description}
/>
</div> </div>
); );
} }

View File

@ -1,6 +1,7 @@
.home { /* stylelint-disable */ .home { /* stylelint-disable */
background: rgba(14,22,34,0.02); background: rgba(14,22,34,0.02);
min-height: calc(100vh - 6rem); // TODO shoukd be variable min-height: calc(100vh - 6rem); // TODO shoukd be variable
padding: 0;
} }
.baseline { .baseline {
// display: none; // display: none;