fix(ui): improve layout stability and refactor trade detail styles
- fix schedule screen layout by measuring day width on web to prevent overflow - add overflow hidden to schedule grid cells - refactor trade detail screen styles for better organization and readability - update trade detail seller card and avatar components - expand trade type and status maps in trade detail screen
This commit is contained in:
@@ -199,6 +199,7 @@ export const ScheduleScreen: React.FC = () => {
|
|||||||
return Math.max(DEFAULT_SECTION_HEIGHT, calculatedHeight);
|
return Math.max(DEFAULT_SECTION_HEIGHT, calculatedHeight);
|
||||||
}, [screenHeight, isMobile, insets.bottom]);
|
}, [screenHeight, isMobile, insets.bottom]);
|
||||||
const [isAddModalVisible, setIsAddModalVisible] = useState(false);
|
const [isAddModalVisible, setIsAddModalVisible] = useState(false);
|
||||||
|
const [measuredDayWidth, setMeasuredDayWidth] = useState<number | null>(null);
|
||||||
const [pendingDay, setPendingDay] = useState<number>(0);
|
const [pendingDay, setPendingDay] = useState<number>(0);
|
||||||
const [pendingMergedSection, setPendingMergedSection] = useState<number>(1);
|
const [pendingMergedSection, setPendingMergedSection] = useState<number>(1);
|
||||||
const [newCourseName, setNewCourseName] = useState('');
|
const [newCourseName, setNewCourseName] = useState('');
|
||||||
@@ -676,7 +677,9 @@ export const ScheduleScreen: React.FC = () => {
|
|||||||
const height = duration * sectionHeight - 4;
|
const height = duration * sectionHeight - 4;
|
||||||
const laneGap = 2;
|
const laneGap = 2;
|
||||||
const baseLeft = 2;
|
const baseLeft = 2;
|
||||||
const availableWidth = dayColumnWidth - baseLeft * 2;
|
const baseRight = 2;
|
||||||
|
const effectiveDayWidth = measuredDayWidth ?? dayColumnWidth;
|
||||||
|
const availableWidth = effectiveDayWidth - baseLeft - baseRight;
|
||||||
const cardWidth =
|
const cardWidth =
|
||||||
laneCount > 1
|
laneCount > 1
|
||||||
? (availableWidth - laneGap * (laneCount - 1)) / laneCount
|
? (availableWidth - laneGap * (laneCount - 1)) / laneCount
|
||||||
@@ -728,6 +731,9 @@ export const ScheduleScreen: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
key={dayOfWeek}
|
key={dayOfWeek}
|
||||||
|
onLayout={(e) => {
|
||||||
|
if (isWeb) setMeasuredDayWidth(e.nativeEvent.layout.width);
|
||||||
|
}}
|
||||||
style={[
|
style={[
|
||||||
styles.dayColumn,
|
styles.dayColumn,
|
||||||
{
|
{
|
||||||
@@ -1336,6 +1342,7 @@ function createScheduleStyles(colors: AppColors) {
|
|||||||
backgroundColor: colors.background.default,
|
backgroundColor: colors.background.default,
|
||||||
borderRightWidth: StyleSheet.hairlineWidth,
|
borderRightWidth: StyleSheet.hairlineWidth,
|
||||||
borderRightColor: colors.divider,
|
borderRightColor: colors.divider,
|
||||||
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
gridCell: {
|
gridCell: {
|
||||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user