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

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

@ -1,35 +1,110 @@
import React, {Component} from 'react'; 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 {Link } from "react-router-dom";
import MyHeader from '../components/HeaderController'
export default class FourOhFour extends Component { 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() { render() {
return ( return (
<div style={{height : "110vh", background: '#1b1c1d'}}> <Segment.Group>
<Grid centered> <Responsive as={Segment} minWidth={768}>
<Grid.Row> <div style={{height : "110vh", background: '#1b1c1d'}}>
<Header as='h1'>404</Header> <Grid >
</Grid.Row> <Grid.Row color='black'>
<Grid.Row> <Grid.Column>
<Grid.Column width={10}> <MyHeader logout={this.props.logout} />
<Message> </Grid.Column>
<Message.Header>404 Page Not Found</Message.Header> </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> <p>
Hey what are you doing here? 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> </p>
</Message> <Button fluid inverted color='white'>
</Grid.Column> <Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
<Grid.Column width={6}> </Button>
<Button > </Grid.Column>
<Link to="/">Go back to our main room</Link> </Grid.Row>
</Button> </Grid>
</Grid.Column> </Segment>
</Grid.Row> </Grid.Column>
</Grid.Row>
</Grid> </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> </div>
</Responsive>
</Segment.Group>
) )
} }
} }

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

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