Restructure home page into column components

This commit is contained in:
LordMathis 2019-11-07 23:04:06 +01:00
parent 3a74bfcff6
commit 7a9370eafa
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
10 changed files with 58 additions and 26 deletions

View File

@ -24,12 +24,10 @@ export default class About extends Component {
) )
} }
const classes = `${contentStyle.contentWrapper} ${style.about}`
return ( return (
<div className={`${contentStyle.contentWrapper} ${style.about}`} role="region" aria-label="About me"> <div className={contentStyle.content} role="region" aria-label="About me">
<Header header={'About Me'} role="heading" aria-level="2"/> <Header header={'About Me'} role="heading" aria-level="2"/>
<div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }} role="article"> <div dangerouslySetInnerHTML={{ __html: result }} role="article">
</div> </div>
</div> </div>
) )

View File

@ -1,5 +1 @@
@import "../stylesheets/variables.scss"; @import "../stylesheets/variables.scss";
.about {
flex: 30%;
}

View File

@ -37,13 +37,11 @@ export default class Blog extends Component {
</div> </div>
) )
const classes = `${contentStyle.contentWrapper} ${styles.blog}`
return ( return (
<div className={classes} id="blog" role="region" aria-label="Blog posts"> <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
<Header header={'Blog'} role="heading" aria-level="2"/> <Header header={'Blog'} role="heading" aria-level="2"/>
<div className={`${contentStyle.content} ${styles.postsList}`} role="list"> <div className={`${styles.postsList}`} role="list">
{postsHTML} {postsHTML}
</div> </div>

View File

@ -24,7 +24,3 @@
.postListItem { .postListItem {
border-bottom: 5px solid $body; border-bottom: 5px solid $body;
} }
.blog {
flex: 70%;
}

26
src/components/Column.js Normal file
View File

@ -0,0 +1,26 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import '../stylesheets/globals.scss'
import styles from './Column.scss'
export default class Column extends Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired,
left: PropTypes.bool
}
static defaultProps = {
left: true
}
render () {
return (
<div className={`${styles.column} ${this.props.left ? styles.left : styles.right}`}>
{this.props.children}
</div>
)
}
}

View File

@ -0,0 +1,14 @@
@import "../stylesheets/variables.scss";
.left {
flex: 30%;
}
.right {
flex: 70%;
}
.column {
box-sizing: border-box;
margin: 20px;
}

View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import '../stylesheets/globals.scss' import '../stylesheets/globals.scss'
import contentStyle from '../stylesheets/content.scss'
import styles from './Wrapper.scss' import styles from './Wrapper.scss'
export default class Wrapper extends Component { export default class Wrapper extends Component {
@ -18,7 +19,7 @@ export default class Wrapper extends Component {
render () { render () {
return ( return (
<div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'> <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
{this.props.children} {this.props.children}
</div> </div>
) )

View File

@ -10,3 +10,4 @@ export { default as Wrapper } from './Wrapper'
export { default as Navbar } from './Navbar' export { default as Navbar } from './Navbar'
export { default as App } from './App' export { default as App } from './App'
export { default as SocialLinks } from './SocialLinks' export { default as SocialLinks } from './SocialLinks'
export { default as Column } from './Column'

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { About, Blog, Home, Wrapper } from '../components' import { About, Blog, Home, Wrapper, Column } from '../components'
export default class MainContainer extends Component { export default class MainContainer extends Component {
static propTypes = { static propTypes = {
@ -33,10 +33,14 @@ export default class MainContainer extends Component {
<div> <div>
<Home config={this.state.config} /> <Home config={this.state.config} />
<Wrapper flex={true}> <Wrapper flex={true}>
<Column>
<About isLoading={this.state.isLoadingAbout} <About isLoading={this.state.isLoadingAbout}
about={this.state.about}/> about={this.state.about}/>
</Column>
<Column left={false}>
<Blog isLoading={this.state.isLoadingBlog} <Blog isLoading={this.state.isLoadingBlog}
posts={this.state.posts}/> posts={this.state.posts}/>
</Column>
</Wrapper> </Wrapper>
</div> </div>
) )

View File

@ -3,19 +3,17 @@
.contentWrapper { .contentWrapper {
display: inline-block; display: inline-block;
overflow: auto; overflow: auto;
box-sizing: border-box;
padding: 20px;
margin: 20px;
a { a {
color: $blue; color: $blue;
} }
@media (min-width: $break-large) { @media (min-width: $break-large) {
width: 960px; width: 960px;
} }
background-color: $white;
} }
.content { .content {
box-sizing: border-box; box-sizing: border-box;
background-color: $white;
padding: 20px;
text-align: left; text-align: left;
} }