commit 01a3b4859e33d79cd1e737025087af1fbefa8424
parent f2340bb430c354c89a58f47401d2f316cfb77597
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Wed, 6 Apr 2016 22:19:27 +0300
Merge branch 'master' of https://github.com/manugill/react-starter-kit into manugill-master
Diffstat:
7 files changed, 38 insertions(+), 141 deletions(-)
diff --git a/src/components/ErrorPage/ErrorPage.js b/src/components/ErrorPage/ErrorPage.js
@@ -11,7 +11,8 @@ import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ErrorPage.scss';
-const title = 'Error';
+let title = 'Error';
+let content = 'Sorry, a critical error occurred on this page.';
class ErrorPage extends Component {
@@ -25,10 +26,17 @@ class ErrorPage extends Component {
}
render() {
+ console.log(this.props);
+ if (this.props.statusCode !== undefined)
+ if (this.props.statusCode === 404) {
+ title = 'Page Not Found';
+ content = 'Sorry, the page you were trying to view does not exist.';
+ }
+
return (
<div>
<h1>{title}</h1>
- <p>Sorry, an critical error occurred on this page.</p>
+ <p>{content}</p>
</div>
);
}
diff --git a/src/components/ErrorPage/ErrorPage.scss b/src/components/ErrorPage/ErrorPage.scss
@@ -8,8 +8,9 @@
*/
* {
+ padding: 0;
margin: 0;
- line-height: 1.2;
+ line-height: 1.4;
}
html {
@@ -17,38 +18,34 @@ html {
width: 100%;
height: 100%;
color: #888;
+ font-size: 16px;
text-align: center;
font-family: sans-serif;
}
-
body {
display: table-cell;
- margin: 2em auto;
+ padding: 0.625rem;
vertical-align: middle;
}
h1 {
color: #555;
font-weight: 400;
- font-size: 2em;
+ font-size: 2rem;
+ line-height: 1.2;
+ margin-bottom: 1rem;
}
-
p {
margin: 0 auto;
- width: 280px;
+ max-width: 280px;
+}
+pre {
+ text-align: left;
+ margin-top: 2rem;
}
@media only screen and (max-width: 280px) {
-
- body,
- p {
- width: 95%;
- }
-
h1 {
- font-size: 1.5em;
- margin: 0 0 0.3em;
-
+ font-size: 1.5rem;
}
-
}
diff --git a/src/components/NotFoundPage/NotFoundPage.js b/src/components/NotFoundPage/NotFoundPage.js
@@ -1,39 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-import React, { Component, PropTypes } from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './NotFoundPage.scss';
-
-const title = 'Page Not Found';
-
-class NotFoundPage extends Component {
-
- static contextTypes = {
- onSetTitle: PropTypes.func.isRequired,
- onPageNotFound: PropTypes.func.isRequired,
- };
-
- componentWillMount() {
- this.context.onSetTitle(title);
- this.context.onPageNotFound();
- }
-
- render() {
- return (
- <div>
- <h1>{title}</h1>
- <p>Sorry, but the page you were trying to view does not exist.</p>
- </div>
- );
- }
-
-}
-
-export default withStyles(NotFoundPage, s);
diff --git a/src/components/NotFoundPage/NotFoundPage.scss b/src/components/NotFoundPage/NotFoundPage.scss
@@ -1,53 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-* {
- margin: 0;
- line-height: 1.2;
-}
-
-html {
- display: table;
- width: 100%;
- height: 100%;
- color: #888;
- text-align: center;
- font-family: sans-serif;
-}
-
-body {
- display: table-cell;
- margin: 2em auto;
- vertical-align: middle;
-}
-
-h1 {
- color: #555;
- font-weight: 400;
- font-size: 2em;
-}
-
-p {
- margin: 0 auto;
- width: 280px;
-}
-
-@media only screen and (max-width: 280px) {
-
- body,
- p {
- width: 95%;
- }
-
- h1 {
- font-size: 1.5em;
- margin: 0 0 0.3em;
- }
-
-}
diff --git a/src/components/NotFoundPage/package.json b/src/components/NotFoundPage/package.json
@@ -1,6 +0,0 @@
-{
- "name": "NotFoundPage",
- "version": "0.0.0",
- "private": true,
- "main": "./NotFoundPage.js"
-}
diff --git a/src/routes.js b/src/routes.js
@@ -12,7 +12,6 @@ import Router from 'react-routing/src/Router';
import fetch from './core/fetch';
import App from './components/App';
import ContentPage from './components/ContentPage';
-import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';
const routes = [
@@ -39,9 +38,8 @@ const router = new Router(on => {
return data && data.content && <ContentPage {...data.content} />;
});
- on('error', (state, error) => state.statusCode === 404 ?
- <App context={state.context} error={error}><NotFoundPage /></App> :
- <App context={state.context} error={error}><ErrorPage /></App>
+ on('error', (state, error) =>
+ <App context={state.context} error={error}><ErrorPage statusCode={state.statusCode} /></App>
);
});
diff --git a/src/views/error.jade b/src/views/error.jade
@@ -5,55 +5,47 @@ html(lang="en")
title Internal Server Error
meta(name="viewport", content="width=device-width, initial-scale=1")
style.
-
* {
- line-height: 1.2;
+ padding: 0;
margin: 0;
+ line-height: 1.4;
}
html {
- color: #888;
display: table;
- font-family: sans-serif;
+ width: 100%;
height: 100%;
+ color: #888;
+ font-size: 16px;
text-align: center;
- width: 100%;
+ font-family: sans-serif;
}
-
body {
display: table-cell;
+ padding: 0.625rem;
vertical-align: middle;
- margin: 2em auto;
}
h1 {
color: #555;
- font-size: 2em;
font-weight: 400;
+ font-size: 2rem;
+ line-height: 1.2;
+ margin-bottom: 1rem;
}
-
p {
margin: 0 auto;
- width: 280px;
+ max-width: 280px;
}
-
pre {
text-align: left;
- max-width: 1000px;
- margin: 0 auto;
+ margin-top: 2rem;
}
@media only screen and (max-width: 280px) {
-
- body, p {
- width: 95%;
- }
-
h1 {
- font-size: 1.5em;
- margin: 0 0 0.3em;
+ font-size: 1.5rem;
}
-
}
body
