244 lines
8.7 KiB
JavaScript
244 lines
8.7 KiB
JavaScript
import React, { Component } from 'react'
|
|
//import "./AdminUI.sass"
|
|
import { Link, NavLink } from 'react-router-dom'
|
|
import styled, { createGlobalStyle, withTheme } from 'styled-components';
|
|
import {SearchBox} from '../components';
|
|
|
|
|
|
export class AdminUI extends Component {
|
|
render() {
|
|
const GlobalStyle = createGlobalStyle`
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
html, body{
|
|
margin: 0;
|
|
}
|
|
#root{
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto 1fr 2em;
|
|
grid-template-areas: "header header header" " menu main ." "footer footer footer";
|
|
//background: $color2
|
|
overflow: auto;
|
|
}
|
|
`;
|
|
const Header = styled.header`
|
|
position: relative;
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 3;
|
|
grid-area: header;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
min-height: auto;
|
|
padding: .5em;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background: ${this.props.theme.colours.color1};
|
|
color: ${this.props.theme.colours.color7};
|
|
h1 {
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&::after {
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
background: ${this.props.theme.colours.color3};
|
|
height: .2em;
|
|
z-index: 1;
|
|
}
|
|
nav{
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 1;
|
|
ul{
|
|
list-style: none;
|
|
padding: 0;
|
|
li{
|
|
display: inline;
|
|
a{
|
|
text-decoration: none;
|
|
color: ${this.props.theme.colours.color6};
|
|
padding: .5em;
|
|
white-space: nowrap;
|
|
&:hover{
|
|
color: ${this.props.theme.colours.color3};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const Menu = styled.menu`
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
grid-area: menu;
|
|
margin: 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
min-height: 100;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background: ${this.props.theme.colours.color1};
|
|
padding: .5em 0;
|
|
overflow: visible;
|
|
h3{
|
|
margin: 0;
|
|
color: #ddd9ebbf;
|
|
-webkit-text-decoration: bold;
|
|
text-decoration: bold;
|
|
}
|
|
ul{
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: .4em 0;
|
|
a{
|
|
position: relative;
|
|
display: block;
|
|
text-decoration: none;
|
|
margin-left: .4em;
|
|
color: ${this.props.theme.colours.color6};
|
|
padding: .3em .5em;
|
|
font-size: 1.05em;
|
|
-webkit-transition: ease all 500ms;
|
|
transition: ease all 500ms;
|
|
&::after{
|
|
-webkit-transition: ease all 500ms;
|
|
transition: ease all 500ms;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 100%;
|
|
width: 0em;
|
|
content: '';
|
|
background: ${this.props.theme.colours.color6};
|
|
}
|
|
&:hover{
|
|
background: ${this.props.theme.colours.color3};
|
|
&::after{
|
|
width: 0.4em;
|
|
}
|
|
}
|
|
&.menu__active{
|
|
color: ${this.props.theme.colours.color3};
|
|
&::after{
|
|
width: 0.4em;
|
|
background: ${this.props.theme.colours.color2};
|
|
}
|
|
&:hover {
|
|
color: ${this.props.theme.colours.color10};
|
|
&::after {
|
|
width: 0.4em;
|
|
background: ${this.props.theme.colours.color6};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const Footer = styled.footer`
|
|
position: relative;
|
|
grid-area: footer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: ${this.props.theme.colours.color10};
|
|
text-shadow: 0 0 .3em ${this.props.theme.colours.color2};
|
|
text-transform: uppercase;
|
|
background: ${this.props.theme.colours.color2};
|
|
&::after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 2em;
|
|
opacity: 0.5;
|
|
background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color6} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
|
|
content: '';
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 100%;
|
|
height: .2em;
|
|
opacity: 0.5;
|
|
content: '';
|
|
background: linear-gradient(${this.props.theme.colours.color2}, ${this.props.theme.colours.color3});
|
|
}
|
|
`;
|
|
const Main = styled.div`
|
|
position: relative;
|
|
grid-area: main;
|
|
display: flex;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
padding: 1em;
|
|
background: ${this.props.theme.colours.color2};
|
|
`;
|
|
return (
|
|
<>
|
|
<GlobalStyle />
|
|
<Header>
|
|
<h1>Doorlock Systems</h1>
|
|
<SearchBox />
|
|
<nav>
|
|
<ul>
|
|
<li><Link to="/user_cp">User Settings</Link></li>
|
|
<li><Link to="/logout">Logout</Link></li>
|
|
</ul>
|
|
</nav>
|
|
</Header>
|
|
<Menu>
|
|
<h3>Menu{props => this.props.theme}</h3>
|
|
<ul>
|
|
<li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
|
|
<li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
|
|
<li><NavLink activeClassName="menu__active" to="/log">Log</NavLink></li>
|
|
<li><NavLink activeClassName="menu__active" to="/backup">Backup</NavLink></li>
|
|
<li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
|
|
</ul>
|
|
</Menu>
|
|
<Main>
|
|
{this.props.children}
|
|
</Main>
|
|
<Footer>Footer</Footer>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withTheme(AdminUI)
|