smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'dev' into '37-nav-resp'

Browse source 
# Conflicts:
#   smart-hut/src/views/Navbar.js
This commit is contained in:
Claudio Maggioni 2020-03-21 14:55:44 +01:00
commit 4f4e54e065
2 changed files with 97 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
smart-hut/src/views/FourOhFour.js
View file

@ -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 (
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<div style={{height : "110vh", background: '#1b1c1d'}}>
<Grid centered>
<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>
<Header as='h1'>404</Header>
<Grid.Column textAlign='center'>
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={10}>
<Message>
<Message.Header>404 Page Not Found</Message.Header>
<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.
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 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>
)
}
}

1
smart-hut/src/views/Navbar.js
View file

@ -180,6 +180,7 @@ class Navbar extends Component {
</Grid.Row>
</Grid>
</Responsive>
</Segment.Group>
</div>
);