PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: responsive layout

Browse Source
This commit is contained in:
caturbgs
2021-12-09 14:35:14 +07:00
parent 5016f9068d
commit 75580d1e21
5 changed files with 114 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/App/DesktopLayout.js
View File

@@ -6,11 +6,13 @@ import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-
import {AppRoute} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {useMediaQuery} from "react-responsive";
const {Text, Paragraph} = Typography;
const {Header, Content, Sider} = Layout;
export const DesktopLayout = observer(() => {
const xl = useMediaQuery({minWidth: 1024});
const store = useStore();
const [clicked, setClicked] = useState(false);
@@ -20,10 +22,12 @@ export const DesktopLayout = observer(() => {
className={"transparent"}
hasSider={store.ui.mediaQuery.isDesktop}
style={{
paddingLeft: 0,
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
display: "flex",
width: "100vw",
height: "100vh",
// minWidth: 1024,
width: "100%",
height: "100%",
position: "relative",
}}
>
{store.ui.mediaQuery.isDesktop && <Sider

107
src/pages/Membership/Membership.js
View File

@@ -1,10 +1,11 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, message, Modal, Row, Space, Table, Tag} from "antd";
import {Button, Card, Col, Divider, Input, List, 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";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {format} from "date-fns";
const {Search} = Input;
@@ -38,8 +39,8 @@ export const Membership = observer(() => {
},
{
title: "Username",
dataIndex: "username",
key: "username",
dataIndex: "name",
key: "name",
},
{
title: "Status",
@@ -155,22 +156,90 @@ export const Membership = observer(() => {
</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}/>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
size={"small"}
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}
/>)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: (page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
store.membership.getData();
},
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page,
style: {marginBottom: '1rem', marginRight: '1rem'}
}}
dataSource={store.membership.data}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
description={
<div style={{}}>
<p>
<small>Email : {item.email}</small> <br/>
</p>
</div>
}
/>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{format(new Date(item.created_at), "dd-MM-yyyy")}
</p>
</div>
</List.Item>
<Divider plain style={{margin: 0}}/>
</div>
);
}}
/>
)}
</div>
</Card>
<MembershipModal visible={visibleModal}