Update posts style

This commit is contained in:
LordMathis 2018-06-14 16:48:56 +02:00
parent 188e38ad9d
commit 020f7123a6
6 changed files with 47 additions and 15 deletions

17
src/components/Navbar.js Normal file
View File

@ -0,0 +1,17 @@
import React, {Component} from 'react';
import config from '../utils/config.json';
import '../static/stylesheets/globals.scss';
import styles from './Navbar.scss';
export default class Navbar extends Component {
render () {
return (
<div className={styles.navbar}>
<a href='/'>
<h3>{config.name}</h3>
</a>
</div>
)
}
}

View File

@ -0,0 +1,12 @@
@import "../static/stylesheets/variables.scss";
.navbar {
background-color: $blue;
text-align: left;
padding: 2px;
}
h3 {
color: $white;
padding-left: 5px;
}

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Spinner} from '.'; import {Spinner, Header, Navbar} from '.';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import contentStyle from '../static/stylesheets/content.scss'; import contentStyle from '../static/stylesheets/content.scss';
import styles from './Post.scss'; import styles from './Post.scss';
@ -16,10 +16,10 @@ export default class Post extends Component {
} }
return ( return (
<div>
<Navbar />
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<a href={this.props.post.link}> <Header header={this.props.post.title} />
<h1>{this.props.post.title}</h1>
</a>
<div className={contentStyle.content}> <div className={contentStyle.content}>
<div className={styles.postDate}> <div className={styles.postDate}>
<h3>{this.props.post.published}</h3> <h3>{this.props.post.published}</h3>
@ -28,6 +28,7 @@ export default class Post extends Component {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }
} }

View File

@ -6,4 +6,5 @@ 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 Header } from './Header';
export { default as Wrapper } from './Wrapper'; export { default as Wrapper } from './Wrapper';
export { default as Navbar } from './Navbar';
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 {Post} from '../components'; import {Post, Wrapper} from '../components';
export default class PostContainer extends Component { export default class PostContainer extends Component {
constructor() { constructor() {
@ -15,7 +15,6 @@ export default class PostContainer extends Component {
const url = '/api/post/' + this.props.match.params.postname; const url = '/api/post/' + this.props.match.params.postname;
axios.get(url).then((res) => { axios.get(url).then((res) => {
console.log(res.data);
this.setState({ this.setState({
isLoading: false, isLoading: false,
post: res.data, post: res.data,
@ -25,8 +24,10 @@ export default class PostContainer extends Component {
render() { render() {
return ( return (
<Wrapper>
<Post isLoading={this.state.isLoading} <Post isLoading={this.state.isLoading}
post={this.state.post} /> post={this.state.post} />
</Wrapper>
); );
} }
} }

View File

@ -2,6 +2,6 @@ $font-header: 'Concert One', cursive;
$font-paragraph: 'Open Sans', sans-serif; $font-paragraph: 'Open Sans', sans-serif;
$white: #fdfdfd; $white: #fdfdfd;
$black: #2f2f2f; $black: #2f2f2f;
$blue: #0a6cf5; $blue: #144A98;
$break-medium: 768px; $break-medium: 768px;
$break-large: 1200px; $break-large: 1200px;