Skip to content

T
Tia-dev
Commit 98d0ceaa authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

100vh

parent 7f8f1810
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 40 deletions
src/container/BudgetTahunan.js
View file @ 98d0ceaa
......@@ -99,10 +99,10 @@ export default class BudgetTahunan extends Component {
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
......
src/container/Home.js
View file @ 98d0ceaa
......@@ -30,7 +30,7 @@ import {
useRouteMatch
} from "react-router-dom";
import Images from '../assets/Images';
import { FadeMenu, Footer } from '../Utils/Index';
import { FadeMenu, Footer, UseWindowDimensions } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
......@@ -38,6 +38,7 @@ import ArraySide from '../library/Array'
const drawerWidth = 307;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
......@@ -133,6 +134,8 @@ export default function MiniDrawer() {
let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions();
return (
<div className={classes.root}>
<CssBaseline />
......@@ -196,8 +199,8 @@ export default function MiniDrawer() {
</div>
{open &&
<div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold'}}>John Doe</Typography>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10}}>john@tia.com</Typography>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
</div>
}
</div>
......@@ -211,39 +214,39 @@ export default function MiniDrawer() {
</div>
</div>
}
{open &&
<div style={{marginLeft: 25, marginTop: 20, marginBottom: 20}}>
<Typography style={{color: 'white', fontSize: 12}}>APLIKASI</Typography>
{open &&
<div style={{ marginLeft: 25, marginTop: 20, marginBottom: 20 }}>
<Typography style={{ color: 'white', fontSize: 12 }}>APLIKASI</Typography>
</div>
}
<List>
{ArraySide.map((item, index) => (
<div>
{item.subItem != null?
<div style={{justifyContent:'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10}} onClick={() => selectedIndex == 0? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
{item.subItem != null? (index === selectedIndex? <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
</div>
<div>
{item.subItem != null ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{ color: "white" }} /> : <MailIcon style={{ color: "white" }} />}</ListItemIcon>
<Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
</ListItem>
{item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div>
:
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
</Link>
}
{item.subItem != null &&
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{ color: "white" }} /> : <MailIcon style={{ color: "white" }} />}</ListItemIcon>
<Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
</ListItem>
</Link>
}
{item.subItem != null &&
<div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, index) => {
return (
<Link to={`${url}/${sub.path}`}>
<ListItem style={{paddingLeft: 72}}>
<Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography>
<ListItem style={{ paddingLeft: 72 }}>
<Typography style={{ color: 'white', fontSize: 12 }}>{sub.label}</Typography>
</ListItem>
</Link>
)
......@@ -251,8 +254,8 @@ export default function MiniDrawer() {
</List>
</Collapse>
</div>
}
</div>
}
</div>
))}
</List>
</Drawer>
......@@ -272,7 +275,7 @@ export default function MiniDrawer() {
key={index}
path={route.path}
// exact={route.exact}
children={<route.main />}
children={<route.main height={height} />}
/>
))}
</Switch>
......
src/container/MasterData/UnitBisnis.js
View file @ 98d0ceaa
......@@ -17,7 +17,13 @@ export default class UnitBisnis extends Component {
visibleCreate: false
}
}
componentDidMount() {
}
render() {
console.log(this.props.height)
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action",
options: {
......@@ -57,11 +63,11 @@ export default class UnitBisnis extends Component {
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return (
<Container fluid style={{ height: '100vh', padding: 0 }}>
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
<div style={{ marginTop: -150 }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label>
<label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
......@@ -85,7 +91,7 @@ export default class UnitBisnis extends Component {
onClickClose={() => this.setState({ visibleCreate: false })}
/>
)}
</Container>
</div>
);
}
}
src/container/Otorisasi/User.js
View file @ 98d0ceaa
......@@ -50,11 +50,11 @@ export default class componentName extends Component {
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return (
<Container fluid style={{ height: '100vh', padding: 0 }}>
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
<div style={{ marginTop: -150 }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
<label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
......@@ -72,7 +72,7 @@ export default class componentName extends Component {
</div>
</div>
</Container>
</div>
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment