Skip to content

Commit 88afb2e

Browse files
don-aotdon-aot
authored
Merge pull request #174 from don-aot/origin/CONDITIONS-task#100
CR-100:Consolidated Conditions table spacing
2 parents 717fd42 + 2c345da commit 88afb2e

File tree

3 files changed

+27
-35
lines changed

3 files changed

+27
-35
lines changed

‎condition-web/src/components/Conditions/ConditionTableRow.tsx‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { ArrowForwardIos } from "@mui/icons-material";
21
import { Link, TableCell, TableRow, Typography } from "@mui/material";
32
import { BCDesignTokens } from "epic.theme";
43
import DocumentStatusChip from "../Projects/DocumentStatusChip";
@@ -52,30 +51,27 @@ export default function ConditionTableRow({
5251
>
5352
{documentTypeId !== DocumentTypes.Amendment && (
5453
<TableCell
55-
colSpan={1}
5654
align="left"
5755
sx={{
5856
borderTop: border,
5957
borderBottom: border,
60-
py: BCDesignTokens.layoutPaddingXsmall,
58+
p: BCDesignTokens.layoutPaddingXsmall,
6159
}}
6260
>
6361
{condition.amendment_names ?? "--"}
6462
</TableCell>
6563
)}
6664
<TableCell
67-
colSpan={2}
6865
align="left"
6966
sx={{
7067
borderTop: border,
7168
borderBottom: border,
72-
py: BCDesignTokens.layoutPaddingXsmall,
69+
p: BCDesignTokens.layoutPaddingXsmall,
7370
}}
7471
>
7572
{condition.condition_number ?? "--"}
7673
</TableCell>
7774
<TableCell
78-
colSpan={4}
7975
align="left"
8076
sx={{
8177
borderTop: border,
@@ -87,8 +83,9 @@ export default function ConditionTableRow({
8783
sx={{
8884
color: BCDesignTokens.themeBlue90,
8985
textDecoration: "none",
90-
display: "flex",
86+
display: "inline-flex",
9187
alignItems: "center",
88+
gap: 0.5,
9289
}}
9390
component={"button"}
9491
onClick={() => handleOnDocumentClick(
@@ -98,68 +95,62 @@ export default function ConditionTableRow({
9895
)}
9996
>
10097
<Typography
98+
component="span"
10199
color={BCDesignTokens.themeBlue90}
102100
fontWeight={"bold"}
103101
fontSize={18}
104-
sx={{ mr: 0.5 }}
105-
align="left"
102+
sx={{ textAlign: "left" }}
106103
>
107104
{condition.condition_name ?? "--"}
108105
</Typography>
109-
<ArrowForwardIos fontSize="small" />
110106
</Link>
111107
</TableCell>
112108
<TableCell
113-
colSpan={2}
114-
align="right"
109+
align="left"
115110
sx={{
116111
borderTop: border,
117112
borderBottom: border,
118-
py: BCDesignTokens.layoutPaddingXsmall,
113+
p: BCDesignTokens.layoutPaddingXsmall,
119114
}}
120115
>
121116
{condition.topic_tags?.join(', ') ?? "--"}
122117
</TableCell>
123118
<TableCell
124-
colSpan={2}
125-
align="right"
119+
align="left"
126120
sx={{
127121
borderTop: border,
128122
borderBottom: border,
129-
py: BCDesignTokens.layoutPaddingXsmall,
123+
p: BCDesignTokens.layoutPaddingXsmall,
130124
}}
131125
>
132126
{condition.year_issued ?? "--"}
133127
</TableCell>
134128
{tableType == "consolidated" && <TableCell
135-
colSpan={4}
136-
align="center"
129+
align="left"
137130
sx={{
138131
borderTop: border,
139132
borderBottom: border,
140-
py: BCDesignTokens.layoutPaddingXsmall,
133+
p: BCDesignTokens.layoutPaddingXsmall,
141134
}}
142135
>
143136
{condition.source_document ?? "--"}
144137
</TableCell>}
145138
<TableCell
146-
colSpan={2}
147-
align="center"
139+
align="left"
148140
sx={{
149141
borderTop: border,
150142
borderBottom: border,
151-
py: BCDesignTokens.layoutPaddingXsmall,
143+
p: BCDesignTokens.layoutPaddingXsmall,
152144
}}
153145
>
154146
{condition.is_standard_condition ?? "--"}
155147
</TableCell>
156148
<TableCell
157-
colSpan={3}
158-
align="center"
149+
align="left"
159150
sx={{
160151
borderTop: border,
161152
borderBottom: border,
162-
py: BCDesignTokens.layoutPaddingXsmall,
153+
p: BCDesignTokens.layoutPaddingXsmall,
163154
}}
164155
>
165156
<DocumentStatusChip status={String(condition.is_approved) as DocumentStatus} />

‎condition-web/src/components/Conditions/ConditionsTable.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ export default function ConditionTable({
8181
: conditions;
8282

8383
return (
84-
<TableContainer component={Box} sx={{ height: "100%", overflowY: 'auto', minWidth: 1000 }}>
85-
<Table sx={{ tableLayout: "fixed", border: 0 }} aria-label="condition table">
84+
<TableContainer component={Box} sx={{ height: "100%", overflow: 'auto' }}>
85+
<Table sx={{ tableLayout: "auto", border: 0 }} aria-label="condition table">
8686
{!headless && (
8787
<TableHead
8888
sx={{
@@ -92,7 +92,7 @@ export default function ConditionTable({
9292
>
9393
<TableRow>
9494
{documentTypeId !== DocumentTypes.Amendment && (
95-
<StyledTableHeadCell colSpan={1} align="left">
95+
<StyledTableHeadCell align="left">
9696
<TableSortLabel
9797
active={orderBy === "amendment_names"}
9898
direction={orderBy === "amendment_names" ? order : "asc"}
@@ -103,7 +103,7 @@ export default function ConditionTable({
103103
</StyledTableHeadCell>
104104
)}
105105

106-
<StyledTableHeadCell colSpan={2} align="left">
106+
<StyledTableHeadCell align="left">
107107
<TableSortLabel
108108
active={orderBy === "condition_number"}
109109
direction={orderBy === "condition_number" ? order : "asc"}
@@ -113,7 +113,7 @@ export default function ConditionTable({
113113
</TableSortLabel>
114114
</StyledTableHeadCell>
115115

116-
<StyledTableHeadCell colSpan={4} align="left">
116+
<StyledTableHeadCell align="left">
117117
<TableSortLabel
118118
active={orderBy === "condition_name"}
119119
direction={orderBy === "condition_name" ? order : "asc"}
@@ -123,7 +123,7 @@ export default function ConditionTable({
123123
</TableSortLabel>
124124
</StyledTableHeadCell>
125125

126-
<StyledTableHeadCell colSpan={2} align="right">
126+
<StyledTableHeadCell align="left">
127127
<TableSortLabel
128128
active={orderBy === "topic_tags"}
129129
direction={orderBy === "topic_tags" ? order : "asc"}
@@ -133,7 +133,7 @@ export default function ConditionTable({
133133
</TableSortLabel>
134134
</StyledTableHeadCell>
135135

136-
<StyledTableHeadCell colSpan={2} align="right">
136+
<StyledTableHeadCell align="left">
137137
<TableSortLabel
138138
active={orderBy === "year_issued"}
139139
direction={orderBy === "year_issued" ? order : "asc"}
@@ -144,7 +144,7 @@ export default function ConditionTable({
144144
</StyledTableHeadCell>
145145

146146
{tableType === "consolidated" && (
147-
<StyledTableHeadCell colSpan={4} align="center">
147+
<StyledTableHeadCell align="left">
148148
<TableSortLabel
149149
active={orderBy === "source_document"}
150150
direction={orderBy === "source_document" ? order : "asc"}
@@ -155,7 +155,7 @@ export default function ConditionTable({
155155
</StyledTableHeadCell>
156156
)}
157157

158-
<StyledTableHeadCell colSpan={2} align="center">
158+
<StyledTableHeadCell align="left">
159159
<TableSortLabel
160160
active={orderBy === "is_standard_condition"}
161161
direction={orderBy === "is_standard_condition" ? order : "asc"}
@@ -165,7 +165,7 @@ export default function ConditionTable({
165165
</TableSortLabel>
166166
</StyledTableHeadCell>
167167

168-
<StyledTableHeadCell colSpan={3} align="center">
168+
<StyledTableHeadCell align="left">
169169
<TableSortLabel
170170
active={orderBy === "is_approved"}
171171
direction={orderBy === "is_approved" ? order : "asc"}

‎condition-web/src/components/Shared/Table/common.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { BCDesignTokens } from "epic.theme";
66
export const StyledTableHeadCell = styled(TableCell)(() => ({
77
color: BCDesignTokens.themeGray70,
88
fontSize: BCDesignTokens.typographyFontSizeSmallBody,
9+
whiteSpace: "nowrap",
910
"&:hover": {
1011
color: BCDesignTokens.surfaceColorMenusHover,
1112
},

0 commit comments

Comments
 (0)