Merge branch 'dev' into '37-nav-resp'
# Conflicts: # smart-hut/src/views/Navbar.js
This commit is contained in:
commit
4f4e54e065
2 changed files with 97 additions and 21 deletions
|
@ -1,35 +1,110 @@
|
|||
import React, {Component} from 'react';
|
||||
import { Header, Grid, Message, Button} from 'semantic-ui-react';
|
||||
import { Header, Grid, Message, Button, Segment, Responsive, Image} from 'semantic-ui-react';
|
||||
import {Link } from "react-router-dom";
|
||||
import MyHeader from '../components/HeaderController'
|
||||
|
||||
|
||||
export default class FourOhFour extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const meme = ['1.jpeg', '2.jpeg', '3.png', '4.jpeg', '5.jpeg', '6.jpg', '7.jpg',
|
||||
'8.jpg', '9.jpeg', '10.jpg', '11.jpeg', '12.gif', '13.gif', '14.gif'];
|
||||
var arrayNum = Math.floor(Math.random() * 13) + 1;
|
||||
var path = 'img/room_404_meme/' + meme[arrayNum];
|
||||
this.state = {meme : path};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||
<Grid centered>
|
||||
<Grid.Row>
|
||||
<Header as='h1'>404</Header>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={10}>
|
||||
<Message>
|
||||
<Message.Header>404 Page Not Found</Message.Header>
|
||||
<Segment.Group>
|
||||
<Responsive as={Segment} minWidth={768}>
|
||||
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||
<Grid >
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column>
|
||||
<MyHeader logout={this.props.logout} />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column width={16}>
|
||||
<Segment inverted color='red'>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column textAlign='center'>
|
||||
<h1>404 Page Not Found</h1>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={8}>
|
||||
<Image centered src={this.state.meme} size='medium' />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={8}>
|
||||
<p>
|
||||
Hey what are you doing here?
|
||||
Looks like you are lost, this room does not exist.
|
||||
Hey what are you doing here?
|
||||
Looks like you are lost, this room does not exist. Maybe you were looking for
|
||||
the kitchen, or the garage, or the bedroom, or your love room... so don't
|
||||
wait here and let's go back to our main room! ...or refresh this page
|
||||
some times...
|
||||
</p>
|
||||
</Message>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={6}>
|
||||
<Button >
|
||||
<Link to="/">Go back to our main room</Link>
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Button fluid inverted color='white'>
|
||||
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</div>
|
||||
</Responsive>
|
||||
|
||||
<Responsive as={Segment} maxWidth={768}>
|
||||
<div style={{background: '#1b1c1d'}}>
|
||||
<Grid >
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column>
|
||||
<MyHeader logout={this.props.logout} />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color='black'>
|
||||
<Grid.Column width={16}>
|
||||
<Segment inverted color='red'>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column textAlign='center'>
|
||||
<h1>404 Page Not Found</h1>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={16}>
|
||||
<Image centered src={this.state.meme} size='medium' />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={16}>
|
||||
<p>
|
||||
Hey what are you doing here?
|
||||
Looks like you are lost, this room does not exist. Maybe you were looking for
|
||||
the kitchen, or the garage, or the bedroom, or your love room... so don't
|
||||
wait here and let's go back to our main room! ...or refresh this page
|
||||
some times...
|
||||
</p>
|
||||
<Button fluid inverted color='white'>
|
||||
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</div>
|
||||
</Responsive>
|
||||
</Segment.Group>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -180,6 +180,7 @@ class Navbar extends Component {
|
|||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
|
||||
</Segment.Group>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue