From b2ca591fee4b12f33b64ac246c205d51e11de93e Mon Sep 17 00:00:00 2001 From: caturbgs Date: Thu, 9 Dec 2021 14:35:14 +0700 Subject: [PATCH] fix: responsive layout --- package.json | 3 +- src/index.css | 10 +-- src/pages/App/DesktopLayout.js | 10 ++- src/pages/Membership/Membership.js | 107 ++++++++++++++++++++++++----- yarn.lock | 19 +++-- 5 files changed, 114 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index bd09d63..78c12c6 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "camelcase": "^6.2.0", "case-sensitive-paths-webpack-plugin": "2.4.0", "css-loader": "4.3.0", + "date-fns": "^2.27.0", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint": "^7.28.0", @@ -61,7 +62,7 @@ "react-dev-utils": "^11.0.4", "react-dom": "^17.0.2", "react-refresh": "^0.8.3", - "react-responsive": "^8.2.0", + "react-responsive": "^9.0.0-beta.5", "react-router-dom": "^5.2.0", "react-router-transition": "^2.1.0", "resolve": "1.20.0", diff --git a/src/index.css b/src/index.css index 39746de..1e43dce 100644 --- a/src/index.css +++ b/src/index.css @@ -24,11 +24,11 @@ code { border-color: #2D9CDB !important; } -.ant-card { - margin-bottom: 30px !important; - width: 1000px; - height: auto; -} +/*.ant-card {*/ +/* margin-bottom: 30px !important;*/ +/* width: 1000px;*/ +/* height: auto;*/ +/*}*/ .ant-table-cell { text-align: center !important; diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 7d1edf9..2a1da7a 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -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 && { }, { title: "Username", - dataIndex: "username", - key: "username", + dataIndex: "name", + key: "name", }, { title: "Status", @@ -155,22 +156,90 @@ export const Membership = observer(() => { - { - 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 && ( +
{ + 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 && ( + { + 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 ( +
+ + +

+ Email : {item.email}
+

+
+ } + /> +
+

+ {format(new Date(item.created_at), "dd-MM-yyyy")} +

+
+ + + + ); + }} + /> + )}