fix: responsive each pages
This commit is contained in:
caturbgs
parent
c452e8ed77
commit
0ae9495c58
|
|
@ -53,3 +53,7 @@ code {
|
|||
.ppob-container {
|
||||
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
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={true}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: 0,
|
||||
display: "flex",
|
||||
|
|
@ -148,7 +148,7 @@ export const DesktopLayout = observer(() => {
|
|||
theme={"light"}
|
||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||
style={{
|
||||
height: store.ui.mediaQuery.isDesktop ? 54 : 35,
|
||||
height: store.ui.mediaQuery.isDesktop ? 24 : 35,
|
||||
// width: 'calc(100vw - 200px)',
|
||||
width: "100%",
|
||||
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
||||
|
|
@ -158,7 +158,7 @@ export const DesktopLayout = observer(() => {
|
|||
backgroundColor: store.ui.mediaQuery.isMobile
|
||||
? "#fff"
|
||||
: "transparent",
|
||||
maxWidth: store.ui.mediaQuery.isDesktop ? 1920 : 768,
|
||||
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
|
||||
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
||||
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
||||
/**/
|
||||
|
|
@ -426,7 +426,7 @@ export const DesktopLayout = observer(() => {
|
|||
zIndex: 22,
|
||||
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
||||
height: `calc(100vh - ${
|
||||
store.ui.mediaQuery.isDesktop ? 78 : 71
|
||||
store.ui.mediaQuery.isDesktop ? 43 : 37
|
||||
}px)`,
|
||||
// paddingLeft: 8,
|
||||
// paddingRight: 8
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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 {observer} from "mobx-react-lite";
|
||||
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
|
|
@ -137,7 +137,6 @@ export const Membership = observer(() => {
|
|||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<div>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
|
|
@ -173,96 +172,6 @@ export const Membership = observer(() => {
|
|||
}} 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>
|
||||
)}
|
||||
</Card>
|
||||
<MembershipModal visible={visibleModal}
|
||||
confirmLoading={confirmLoading}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const Transaction = () => {
|
|||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} text=""/>
|
||||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user