tuanta/FE-DEVICE-SGW
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

style(trips): fix responsive layout

Browse Source
This commit is contained in:
Tran Anh Tuan
2025-09-29 12:04:55 +07:00
parent 2707b92f7e
commit 904028649c
7 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/Trip/components/MainTripBody.tsx
View File

@@ -1,6 +1,7 @@
import { ProCard } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import { Flex, Grid } from 'antd';
import { useState } from 'react';
import HaulTable from './HaulTable';
import TripCostTable from './TripCost';
import TripCrews from './TripCrews';
@@ -20,6 +21,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
// console.log('MainTripBody received:');
// console.log("trip_id:", trip_id);
// console.log('tripInfo:', tripInfo);
const { useBreakpoint } = Grid;
const screens = useBreakpoint();
const [isResponsive, setIsResponsive] = useState(false);
const { data, getApi } = useModel('getTrip');
const tripCosts = Array.isArray(tripInfo?.trip_cost)
? tripInfo.trip_cost
@@ -75,9 +79,12 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
gap: 10,
}}
>
<ProCard bodyStyle={{ padding: 0, gap: 5 }}>
<ProCard
split={screens.lg ? 'vertical' : 'horizontal'}
bodyStyle={{ padding: 0, gap: 5 }}
>
<ProCard
colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
layout="center"
bordered
headStyle={{
@@ -93,7 +100,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
<TripCostTable tripCosts={tripCosts} />
</ProCard>
<ProCard
colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
layout="center"
bordered
headStyle={{
@@ -110,9 +117,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
</ProCard>
</ProCard>
<ProCard
style={{ paddingInlineEnd: 0 }}
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
ghost={true}
colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
colSpan={{ xs: 24, sm: 24 }}
layout="center"
bordered
headStyle={{
@@ -126,9 +133,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
<TripCrews crew={tripInfo?.crews} />
</ProCard>
<ProCard
style={{ paddingInlineEnd: 0 }}
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
ghost={true}
colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
colSpan={{ xs: 24, sm: 24 }}
layout="center"
bordered
headStyle={{