layout
This commit is contained in:
parent
73510d9920
commit
8d90cd55ec
@ -53,10 +53,7 @@ export class SignIn extends React.Component<any, any> {
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column mobile={16} tablet={5} computer={5}>
|
||||
</Grid.Column>
|
||||
<Grid centered verticalAlign='middle'>
|
||||
<Grid.Column mobile={16} tablet={6} computer={6}>
|
||||
<Form>
|
||||
<Form.Input fluid placeholder='Email' onChange={
|
||||
@ -68,7 +65,7 @@ export class SignIn extends React.Component<any, any> {
|
||||
this.setState({ pass: data.value });
|
||||
}} />
|
||||
<div style={{textAlign:'right'}}>
|
||||
<a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
|
||||
<a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password?</a>
|
||||
</div>
|
||||
<Form.Group>
|
||||
<Button fluid primary style={{margin:'7'}} onClick={this.onSignIn}> Sign In </Button>
|
||||
@ -76,9 +73,6 @@ export class SignIn extends React.Component<any, any> {
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} tablet={4} computer={5}>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
||||
<Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
|
||||
|
@ -27,6 +27,15 @@ export class Layout extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<LeftMenu />
|
||||
<Segment vertical style={{margin:'0 0 0 210px', padding:'0'}}>
|
||||
<Header />
|
||||
<Router history={history} >
|
||||
<Routes />
|
||||
</Router>
|
||||
<Footer />
|
||||
</Segment>
|
||||
{/*}
|
||||
<Sidebar.Pushable as={Segment} vertical>
|
||||
<Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
|
||||
<LeftMenu />
|
||||
@ -44,6 +53,7 @@ export class Layout extends React.Component<any, any> {
|
||||
</Segment>
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable>
|
||||
*/}
|
||||
{/* <Header onSidebar={this.onSidebar.bind(this)} />
|
||||
<Sidebar.Pushable as={Segment} vertical >
|
||||
<Sidebar
|
||||
|
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
|
||||
import { Container, Menu, Dropdown, Segment, Icon, Header, Image } from 'semantic-ui-react';
|
||||
import { TopBar } from '../TopBar';
|
||||
import { LogoBar } from './LogoBar';
|
||||
import { TitleBar } from './TitleBar';
|
||||
@ -20,90 +20,89 @@ export class LeftMenu extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid className='fullHeight'>
|
||||
<Segment inverted vertical className='fullHeight'>
|
||||
<Menu inverted secondary vertical fluid icon='labeled' >
|
||||
|
||||
<Menu.Item name='User' href='/' >
|
||||
<Icon name='user' />
|
||||
<Menu fixed='left' inverted vertical borderless>
|
||||
<Menu.Item name='User'>
|
||||
<Header textAlign='center'>
|
||||
<Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg' size='mini' shape='circular' />
|
||||
</Header>
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Home' href='/' >
|
||||
<Icon name='home' />
|
||||
Home
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Monitoring' href='/' >
|
||||
<Icon name='bar graph' />
|
||||
Monitoring
|
||||
{/*
|
||||
<Dropdown text='Monitoring' pointing>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Monitoring</Dropdown.Header>
|
||||
<Dropdown.Item>Probe</Dropdown.Item>
|
||||
<Dropdown.Item>Sensors</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
*/}
|
||||
<Header inverted sub icon='home' content='Home' />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Infrastructure' href='/' >
|
||||
<Icon name='sitemap' />
|
||||
Infrastructure
|
||||
{/*
|
||||
<Dropdown text='Infrastructure' >
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Infrastructure</Dropdown.Header>
|
||||
<Dropdown.Item>Maps</Dropdown.Item>
|
||||
<Dropdown.Item>Targets</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
*/}
|
||||
<Menu.Item>
|
||||
<Menu.Header name='Monitoring' >
|
||||
<Header inverted sub icon='bar graph' content='Monitoring' />
|
||||
</Menu.Header>
|
||||
<Menu.Menu>
|
||||
<Menu.Item href='#/test14' style={{'margin-left':'30px'}}>Probe</Menu.Item>
|
||||
<Menu.Item href='/' style={{'margin-left':'30px'}}>Sensors</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Dashboard' href='/' >
|
||||
<Icon name='industry' />
|
||||
Dashboard
|
||||
<Menu.Item>
|
||||
<Menu.Header name='Infrastructure' >
|
||||
<Header inverted sub icon='sitemap' content='Infrastructure' />
|
||||
</Menu.Header>
|
||||
<Menu.Menu>
|
||||
<Menu.Item href='/' style={{'margin-left':'30px'}}>Maps</Menu.Item>
|
||||
<Menu.Item href='/' style={{'margin-left':'30px'}}>Targets</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Metrics' href='/' >
|
||||
<Icon name='tasks' />
|
||||
Metrics
|
||||
<Menu.Item>
|
||||
<Menu.Header name='Dashboard' href='/' >
|
||||
<Header inverted sub icon='industry' content='Dashboard' />
|
||||
</Menu.Header>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Alerts' href='/' >
|
||||
<Icon name='alarm' />
|
||||
Alerts
|
||||
<Menu.Item>
|
||||
<Menu.Header name='Metrics' href='/' >
|
||||
<Header inverted sub icon='tasks' content='Metrics' />
|
||||
</Menu.Header>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='History' href='/' >
|
||||
<Icon name='book' />
|
||||
History
|
||||
<Menu.Item>
|
||||
<Menu.Header name='Alerts' href='/' >
|
||||
<Header inverted sub icon='alarm' content='Alerts' />
|
||||
</Menu.Header>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item>
|
||||
<Menu.Header name='History' href='/' >
|
||||
<Header inverted sub icon='book' content='History' />
|
||||
</Menu.Header>
|
||||
</Menu.Item>
|
||||
|
||||
|
||||
<Menu.Item href='/'>
|
||||
<Icon name='play circle' />
|
||||
<Dropdown text='Custom'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Custom</Dropdown.Header>
|
||||
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Settings' href='/' >
|
||||
<Icon name='setting' />
|
||||
Settings
|
||||
</Menu.Item>
|
||||
<Menu.Item >
|
||||
<Menu.Header name='Custom'>
|
||||
<Header inverted sub><Icon name='play circle' />
|
||||
<Header.Content>
|
||||
<Dropdown text='Custom'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Custom</Dropdown.Header>
|
||||
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Header.Content>
|
||||
</Header>
|
||||
</Menu.Header>
|
||||
|
||||
</Menu>
|
||||
</Segment>
|
||||
</Container>
|
||||
</Menu.Item>
|
||||
<Menu.Item bottom>
|
||||
<Menu.Header name='Settings' href='/' >
|
||||
<Header inverted sub icon='setting' content='Settings' />
|
||||
</Menu.Header>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
// <TopBar onSidebar={this.props.onSidebar}/>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Menu, Header, Container } from 'semantic-ui-react';
|
||||
import { Menu, Header, Container, Image } from 'semantic-ui-react';
|
||||
|
||||
export class LogoBar extends React.Component<any, any> {
|
||||
|
||||
@ -19,13 +19,11 @@ export class LogoBar extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Container fluid style={{background:'#f8f8f8', 'padding-right':'7px'}}>
|
||||
<Menu borderless secondary >
|
||||
<Menu.Item
|
||||
name='logo'
|
||||
onClick={this.handleLogoClick}
|
||||
>
|
||||
<Header as='h3' icon='stack overflow' content='overFlow' />
|
||||
<Menu.Item name='logo'>
|
||||
<Image src='https://lh3.googleusercontent.com/EaEViB7RYr3Rhhez8zY0TYsNsS5Rv2i63kyiQ5ym0rhQh38KRXBh7BDFo4mjDTDU_Hm6FAVg35247ZM1wE6cO-TuBP4wxYW2SG4hYoojqkUomu587xg3t50VGUSceK17-LUZhM-5XoCsXUXBHtfXVMqMZ2rUb23tgm7Kuv7eTgZZz0o9_dB0lApoi57EBVBNX8_qIDSH3YmGfvqhnKeh5AYnnBG_QXlTg1JExwtMehCe8KgXs4-vLuVicPCCuJ2AXSoWFpVXL9TVhrrMOkeuGd-6PGAFiNxeTG6NylQKwbQikx3Mx7KmGq3iSc8mqp0AmwjptG2DtS7nqwNaAZAi1DtraHYgJcE_tfpEgnZfFSWmVYQYcUe98pfZR11OfJErdJxE3w-mL1b4MoyufB0VkSlFM1BpMlfP3OsnnDIdNAXthT6MuLtI2iLv_CNeoDKi3fdH-zIcSmoArgAFrAo0-9oYUfvQDdaC_8MMddc97b_L78fzFOPRGIf52Ajr-Ia6sjdyDFdJ46-wPKfMW8XHnFfA96NsIcA-HYRZ7GTteJOzVq6HEabwnurZdTxdmCjzGHcb7OEu00DkVMhM6WbWZ0L8HWpIk92sy-sKbprHe-9oh_9WaxJzPrlG=w180-h30-no'
|
||||
style={{width:'120px'}} onClick={this.handleLogoClick} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
position='right'
|
||||
|
@ -25,7 +25,7 @@ export class TitleBar extends React.Component<any, any> {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Menu basic fluid style={{'border-left':'0px', 'border-right':'0px', 'box-shadow':'none', 'border-radius':'0'}}>
|
||||
<Menu basic fluid style={{'border-left':'0px', 'border-right':'0px', 'box-shadow':'none', 'border-radius':'0', margin:'0'}}>
|
||||
<Menu.Item name='Page Title' style={{width:'250px'}}>
|
||||
<Header as='h3'>Page Title
|
||||
<Header.Subheader>
|
||||
|
Loading…
x
Reference in New Issue
Block a user