Merge branch 'header-controller-mobile' into 'dev'
mobile version of the header controller now working, I installed 'yarn add... See merge request sa4-2020/the-sanmarinoes/frontend!56
This commit is contained in:
commit
e1b90dab16
3 changed files with 85 additions and 110 deletions
|
@ -15,6 +15,7 @@
|
||||||
"react-axios": "^2.0.3",
|
"react-axios": "^2.0.3",
|
||||||
"react-circular-input": "^0.1.6",
|
"react-circular-input": "^0.1.6",
|
||||||
"react-circular-slider-svg": "^0.1.5",
|
"react-circular-slider-svg": "^0.1.5",
|
||||||
|
"react-device-detect": "^1.11.14",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
"react-round-slider": "^1.0.1",
|
"react-round-slider": "^1.0.1",
|
||||||
"react-router": "^5.1.2",
|
"react-router": "^5.1.2",
|
||||||
|
|
|
@ -1,9 +1,18 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
|
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
|
||||||
import { Segment, Image } from "semantic-ui-react";
|
import { Segment, Image } from "semantic-ui-react";
|
||||||
|
import {
|
||||||
|
BrowserView,
|
||||||
|
MobileView,
|
||||||
|
isBrowser,
|
||||||
|
isMobile
|
||||||
|
} from "react-device-detect";
|
||||||
|
|
||||||
const AvatarImage = () => (
|
const AvatarImage = () => (
|
||||||
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
|
<Image
|
||||||
|
src="avatar3.png"
|
||||||
|
style={{ width: "25px", height: "auto" }}
|
||||||
|
centered />
|
||||||
);
|
);
|
||||||
|
|
||||||
const IconHomeImage = () => (
|
const IconHomeImage = () => (
|
||||||
|
@ -16,9 +25,25 @@ const IconHomeImage = () => (
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const TitleImage = () => <Image src="title7.png" size="medium" centered />;
|
const IconHomeImageMobile = () => (
|
||||||
|
<Image
|
||||||
|
src="smart-home.png"
|
||||||
|
style={{ width: "10px", height: "auto" }}
|
||||||
|
centered
|
||||||
|
as="a"
|
||||||
|
href="/"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
const GridExampleInverted = (props) => (
|
const TitleImage = () => (
|
||||||
|
<Image
|
||||||
|
src="title7.png"
|
||||||
|
size="medium"
|
||||||
|
centered
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
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}>
|
||||||
|
@ -54,116 +79,58 @@ const GridExampleInverted = (props) => (
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const MobileStructure = (props) => (
|
||||||
|
<Grid columns="equal" divided inverted padded>
|
||||||
|
<Grid.Row color="black" textAlign="center">
|
||||||
|
<Segment color="black" inverted>
|
||||||
|
<TitleImage />
|
||||||
|
</Segment>
|
||||||
|
</Grid.Row>
|
||||||
|
<Grid.Row color="black" textAlign="center">
|
||||||
|
<Grid.Column>
|
||||||
|
<IconHomeImage />
|
||||||
|
</Grid.Column>
|
||||||
|
<Grid.Column >
|
||||||
|
<AvatarImage />
|
||||||
|
<Divider />
|
||||||
|
<Dropdown item icon="setting" size="huge">
|
||||||
|
<Dropdown.Menu>
|
||||||
|
<Dropdown.Item>
|
||||||
|
<Icon name="dropdown" />
|
||||||
|
<span className="text">Settings</span>
|
||||||
|
<Dropdown.Menu>
|
||||||
|
<Dropdown.Item>Document</Dropdown.Item>
|
||||||
|
<Dropdown.Item>Image</Dropdown.Item>
|
||||||
|
</Dropdown.Menu>
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item>See profile...</Dropdown.Item>
|
||||||
|
<Dropdown.Divider />
|
||||||
|
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
|
||||||
|
</Dropdown.Menu>
|
||||||
|
</Dropdown>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid.Row>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default class MyHeader extends React.Component {
|
export default class MyHeader extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<GridExampleInverted logout={this.props.logout} />
|
<BrowserView>
|
||||||
|
<BrowserStructure logout={this.props.logout} />
|
||||||
|
</BrowserView>
|
||||||
|
<MobileView>
|
||||||
|
<MobileStructure />
|
||||||
|
</MobileView>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// const navbar = {
|
|
||||||
// backgroundColor: "#20222b",
|
|
||||||
// color: "white",
|
|
||||||
// marginBottom: "4.6rem",
|
|
||||||
// padding: "3.2rem 0"
|
|
||||||
// };
|
|
||||||
// const navbar__buttons = {
|
|
||||||
// borderBottom: "1px solid lighten($light-blue, 10%)",
|
|
||||||
// display: "flex",
|
|
||||||
// justifyContent: "space-between",
|
|
||||||
// padding: "3.2rem 1.6rem"
|
|
||||||
// }
|
|
||||||
// const button = {
|
|
||||||
// background: "#8357c5",
|
|
||||||
// border: "none",
|
|
||||||
// borderBottom: "1px solid purple",
|
|
||||||
// color: "white",
|
|
||||||
// fontWeight: "500",
|
|
||||||
// padding: "1.2rem"
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const MenuExampleButtons = () => (
|
|
||||||
// <Menu>
|
|
||||||
// <Menu.Item>
|
|
||||||
// <Button primary>Sign up</Button>
|
|
||||||
// </Menu.Item>
|
|
||||||
|
|
||||||
// <Menu.Item>
|
|
||||||
// <Button>Log-in</Button>
|
|
||||||
// </Menu.Item>
|
|
||||||
// <Menu.Item>
|
|
||||||
// <Button>Log-in</Button>
|
|
||||||
// </Menu.Item>
|
|
||||||
// <Menu.Item>
|
|
||||||
// <Button>Log-in</Button>
|
|
||||||
// </Menu.Item>
|
|
||||||
// </Menu>
|
|
||||||
// )
|
|
||||||
|
|
||||||
// class MenuExampleInvertedSegment extends Component {
|
|
||||||
// state = { activeItem: 'home' }
|
|
||||||
|
|
||||||
// handleItemClick = (e, { name }) => this.setState({ activeItem: name })
|
|
||||||
|
|
||||||
// render() {
|
|
||||||
// const { activeItem } = this.state
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <Segment inverted>
|
|
||||||
// <Menu inverted secondary>
|
|
||||||
// <Menu.Item
|
|
||||||
// name='home'
|
|
||||||
// active={activeItem === 'home'}
|
|
||||||
// onClick={this.handleItemClick}
|
|
||||||
// />
|
|
||||||
// <Menu.Item
|
|
||||||
// name='messages'
|
|
||||||
// active={activeItem === 'messages'}
|
|
||||||
// onClick={this.handleItemClick}
|
|
||||||
// />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <HeaderExampleIconProp />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item />
|
|
||||||
// <Menu.Item
|
|
||||||
// name='messages'
|
|
||||||
// active={activeItem === 'messages'}
|
|
||||||
// onClick={this.handleItemClick}
|
|
||||||
// />
|
|
||||||
// <Dropdown item icon='wrench' simple>
|
|
||||||
// <Dropdown.Menu>
|
|
||||||
// <Dropdown.Item>
|
|
||||||
// <Icon name='dropdown' />
|
|
||||||
// <span className='text'>New</span>
|
|
||||||
|
|
||||||
// <Dropdown.Menu>
|
|
||||||
// <Dropdown.Item>Document</Dropdown.Item>
|
|
||||||
// <Dropdown.Item>Image</Dropdown.Item>
|
|
||||||
// </Dropdown.Menu>
|
|
||||||
// </Dropdown.Item>
|
|
||||||
// <Dropdown.Item>Open</Dropdown.Item>
|
|
||||||
// <Dropdown.Item>Save...</Dropdown.Item>
|
|
||||||
// <Dropdown.Item>Edit Permissions</Dropdown.Item>
|
|
||||||
// <Dropdown.Divider />
|
|
||||||
// <Dropdown.Header>Export</Dropdown.Header>
|
|
||||||
// <Dropdown.Item>Share</Dropdown.Item>
|
|
||||||
// </Dropdown.Menu>
|
|
||||||
// </Dropdown>
|
|
||||||
// <ImageExampleWrapped />
|
|
||||||
// <Menu.Item />
|
|
||||||
// </Menu>
|
|
||||||
// </Segment>
|
|
||||||
// )
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
|
@ -8715,6 +8715,13 @@ react-dev-utils@^10.2.0:
|
||||||
strip-ansi "6.0.0"
|
strip-ansi "6.0.0"
|
||||||
text-table "0.2.0"
|
text-table "0.2.0"
|
||||||
|
|
||||||
|
react-device-detect@^1.11.14:
|
||||||
|
version "1.11.14"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.11.14.tgz#02ba2398e2ce81fb0eaed3e62a9ad713ab3870a7"
|
||||||
|
integrity sha512-WSjch241xI+rXHVtJaSYxNUT2WAykzfJgMI2Hg9xjNNTlIZdJu/fmWf4iedNH7qzFq+JaJ6fDJu3mrKFLerKBw==
|
||||||
|
dependencies:
|
||||||
|
ua-parser-js "^0.7.20"
|
||||||
|
|
||||||
react-dom@^16.12.0:
|
react-dom@^16.12.0:
|
||||||
version "16.12.0"
|
version "16.12.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
|
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
|
||||||
|
@ -10368,7 +10375,7 @@ typedarray@^0.0.6:
|
||||||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||||
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
||||||
|
|
||||||
ua-parser-js@^0.7.18:
|
ua-parser-js@^0.7.18, ua-parser-js@^0.7.20:
|
||||||
version "0.7.21"
|
version "0.7.21"
|
||||||
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
|
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
|
||||||
integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
|
integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
|
||||||
|
|
Loading…
Reference in a new issue