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

fix

Browse source
This commit is contained in:
Fil Cesana 2020-03-24 17:37:05 +01:00
parent b00f803670
commit 733d2ee44f
2 changed files with 93 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
smart-hut/src/components/HeaderController.js
View file

@ -5,14 +5,11 @@ import {
BrowserView, BrowserView,
MobileView, MobileView,
isBrowser, isBrowser,
isMobile isMobile,
} from "react-device-detect"; } from "react-device-detect";
const AvatarImage = () => ( const AvatarImage = () => (
<Image <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
src="avatar3.png"
style={{ width: "25px", height: "auto" }}
centered />
); );
const IconHomeImage = () => ( const IconHomeImage = () => (
@ -35,15 +32,9 @@ const IconHomeImageMobile = () => (
/> />
); );
const TitleImage = () => ( const TitleImage = () => <Image src="title7.png" size="medium" centered />;
<Image
src="title7.png"
size="medium"
centered
/>
);
const BrowserStructure = (props) => ( const BrowserStructure = (props) => (
<Grid columns="equal" divided inverted padded> <Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center"> <Grid.Row color="black" textAlign="center">
<Grid.Column width={3} height={0.5}> <Grid.Column width={3} height={0.5}>
@ -76,10 +67,10 @@ const BrowserStructure = (props) => (
</Dropdown> </Dropdown>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
); );
const MobileStructure = (props) => ( const MobileStructure = (props) => (
<Grid columns="equal" divided inverted padded> <Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center"> <Grid.Row color="black" textAlign="center">
<Segment color="black" inverted> <Segment color="black" inverted>
@ -90,36 +81,29 @@ const MobileStructure = (props) => (
<Grid.Column> <Grid.Column>
<IconHomeImage /> <IconHomeImage />
</Grid.Column> </Grid.Column>
<Grid.Column > <Grid.Column>
<AvatarImage /> <AvatarImage />
<Divider /> <Divider />
<Dropdown item icon="setting" size="huge"> <Dropdown item icon="setting" size="huge">
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item> <Dropdown.Item>
<Icon name="dropdown" /> <Icon name="dropdown" />
<span className="text">Settings</span> <span className="text">Settings</span>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item>Document</Dropdown.Item> <Dropdown.Item>Document</Dropdown.Item>
<Dropdown.Item>Image</Dropdown.Item> <Dropdown.Item>Image</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item>See profile...</Dropdown.Item> <Dropdown.Item>See profile...</Dropdown.Item>
<Dropdown.Divider /> <Dropdown.Divider />
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item> <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
); );
export default class MyHeader extends React.Component { export default class MyHeader extends React.Component {
render() { render() {
return ( return (

136
smart-hut/src/views/ConfirmResetPassword.js
View file

@ -3,80 +3,78 @@ import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react"; import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component { class Paragraph extends Component {
state = { visible: true }; state = { visible: true };
handleDismiss = () => { handleDismiss = () => {
this.setState({ visible: false }); this.setState({ visible: false });
setTimeout(() => { setTimeout(() => {
this.setState({ visible: true }); this.setState({ visible: true });
}, 2000); }, 2000);
}; };
render() { render() {
if (this.state.visible) { if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header="Congratulation!"
content="Your password has been succesffuly reset"
/>
);
}
return ( return (
<p> <Message onDismiss={this.handleDismiss}>
<br /> <Message.Header>
<i>The message will return in 2s</i> Congratulation<ins>s</ins>!
<br /> </Message.Header>
<br /> Your password has been <del>succesffuly</del>
</p> <ins>successfully</ins> reset
</Message>
); );
} }
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
} }
}
const MessageReg = () => (
<Grid> const MessageReg = () => (
<HomeNavbar /> <Grid>
<Divider /> <HomeNavbar />
<Grid.Row height={3}></Grid.Row> <Divider />
<Grid.Row height={3}></Grid.Row> <Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row> <Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}> <Grid.Row height={3}></Grid.Row>
<Grid.Column width={6}></Grid.Column> <Grid.Row height={3}>
<Grid.Column width={10}> <Grid.Column width={6}></Grid.Column>
<Image src="title5.png" /> <Grid.Column width={10}>
</Grid.Column> <Image src="title5.png" />
<Grid.Column width={3}></Grid.Column> </Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column> <Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}> </Grid.Row>
<Image src="./img/logo.png" /> <Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={6}> <Grid.Column width={3}></Grid.Column>
<Paragraph /> </Grid.Row>
</Grid.Column> </Grid>
<Grid.Column width={4}></Grid.Column> );
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmResetPassword extends Component { export default class ConfirmResetPassword extends Component {
render() { render() {
return <MessageReg/>; return <MessageReg />;
} }
} }