Change content styles and structure

This commit is contained in:
LordMathis 2018-06-14 15:38:21 +02:00
parent 1c4653a42a
commit 96ddc6ef72
9 changed files with 61 additions and 12 deletions

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Spinner} from '.'; import {Spinner, Header} from '.';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import styles from './About.scss'; import styles from './About.scss';
import contentStyle from '../static/stylesheets/content.scss'; import contentStyle from '../static/stylesheets/content.scss';
@ -17,7 +17,7 @@ export default class About extends Component {
return ( return (
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<h1>About</h1> <Header header={"About"} />
<div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}> <div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Spinner} from '.'; import {Spinner, Header} from '.';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import styles from './Blog.scss'; import styles from './Blog.scss';
import contentStyle from '../static/stylesheets/content.scss'; import contentStyle from '../static/stylesheets/content.scss';
@ -38,7 +38,7 @@ export default class Blog extends Component {
return ( return (
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<h1>Blog</h1> <Header header={"Blog"} />
<div className={contentStyle.content}> <div className={contentStyle.content}>
{posts} {posts}

14
src/components/Header.js Normal file
View File

@ -0,0 +1,14 @@
import React, {Component} from 'react';
import '../static/stylesheets/globals.scss';
import styles from './Header.scss';
export default class Header extends Component {
render () {
return (
<div className={styles.mainHeader}>
<h1>{this.props.header}</h1>
</div>
)
}
}

View File

@ -0,0 +1,11 @@
@import "../static/stylesheets/variables.scss";
.mainHeader {
border-left: 5px solid $blue;
padding: 5px;
margin: 0;
text-align: left;
h1 {
margin: 0;
}
}

15
src/components/Wrapper.js Normal file
View File

@ -0,0 +1,15 @@
import React, {Component} from 'react';
import {Spinner, Header} from '.';
import '../static/stylesheets/globals.scss';
import styles from './Wrapper.scss';
export default class Wrapper extends Component {
render () {
return (
<div className={styles.centerContent}>
{this.props.children}
</div>
)
}
}

View File

@ -0,0 +1,5 @@
@import "../static/stylesheets/variables.scss";
.centerContent {
text-align: center;
}

View File

@ -4,4 +4,6 @@ export { default as About } from './About';
export { default as Post } from './Post'; export { default as Post } from './Post';
export { default as NotFoundPage } from './NotFoundPage'; export { default as NotFoundPage } from './NotFoundPage';
export { default as Spinner } from './Spinner'; export { default as Spinner } from './Spinner';
export { default as Header } from './Header';
export { default as Wrapper } from './Wrapper';
export { default as App } from './App'; export { default as App } from './App';

View File

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import axios from 'axios'; import axios from 'axios';
import {About, Blog, Home} from '../components'; import {About, Blog, Home, Wrapper} from '../components';
export default class BlogContainer extends Component { export default class BlogContainer extends Component {
@ -33,10 +33,12 @@ export default class BlogContainer extends Component {
return ( return (
<div> <div>
<Home/> <Home/>
<About isLoading={this.state.isLoadingAbout} <Wrapper>
about={this.state.about}/> <About isLoading={this.state.isLoadingAbout}
<Blog isLoading={this.state.isLoadingBlog} about={this.state.about}/>
posts={this.state.posts}/> <Blog isLoading={this.state.isLoadingBlog}
posts={this.state.posts}/>
</Wrapper>
</div> </div>
) )
} }

View File

@ -1,11 +1,10 @@
@import "./variables.scss"; @import "./variables.scss";
.contentWrapper { .contentWrapper {
display: inline-block;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
h1 { max-width: 960px;
text-align: center;
}
a { a {
color: $blue; color: $blue;
} }
@ -13,4 +12,5 @@
.content { .content {
box-sizing: border-box; box-sizing: border-box;
text-align: left;
} }