fix: responsive each pages
This commit is contained in:
caturbgs
parent
c452e8ed77
commit
0ae9495c58
|
|
@ -53,3 +53,7 @@ code {
|
||||||
.ppob-container {
|
.ppob-container {
|
||||||
padding: 14px 14px 14px 14px;
|
padding: 14px 14px 14px 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
@ -18,7 +18,7 @@ export const DesktopLayout = observer(() => {
|
||||||
<Layout
|
<Layout
|
||||||
theme={"light"}
|
theme={"light"}
|
||||||
className={"transparent"}
|
className={"transparent"}
|
||||||
hasSider={true}
|
hasSider={store.ui.mediaQuery.isDesktop}
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: 0,
|
paddingLeft: 0,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -148,7 +148,7 @@ export const DesktopLayout = observer(() => {
|
||||||
theme={"light"}
|
theme={"light"}
|
||||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||||
style={{
|
style={{
|
||||||
height: store.ui.mediaQuery.isDesktop ? 54 : 35,
|
height: store.ui.mediaQuery.isDesktop ? 24 : 35,
|
||||||
// width: 'calc(100vw - 200px)',
|
// width: 'calc(100vw - 200px)',
|
||||||
width: "100%",
|
width: "100%",
|
||||||
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
||||||
|
|
@ -158,7 +158,7 @@ export const DesktopLayout = observer(() => {
|
||||||
backgroundColor: store.ui.mediaQuery.isMobile
|
backgroundColor: store.ui.mediaQuery.isMobile
|
||||||
? "#fff"
|
? "#fff"
|
||||||
: "transparent",
|
: "transparent",
|
||||||
maxWidth: store.ui.mediaQuery.isDesktop ? 1920 : 768,
|
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
|
||||||
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
||||||
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
||||||
/**/
|
/**/
|
||||||
|
|
@ -426,7 +426,7 @@ export const DesktopLayout = observer(() => {
|
||||||
zIndex: 22,
|
zIndex: 22,
|
||||||
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
||||||
height: `calc(100vh - ${
|
height: `calc(100vh - ${
|
||||||
store.ui.mediaQuery.isDesktop ? 78 : 71
|
store.ui.mediaQuery.isDesktop ? 43 : 37
|
||||||
}px)`,
|
}px)`,
|
||||||
// paddingLeft: 8,
|
// paddingLeft: 8,
|
||||||
// paddingRight: 8
|
// paddingRight: 8
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, {useEffect, useState} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import {Button, Card, Col, Input, List, message, Modal, PageHeader, Row, Space, Table, Tag} from "antd";
|
import {Button, Card, Col, Input, message, Modal, Row, Space, Table, Tag} from "antd";
|
||||||
import {useStore} from "../../utils/useStore";
|
import {useStore} from "../../utils/useStore";
|
||||||
import {observer} from "mobx-react-lite";
|
import {observer} from "mobx-react-lite";
|
||||||
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||||
|
|
@ -137,132 +137,41 @@ export const Membership = observer(() => {
|
||||||
<div className={["ppob-container"].join(" ")}>
|
<div className={["ppob-container"].join(" ")}>
|
||||||
<BreadcumbComponent data={routeData}/>
|
<BreadcumbComponent data={routeData}/>
|
||||||
<Card>
|
<Card>
|
||||||
{store.ui.mediaQuery.isDesktop && (
|
<div>
|
||||||
<div>
|
<Row style={{marginBottom: 20}}>
|
||||||
<Row style={{marginBottom: 20}}>
|
<Col span={12}>
|
||||||
<Col span={12}>
|
<Button>
|
||||||
<Button>
|
<FilterOutlined/>
|
||||||
<FilterOutlined/>
|
Filter
|
||||||
Filter
|
</Button>
|
||||||
</Button>
|
</Col>
|
||||||
</Col>
|
<Col span={12} style={{textAlign: "right"}}>
|
||||||
<Col span={12} style={{textAlign: "right"}}>
|
<Search
|
||||||
<Search
|
placeholder="input search text"
|
||||||
placeholder="input search text"
|
style={{width: 200, marginRight: 10}}
|
||||||
style={{width: 200, marginRight: 10}}
|
|
||||||
/>
|
|
||||||
<Button onClick={() => setVisibleModal(true)}>
|
|
||||||
<PlusSquareOutlined/> New
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Table
|
|
||||||
style={{textAlign: "center"}}
|
|
||||||
columns={columns}
|
|
||||||
dataSource={store.membership.data}
|
|
||||||
bordered
|
|
||||||
pagination={{
|
|
||||||
total: store.membership.total_data,
|
|
||||||
current: store.membership.page,
|
|
||||||
pageSize: store.membership.pageSize,
|
|
||||||
simple: true
|
|
||||||
}} onChange={(page) => {
|
|
||||||
store.membership.pageSize = page.pageSize;
|
|
||||||
store.membership.page = page.current;
|
|
||||||
store.membership.getData();
|
|
||||||
}} current={store.membership.page}
|
|
||||||
loading={store.membership.pageSize}/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{store.ui.mediaQuery.isMobile && (
|
|
||||||
<div>
|
|
||||||
<Card bordered={false} bodyStyle={{padding: "0"}} style={{borderRadius: 0, width: '50%'}}>
|
|
||||||
<PageHeader
|
|
||||||
className={"card-page-header"}
|
|
||||||
style={{
|
|
||||||
padding: "6px 8px",
|
|
||||||
}}
|
|
||||||
title={
|
|
||||||
<Button
|
|
||||||
icon={<FilterOutlined/>}
|
|
||||||
size={"small"}
|
|
||||||
style={{margin: 3}}
|
|
||||||
>
|
|
||||||
Filter
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
subTitle=""
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<List
|
|
||||||
itemLayout="horizontal"
|
|
||||||
position={"top"}
|
|
||||||
dataSource={store.membership.data}
|
|
||||||
style={{padding: 0}}
|
|
||||||
renderItem={(item) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<List.Item
|
|
||||||
key={item.key}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
paddingTop: 0,
|
|
||||||
paddingBottom: 0,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: "50%"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<List.Item.Meta
|
|
||||||
className={["cariparkir-container"].join(" ")}
|
|
||||||
title={<h3 style={{marginBottom: 0, color: "#5469d4"}}>{item.name}</h3>}
|
|
||||||
description={
|
|
||||||
<div style={{}}>
|
|
||||||
<p>
|
|
||||||
<small>Username : {item.username}</small> <br/>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{item.status}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{/* <div style={{ marginRight: 16 }}>
|
|
||||||
<Statistic
|
|
||||||
title={
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: 9,
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.updated_at ? moment(item.updated_at).format("DD MMM YY, H:mm:ss") : "There is not top up yet"}
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
prefix={"Rp"}
|
|
||||||
precision={0}
|
|
||||||
style={{ fontSize: 12, fontWeight: 300 }}
|
|
||||||
valueStyle={{
|
|
||||||
color: "#5469d4",
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: 600,
|
|
||||||
textAlign: "right",
|
|
||||||
}}
|
|
||||||
value={item.balances}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div> */}
|
|
||||||
</List.Item>
|
|
||||||
{/* <Divider plain style={{ margin: 0 }} /> */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
<Button onClick={() => setVisibleModal(true)}>
|
||||||
)}
|
<PlusSquareOutlined/> New
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Table
|
||||||
|
style={{textAlign: "center"}}
|
||||||
|
columns={columns}
|
||||||
|
dataSource={store.membership.data}
|
||||||
|
bordered
|
||||||
|
pagination={{
|
||||||
|
total: store.membership.total_data,
|
||||||
|
current: store.membership.page,
|
||||||
|
pageSize: store.membership.pageSize,
|
||||||
|
simple: true
|
||||||
|
}} onChange={(page) => {
|
||||||
|
store.membership.pageSize = page.pageSize;
|
||||||
|
store.membership.page = page.current;
|
||||||
|
store.membership.getData();
|
||||||
|
}} current={store.membership.page}
|
||||||
|
loading={store.membership.pageSize}/>
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<MembershipModal visible={visibleModal}
|
<MembershipModal visible={visibleModal}
|
||||||
confirmLoading={confirmLoading}
|
confirmLoading={confirmLoading}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ export const Transaction = () => {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={["ppob-container"].join(" ")}>
|
||||||
<BreadcumbComponent data={routeData} text=""/>
|
<BreadcumbComponent data={routeData} text=""/>
|
||||||
<Card>
|
<Card>
|
||||||
<Row style={{marginBottom: 20}}>
|
<Row style={{marginBottom: 20}}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user