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 (
<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"/>
<div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
<div dangerouslySetInnerHTML={{ __html: result }} role="article">
</div>
</div>
)

View File

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

View File

@ -37,13 +37,11 @@ export default class Blog extends Component {
</div>
)
const classes = `${contentStyle.contentWrapper} ${styles.blog}`
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"/>
<div className={`${contentStyle.content} ${styles.postsList}`} role="list">
<div className={`${styles.postsList}`} role="list">
{postsHTML}
</div>

View File

@ -24,7 +24,3 @@
.postListItem {
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 React, { Component } from 'react'
import '../stylesheets/globals.scss'
import contentStyle from '../stylesheets/content.scss'
import styles from './Wrapper.scss'
export default class Wrapper extends Component {
@ -18,7 +19,7 @@ export default class Wrapper extends Component {
render () {
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}
</div>
)

View File

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

View File

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

View File

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