fix: responsive layout

2021-12-09 14:35:14 +07:00 · 2021-12-09 14:35:14 +07:00 · b2ca591fee
commit b2ca591fee
parent 0ae9495c58
5 changed files with 114 additions and 35 deletions
--- 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",
--- 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;
--- 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 && <Sider
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -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}
--- a/yarn.lock
+++ b/yarn.lock
@ -4384,6 +4384,11 @@ date-fns@^2.15.0:
  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.17.0.tgz"
  integrity sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA==

+date-fns@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
+  integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@ -10383,15 +10388,15 @@ react-refresh@^0.8.3:
  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

-react-responsive@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz"
-  integrity sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==
+react-responsive@^9.0.0-beta.5:
+  version "9.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.0-beta.5.tgz#94b6eba0d089c4977d5353188a4d5a744392cbe3"
+  integrity sha512-Zvikc/28FsabQ4caLP1wIQlRPXBelYMct6dnUEwTRI4P7jH5d9x8RAMb1SbAZ0IdZGQHQ06aSRvhhg/tvqXktA==
  dependencies:
    hyphenate-style-name "^1.0.0"
    matchmediaquery "^0.3.0"
    prop-types "^15.6.1"
-    shallow-equal "^1.1.0"
+    shallow-equal "^1.2.1"

 react-router-dom@^5.2.0:
  version "5.2.0"
@ -11137,9 +11142,9 @@ sha.js@^2.4.0, sha.js@^2.4.8:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

-shallow-equal@^1.1.0:
+shallow-equal@^1.2.1:
  version "1.2.1"
-  resolved "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==

 shallowequal@^1.1.0: