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