Skip to content

Commit 6fa3401

Browse files
kemurukemuru
committed
feat(web): better styling of disputecard, disputeinfo styling, courtbranch calculation
1 parent 56b27da commit 6fa3401

File tree

4 files changed

+126
-64
lines changed

4 files changed

+126
-64
lines changed

‎web/src/components/DisputeCard/DisputeInfo.tsx‎

Lines changed: 115 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import { Periods } from "consts/periods";
45
import { useIsList } from "context/IsListProvider";
56
import BookmarkIcon from "svgs/icons/bookmark.svg";
@@ -8,9 +9,43 @@ import LawBalanceIcon from "svgs/icons/law-balance.svg";
89
import PileCoinsIcon from "svgs/icons/pile-coins.svg";
910
import RoundIcon from "svgs/icons/round.svg";
1011
import Field from "../Field";
11-
import { landscapeStyle } from "styles/landscapeStyle";
12+
import { getCourtsPath } from "pages/Courts/CourtDetails";
13+
import { useCourtTree } from "hooks/queries/useCourtTree";
1214

1315
const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
16+
display: flex;
17+
width: 100%;
18+
gap: 8px;
19+
flex-direction: column;
20+
justify-content: flex-end;
21+
22+
${({ isList }) =>
23+
isList &&
24+
css`
25+
${landscapeStyle(
26+
() => css`
27+
gap: 0;
28+
height: 100%;
29+
`
30+
)}
31+
`};
32+
`;
33+
34+
const CourtBranchFieldContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
35+
${({ isOverview }) =>
36+
isOverview &&
37+
css`
38+
${landscapeStyle(
39+
() => css`
40+
display: flex;
41+
margin-top: 16px;
42+
flex-wrap: wrap;
43+
`
44+
)}
45+
`};
46+
`;
47+
48+
const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
1449
display: flex;
1550
flex-direction: column;
1651
gap: 8px;
@@ -30,7 +65,6 @@ const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
3065
`
3166
)}
3267
`};
33-
3468
${({ isOverview }) =>
3569
isOverview &&
3670
css`
@@ -41,7 +75,6 @@ const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
4175
flex-direction: row;
4276
flex-wrap: wrap;
4377
justify-content: flex-start;
44-
align-items: flex-start;
4578
`
4679
)}
4780
`};
@@ -92,64 +125,88 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
92125
}) => {
93126
const { isList } = useIsList();
94127
const displayAsList = isList && !overrideIsList;
128+
const { data } = useCourtTree();
129+
const courtPath = getCourtsPath(data?.court, courtId);
130+
const items = [];
131+
items.push(
132+
...(courtPath?.map((node) => ({
133+
text: node.name,
134+
value: node.id,
135+
})) ?? [])
136+
);
137+
const courtBranchValue = items.map((item) => item.text).join(" / ");
95138

96139
return (
97140
<Container isList={displayAsList} isOverview={isOverview}>
98-
{court && courtId && (
99-
<Field
100-
icon={LawBalanceIcon}
101-
name="Court"
102-
value={court}
103-
link={`/courts/${courtId}`}
104-
displayAsList={displayAsList}
105-
isOverview={isOverview}
106-
/>
107-
)}
108-
{category && (
109-
<Field
110-
icon={BookmarkIcon}
111-
name="Category"
112-
value={category}
113-
displayAsList={displayAsList}
114-
isOverview={isOverview}
115-
/>
116-
)}
117-
{!category && displayAsList && (
118-
<Field
119-
icon={BookmarkIcon}
120-
name="Category"
121-
value="General"
122-
displayAsList={displayAsList}
123-
isOverview={isOverview}
124-
/>
125-
)}
126-
{round && (
127-
<Field
128-
icon={RoundIcon}
129-
name="Round"
130-
value={round.toString()}
131-
displayAsList={displayAsList}
132-
isOverview={isOverview}
133-
/>
134-
)}
135-
{rewards && (
136-
<Field
137-
icon={PileCoinsIcon}
138-
name="Juror Rewards"
139-
value={rewards}
140-
displayAsList={displayAsList}
141-
isOverview={isOverview}
142-
/>
143-
)}
144-
{typeof period !== "undefined" && date && (
145-
<Field
146-
icon={CalendarIcon}
147-
name={getPeriodPhrase(period)}
148-
value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
149-
displayAsList={displayAsList}
150-
isOverview={isOverview}
151-
/>
152-
)}
141+
<CourtBranchFieldContainer isOverview={isOverview}>
142+
{court && courtId && isOverview && (
143+
<Field
144+
icon={LawBalanceIcon}
145+
name="Court Branch"
146+
value={courtBranchValue}
147+
displayAsList={displayAsList}
148+
isOverview={isOverview}
149+
/>
150+
)}
151+
</CourtBranchFieldContainer>
152+
<RestOfFieldsContainer isOverview={isOverview} isList={displayAsList}>
153+
{court && courtId && !isOverview && (
154+
<Field
155+
icon={LawBalanceIcon}
156+
name="Court"
157+
value={court}
158+
link={`/courts/${courtId}`}
159+
displayAsList={displayAsList}
160+
isOverview={isOverview}
161+
/>
162+
)}
163+
164+
{category && (
165+
<Field
166+
icon={BookmarkIcon}
167+
name="Category"
168+
value={category}
169+
displayAsList={displayAsList}
170+
isOverview={isOverview}
171+
/>
172+
)}
173+
{!category && displayAsList && (
174+
<Field
175+
icon={BookmarkIcon}
176+
name="Category"
177+
value="General"
178+
displayAsList={displayAsList}
179+
isOverview={isOverview}
180+
/>
181+
)}
182+
{round && (
183+
<Field
184+
icon={RoundIcon}
185+
name="Round"
186+
value={round.toString()}
187+
displayAsList={displayAsList}
188+
isOverview={isOverview}
189+
/>
190+
)}
191+
{rewards && (
192+
<Field
193+
icon={PileCoinsIcon}
194+
name="Juror Rewards"
195+
value={rewards}
196+
displayAsList={displayAsList}
197+
isOverview={isOverview}
198+
/>
199+
)}
200+
{typeof period !== "undefined" && date && (
201+
<Field
202+
icon={CalendarIcon}
203+
name={getPeriodPhrase(period)}
204+
value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
205+
displayAsList={displayAsList}
206+
isOverview={isOverview}
207+
/>
208+
)}
209+
</RestOfFieldsContainer>
153210
</Container>
154211
);
155212
};

‎web/src/components/DisputeCard/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@ import { isUndefined } from "utils/index";
1717

1818
const StyledCard = styled(Card)`
1919
width: 100%;
20-
height: 260px;
20+
height: calc(272px + (296 - 270) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2121
${landscapeStyle(
2222
() =>
2323
css`
2424
/* Explanation of this formula:
2525
- The 48px accounts for the total width of gaps: 2 gaps * 24px each.
2626
- The 0.333 is used to equally distribute width among 3 cards per row.
27-
- The 294px ensures the card has a minimum width.
27+
- The 348px ensures the card has a minimum width.
2828
*/
29-
width: max(calc((100% - 48px) * 0.333), 294px);
29+
width: max(calc((100% - 48px) * 0.333), 348px);
3030
`
3131
)}
3232
`;
@@ -39,8 +39,8 @@ const StyledListItem = styled(Card)`
3939
`;
4040

4141
const CardContainer = styled.div`
42-
height: 215px;
43-
padding: 24px;
42+
height: calc(100% - 45px);
43+
padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
4444
display: flex;
4545
flex-direction: column;
4646
justify-content: space-between;

‎web/src/pages/Cases/CaseDetails/Overview.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
172172

173173
<DisputeInfo
174174
isOverview={true}
175+
overrideIsList={true}
175176
courtId={court?.id}
176177
court={courtName}
177178
round={localRounds?.length}

‎web/src/pages/Courts/CourtDetails/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,11 @@ interface IItem {
128128
id: string;
129129
}
130130

131-
const getCourtsPath = (node: CourtTreeQuery["court"], id: string | undefined, path: IItem[] = []): IItem[] | null => {
131+
export const getCourtsPath = (
132+
node: CourtTreeQuery["court"],
133+
id: string | undefined,
134+
path: IItem[] = []
135+
): IItem[] | null => {
132136
if (!node || !id) return null;
133137

134138
if (node.id === id) {

0 commit comments

Comments
 (0)