feat: init responsive mode
This commit is contained in:
caturbgs
parent
7852e12d42
commit
c452e8ed77
|
|
@ -6,8 +6,8 @@ export const BreadcumbComponent = (props) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Breadcrumb style={{marginBottom: 10}}>
|
<Breadcrumb style={{marginBottom: 10}}>
|
||||||
{props.data.map((e) => (
|
{props.data.map((e, index) => (
|
||||||
<Breadcrumb.Item>
|
<Breadcrumb.Item key={index}>
|
||||||
<Link to={e.route}>
|
<Link to={e.route}>
|
||||||
<span>{e.name}</span>
|
<span>{e.name}</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -46,3 +46,10 @@ code {
|
||||||
background: #2D9CDB !important;
|
background: #2D9CDB !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transparent {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.ppob-container {
|
||||||
|
padding: 14px 14px 14px 14px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
import {PageHeader} from "antd";
|
import {PageHeader} from "antd";
|
||||||
|
|
||||||
export const About = () => {
|
export const About = () => {
|
||||||
return <div>
|
return <div className={["ppob-container"].join(" ")}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
style={{
|
style={{
|
||||||
padding: 0,
|
padding: 0,
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import React, {useEffect} from "react";
|
||||||
import {DesktopLayout} from "./DesktopLayout";
|
import {DesktopLayout} from "./DesktopLayout";
|
||||||
import {useMediaQuery} from 'react-responsive';
|
import {useMediaQuery} from 'react-responsive';
|
||||||
import {useStore} from "../../utils/useStore";
|
import {useStore} from "../../utils/useStore";
|
||||||
|
import {useHistory} from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,17 @@
|
||||||
import React, {useState} from "react";
|
import React, {useState} from "react";
|
||||||
import {Button, Layout, Menu, Popover, Typography,} from "antd";
|
import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
|
||||||
import {MenuList} from "./MenuList";
|
import {MenuList} from "./MenuList";
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import {PlusSquareOutlined, UserOutlined,} from "@ant-design/icons";
|
import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
|
||||||
import {AppRoute} from "../../routes/app";
|
import {AppRoute} from "../../routes/app";
|
||||||
|
import {useStore} from "../../utils/useStore";
|
||||||
|
import {observer} from "mobx-react-lite";
|
||||||
|
|
||||||
const {Text, Paragraph} = Typography;
|
const {Text, Paragraph} = Typography;
|
||||||
const {Header, Content, Sider} = Layout;
|
const {Header, Content, Sider} = Layout;
|
||||||
|
|
||||||
export const DesktopLayout = () => {
|
export const DesktopLayout = observer(() => {
|
||||||
|
const store = useStore();
|
||||||
const [clicked, setClicked] = useState(false);
|
const [clicked, setClicked] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -23,7 +26,7 @@ export const DesktopLayout = () => {
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Sider
|
{store.ui.mediaQuery.isDesktop && <Sider
|
||||||
className={"transparent"}
|
className={"transparent"}
|
||||||
width={240}
|
width={240}
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -70,30 +73,177 @@ export const DesktopLayout = () => {
|
||||||
</div>
|
</div>
|
||||||
<MenuList closeLeftDrawer={() => {
|
<MenuList closeLeftDrawer={() => {
|
||||||
}}/>
|
}}/>
|
||||||
</Sider>
|
</Sider>}
|
||||||
|
|
||||||
|
{store.ui.mediaQuery.isMobile && (
|
||||||
|
<Drawer
|
||||||
|
title="Navigation"
|
||||||
|
placement={"left"}
|
||||||
|
closable={false}
|
||||||
|
width={"50%"}
|
||||||
|
onClose={() => {
|
||||||
|
store.ui.toggleLeftDrawerIsShown()
|
||||||
|
console.log("clicked");
|
||||||
|
}}
|
||||||
|
visible={store.ui.leftDrawerIsShown}
|
||||||
|
key={"dashboard-drawer"}
|
||||||
|
bodyStyle={{
|
||||||
|
padding: 0,
|
||||||
|
paddingTop: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginLeft: 0,
|
||||||
|
paddingLeft: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item key="home">
|
||||||
|
<Link to={'/app/home'}>
|
||||||
|
<HomeOutlined/>
|
||||||
|
<span>Home</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="membership">
|
||||||
|
<Link to={'/app/membership'}>
|
||||||
|
<HomeOutlined/>
|
||||||
|
<span>Membership</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="product">
|
||||||
|
<Link to={'/app/product'}>
|
||||||
|
<HomeOutlined/>
|
||||||
|
<span>Product</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="transaction">
|
||||||
|
<Link to={'/app/transaction'}>
|
||||||
|
<HomeOutlined/>
|
||||||
|
<span>Transaction</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="about">
|
||||||
|
<Link to={'/app/about'}>
|
||||||
|
<CalendarOutlined/>
|
||||||
|
<span>About</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
)}
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
|
className={"transparent"}
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: 240,
|
position: "relative",
|
||||||
|
display: "block",
|
||||||
|
paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
|
||||||
|
height: "100vh",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Header
|
<Header
|
||||||
theme={"light"}
|
theme={"light"}
|
||||||
|
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||||
style={{
|
style={{
|
||||||
height: 54,
|
height: store.ui.mediaQuery.isDesktop ? 54 : 35,
|
||||||
paddingLeft: 0,
|
// width: 'calc(100vw - 200px)',
|
||||||
paddingRight: 0,
|
width: "100%",
|
||||||
backgroundColor: "transparent",
|
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
||||||
maxWidth: 1000,
|
zIndex: 99,
|
||||||
display: "flex",
|
paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||||
alignItems: "center",
|
paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||||
justifyContent: "flex-end",
|
backgroundColor: store.ui.mediaQuery.isMobile
|
||||||
|
? "#fff"
|
||||||
|
: "transparent",
|
||||||
|
maxWidth: store.ui.mediaQuery.isDesktop ? 1920 : 768,
|
||||||
|
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
||||||
|
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
||||||
|
/**/
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Button style={{right: "94%"}}>
|
{store.ui.mediaQuery.isMobile && (
|
||||||
<PlusSquareOutlined/>
|
<div
|
||||||
</Button>
|
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||||
|
style={{
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
paddingTop: 8,
|
||||||
|
position: "relative",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "stretch",
|
||||||
|
flexDirection: "column",
|
||||||
|
// boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
height: "100%",
|
||||||
|
width: "100%",
|
||||||
|
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
|
||||||
|
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
|
||||||
|
paddingBottom: 4,
|
||||||
|
marginTop: -5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={
|
||||||
|
<MenuOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: "12px",
|
||||||
|
color: "#5b5b5b",
|
||||||
|
marginLeft: -10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
store.ui.toggleLeftDrawerIsShown();
|
||||||
|
console.log("apa")
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
alignItems: "stretch",
|
||||||
|
padding: 0,
|
||||||
|
margin: 0,
|
||||||
|
paddingTop: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/*<img*/}
|
||||||
|
{/* className={[classes.logoFull]}*/}
|
||||||
|
{/* style={{*/}
|
||||||
|
{/* maxHeight: 18,*/}
|
||||||
|
{/* maxWidth: 75,*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* src={parkirLogoFull}*/}
|
||||||
|
{/*/>*/}
|
||||||
|
{/*<Paragraph*/}
|
||||||
|
{/* style={{*/}
|
||||||
|
{/* margin: "-5px 0px 0px 2px",*/}
|
||||||
|
{/* padding: 0,*/}
|
||||||
|
{/* lineHeight: "18px",*/}
|
||||||
|
{/* fontSize: 8,*/}
|
||||||
|
{/* fontWeight: 800,*/}
|
||||||
|
{/* color: "#8c8c8c",*/}
|
||||||
|
{/* textAlign: "center",*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/*>*/}
|
||||||
|
{/* {store.authentication.userData.role || "Apps"}*/}
|
||||||
|
{/*</Paragraph>*/}
|
||||||
|
</div>
|
||||||
<Popover
|
<Popover
|
||||||
|
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||||
autoAdjustOverflow={true}
|
autoAdjustOverflow={true}
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
content={
|
content={
|
||||||
|
|
@ -104,7 +254,6 @@ export const DesktopLayout = () => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
right: "30%",
|
|
||||||
}}
|
}}
|
||||||
mode="inline"
|
mode="inline"
|
||||||
>
|
>
|
||||||
|
|
@ -125,11 +274,100 @@ export const DesktopLayout = () => {
|
||||||
}
|
}
|
||||||
title={
|
title={
|
||||||
<Text>
|
<Text>
|
||||||
info@bangun-kreatif.com
|
{/*{store.user.data.email}{" "}*/}
|
||||||
{/*{store.userData.email}{" "}*/}
|
{/*<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>*/}
|
||||||
|
{/* {store.authentication.userData.full_name}*/}
|
||||||
|
{/*</Paragraph>*/}
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
visible={clicked}
|
||||||
|
onVisibleChange={() => setClicked(!clicked)}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size={"default"}
|
||||||
|
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||||
|
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
|
||||||
|
icon={
|
||||||
|
store.ui.mediaQuery.isDesktop ? (
|
||||||
|
<UserOutlined style={{fontSize: "13px"}}/>
|
||||||
|
) : (
|
||||||
|
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderTopWidth: 0.5,
|
||||||
|
borderTopColor: "#e3e3e3",
|
||||||
|
borderTopStyle: "solid",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/*<BreadcumbComponent data={}/>*/}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{store.ui.mediaQuery.isDesktop && (
|
||||||
|
<div
|
||||||
|
className={["transparent"].join(" ")}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
height: "100%",
|
||||||
|
maxWidth: 1024,
|
||||||
|
minWidth: 768,
|
||||||
|
width: "calc(100vw - 220px)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
alignItems: "center",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<Popover
|
||||||
|
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||||
|
autoAdjustOverflow={true}
|
||||||
|
placement="bottomRight"
|
||||||
|
content={
|
||||||
|
<Menu
|
||||||
|
type={"line"}
|
||||||
|
inlineIndent={0}
|
||||||
|
theme="light"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
borderRightWidth: 0,
|
||||||
|
}}
|
||||||
|
mode="inline"
|
||||||
|
>
|
||||||
|
<Menu.Item>
|
||||||
|
<Link to="/app/profile">
|
||||||
|
<span>Profile</span>
|
||||||
|
</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
onClick={() => {
|
||||||
|
// store.authentication.logout();
|
||||||
|
// return history.push("/login");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>Sign out</span>
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
title={
|
||||||
|
<Text>
|
||||||
|
{store.user.data.email}{" "}
|
||||||
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
|
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
|
||||||
Administrator
|
{/*{store.authentication.userData.full_name}*/}
|
||||||
{/*{store.userData.role}*/}
|
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</Text>
|
</Text>
|
||||||
}
|
}
|
||||||
|
|
@ -139,13 +377,65 @@ export const DesktopLayout = () => {
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
size={"default"}
|
size={"default"}
|
||||||
style={{}}
|
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||||
icon={<UserOutlined style={{fontSize: "13px"}}/>}
|
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
|
||||||
|
icon={
|
||||||
|
store.ui.mediaQuery.isDesktop ? (
|
||||||
|
<UserOutlined style={{fontSize: "13px"}}/>
|
||||||
|
) : (
|
||||||
|
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
className={["transparent"].join(" ")}
|
||||||
|
tabIndex={"-1"}
|
||||||
|
style={{
|
||||||
|
zIndex: 0,
|
||||||
|
display: "flex",
|
||||||
|
// overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
|
||||||
|
// paddingLeft: 8,
|
||||||
|
// paddingRight: 8,
|
||||||
|
// width: 'calc(90vw - 220px)',
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Content
|
||||||
|
className={["transparent"].join(" ")}
|
||||||
|
style={{
|
||||||
|
// maxHeight: 'calc(100vh - 98px)',
|
||||||
|
// paddingBottom: 48,
|
||||||
|
padding: 0,
|
||||||
|
margin: 0,
|
||||||
|
position: "relative",
|
||||||
|
marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
|
||||||
|
// overflow: 'auto',
|
||||||
|
overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
|
||||||
|
// minWidth: 768,
|
||||||
|
maxWidth: 1024,
|
||||||
|
// minWidth: 768,
|
||||||
|
width: store.ui.mediaQuery.isDesktop
|
||||||
|
? "calc(100vw - 210px)"
|
||||||
|
: "calc(100vw)",
|
||||||
|
zIndex: 22,
|
||||||
|
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
||||||
|
height: `calc(100vh - ${
|
||||||
|
store.ui.mediaQuery.isDesktop ? 78 : 71
|
||||||
|
}px)`,
|
||||||
|
// paddingLeft: 8,
|
||||||
|
// paddingRight: 8
|
||||||
|
}}
|
||||||
|
>
|
||||||
<AppRoute/>
|
<AppRoute/>
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import {store} from "../../utils/useStore";
|
||||||
import {observer} from "mobx-react-lite";
|
import {observer} from "mobx-react-lite";
|
||||||
|
|
||||||
export const Home = observer(() => {
|
export const Home = observer(() => {
|
||||||
return <div>
|
return <div className={["ppob-container"].join(" ")}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
style={{
|
style={{
|
||||||
padding: 0,
|
padding: 0,
|
||||||
|
|
|
||||||
|
|
@ -134,7 +134,7 @@ export const Membership = observer(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={["ppob-container"].join(" ")}>
|
||||||
<BreadcumbComponent data={routeData}/>
|
<BreadcumbComponent data={routeData}/>
|
||||||
<Card>
|
<Card>
|
||||||
{store.ui.mediaQuery.isDesktop && (
|
{store.ui.mediaQuery.isDesktop && (
|
||||||
|
|
@ -201,7 +201,6 @@ export const Membership = observer(() => {
|
||||||
dataSource={store.membership.data}
|
dataSource={store.membership.data}
|
||||||
style={{padding: 0}}
|
style={{padding: 0}}
|
||||||
renderItem={(item) => {
|
renderItem={(item) => {
|
||||||
console.log(item, "item ->");
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
import {makeAutoObservable} from "mobx";
|
import {makeAutoObservable} from "mobx";
|
||||||
|
|
||||||
export class UI {
|
export class UI {
|
||||||
mediaQuery = {
|
mediaQuery = {};
|
||||||
isMobile: false,
|
|
||||||
isDesktop: true
|
|
||||||
};
|
|
||||||
|
|
||||||
testValue = "Test Mobx";
|
testValue = "Test Mobx";
|
||||||
|
leftDrawerIsShown = false;
|
||||||
|
params = {};
|
||||||
|
baseUrl = '/app';
|
||||||
|
|
||||||
constructor(ctx) {
|
constructor(ctx) {
|
||||||
this.ctx = ctx;
|
this.ctx = ctx;
|
||||||
|
|
@ -22,4 +21,13 @@ export class UI {
|
||||||
this.mediaQuery = data;
|
this.mediaQuery = data;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
toggleLeftDrawerIsShown() {
|
||||||
|
console.log('what')
|
||||||
|
this.leftDrawerIsShown = !this.leftDrawerIsShown;
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(data) {
|
||||||
|
this.params = data;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user