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

fix: responsive each pages

Browse Source
This commit is contained in:
caturbgs 2021-12-09 12:53:55 +07:00
parent 599a89449b
commit 5016f9068d
4 changed files with 44 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.css
View File

@ -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);
}

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

@ -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

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

@ -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,7 +137,6 @@ 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}>
@ -173,96 +172,6 @@ export const Membership = observer(() => {
}} current={store.membership.page} }} current={store.membership.page}
loading={store.membership.pageSize}/> loading={store.membership.pageSize}/>
</div> </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> </Card>
<MembershipModal visible={visibleModal} <MembershipModal visible={visibleModal}
confirmLoading={confirmLoading} confirmLoading={confirmLoading}

2
src/pages/Transaction/Transaction.js
View File

@ -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}}>