terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Fix meta and styles on error page (#600)

Browse source 
* set meta tag for mobile on error page

* make error page center
This commit is contained in:
Naoyuki Kanezawa 2017-01-02 04:36:17 +09:00 committed by Guillermo Rauch
parent 64aa4454ac
commit 0854855197
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
pages/_error-debug.js
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import Head from 'next/head'
import ansiHTML from 'ansi-html' import ansiHTML from 'ansi-html'
export default class ErrorDebug extends React.Component { export default class ErrorDebug extends React.Component {
@ -11,6 +12,9 @@ export default class ErrorDebug extends React.Component {
const { name, message, stack, path } = this.props const { name, message, stack, path } = this.props
return <div className='errorDebug'> return <div className='errorDebug'>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
{path ? <div className='heading'>Error in {path}</div> : null} {path ? <div className='heading'>Error in {path}</div> : null}
{ {
name === 'ModuleBuildError' name === 'ModuleBuildError'

20
pages/_error.js
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import Head from 'next/head'
export default class Error extends React.Component { export default class Error extends React.Component {
static getInitialProps ({ res, xhr }) { static getInitialProps ({ res, xhr }) {
@ -13,24 +14,29 @@ export default class Error extends React.Component {
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred') : (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
return <div className='error'> return <div className='error'>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
<div> <div>
{statusCode ? <h1>{statusCode}</h1> : null} {statusCode ? <h1>{statusCode}</h1> : null}
<div className='desc'> <div className='desc'>
<h2>{title}.</h2> <h2>{title}.</h2>
</div> </div>
</div> </div>
<style jsx global>{`
body { margin: 0 }
`}</style>
<style jsx>{` <style jsx>{`
.error { .error {
color: #000; color: #000;
background: #fff; background: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif; font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
height: 100vh;
text-align: center; text-align: center;
padding-top: 20%; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.desc { .desc {
@ -46,7 +52,7 @@ export default class Error extends React.Component {
border-right: 1px solid rgba(0, 0, 0,.3); border-right: 1px solid rgba(0, 0, 0,.3);
margin: 0; margin: 0;
margin-right: 20px; margin-right: 20px;
padding: 10px 23px; padding: 10px 23px 10px 0;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
vertical-align: top; vertical-align: top;