Skip to content

Commit eb442de

Browse files
kemurukemuru
committed
feat(web): better styling in mobile version
1 parent 7e92e10 commit eb442de

File tree

2 files changed

+122
-79
lines changed

2 files changed

+122
-79
lines changed

‎web/src/pages/Home/TopJurors/JurorCard.tsx‎

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
45
import EthIcon from "assets/svgs/icons/eth.svg";
56
import PnkIcon from "assets/svgs/icons/kleros.svg";
67
import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
78
import { getUserLevelData } from "utils/userLevelCalculation";
89
import { useUserQuery } from "hooks/queries/useUser";
910

10-
const Container = styled.div`
11+
const Container = styled.div<{ id?: number }>`
1112
display: flex;
1213
justify-content: space-between;
14+
flex-wrap: wrap;
1315
width: 100%;
1416
height: 100%;
1517
background-color: ${({ theme }) => theme.whiteBackground};
16-
padding: 19.5px 32px;
18+
padding: 24px;
1719
border 1px solid ${({ theme }) => theme.stroke};
18-
border-top: none;
20+
border-top: ${({ id }) => (id === 1 ? "" : "none")};
1921
align-items: center;
2022
2123
label {
2224
font-size: 16px;
2325
}
24-
`;
2526
26-
const JurorTitle = styled.div`
27-
display: flex;
28-
gap: 36px;
29-
align-items: center;
30-
width: 372px;
27+
${landscapeStyle(
28+
() => css`
29+
gap: 0px;
30+
padding: 15.55px 32px;
31+
flex-wrap: nowrap;
32+
`
33+
)}
3134
`;
3235

3336
const LogoAndAddress = styled.div`
@@ -42,17 +45,32 @@ const LogoAndAddress = styled.div`
4245
}
4346
`;
4447

45-
const JurorData = styled.div`
48+
const TitleAndRewardsAndCoherency = styled.div`
4649
display: flex;
47-
justify-content: space-between;
48-
width: 100%;
49-
flex-wrap: wrap;
50-
gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300)));
50+
flex-direction: column;
51+
gap: 16px;
52+
53+
${landscapeStyle(
54+
() =>
55+
css`
56+
flex-direction: row;
57+
gap: 32px;
58+
`
59+
)}
5160
`;
5261

53-
const RewardsAndCoherency = styled.div`
62+
const JurorTitle = styled.div`
5463
display: flex;
55-
gap: calc(52px + (104 - 52) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
64+
gap: 16px;
65+
align-items: center;
66+
justify-content: flex-start;
67+
68+
${landscapeStyle(
69+
() => css`
70+
width: calc(140px + (260 - 140) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
71+
gap: 36px;
72+
`
73+
)}
5674
`;
5775

5876
const Rewards = styled.div`
@@ -63,13 +81,23 @@ const Rewards = styled.div`
6381
font-weight: 600;
6482
}
6583
width: 132px;
84+
flex-wrap: wrap;
85+
86+
${landscapeStyle(
87+
() =>
88+
css`
89+
width: calc(80px + (180 - 80) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
90+
`
91+
)}
6692
`;
6793

6894
const Coherency = styled.div`
95+
display: flex;
6996
align-items: center;
7097
label {
7198
font-weight: 600;
7299
}
100+
flex-wrap: wrap;
73101
`;
74102

75103
const StyledIcon = styled.div`
@@ -108,32 +136,30 @@ const JurorCard: React.FC<IJurorCard> = ({ id, address }) => {
108136
};
109137

110138
return (
111-
<Container>
112-
<JurorTitle>
113-
<label>{id}</label>
114-
<LogoAndAddress>
115-
<StyledIdenticonOrAvatar address={address} />
116-
<AddressOrName address={address} />
117-
</LogoAndAddress>
118-
</JurorTitle>
119-
<JurorData>
120-
<RewardsAndCoherency>
121-
<Rewards>
122-
<label>{ethReward}</label>
123-
<StyledIcon as={EthIcon} />
124-
<label>+</label>
125-
<label>{pnkReward}</label>
126-
<StyledIcon as={PnkIcon} />
127-
</Rewards>
128-
<Coherency>
129-
<label>{coherentVotes}</label>
130-
</Coherency>
131-
</RewardsAndCoherency>
132-
<HowItWorks>
133-
<label> Level {userLevelData.level}</label>
134-
<PixelArt width="32" height="32" level={userLevelData.level} />
135-
</HowItWorks>
136-
</JurorData>
139+
<Container id={id}>
140+
<TitleAndRewardsAndCoherency>
141+
<JurorTitle>
142+
<label>{id}</label>
143+
<LogoAndAddress>
144+
<StyledIdenticonOrAvatar address={address} />
145+
<AddressOrName address={address} />
146+
</LogoAndAddress>
147+
</JurorTitle>
148+
<Rewards>
149+
<label>{ethReward}</label>
150+
<StyledIcon as={EthIcon} />
151+
<label>+</label>
152+
<label>{pnkReward}</label>
153+
<StyledIcon as={PnkIcon} />
154+
</Rewards>
155+
<Coherency>
156+
<label>{coherentVotes}</label>
157+
</Coherency>
158+
</TitleAndRewardsAndCoherency>
159+
<HowItWorks>
160+
<label> Level {userLevelData.level}</label>
161+
<PixelArt width="32" height="32" level={userLevelData.level} />
162+
</HowItWorks>
137163
</Container>
138164
);
139165
};

‎web/src/pages/Home/TopJurors/TopJurorsHeader.tsx‎

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,45 @@ import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
77
const Container = styled.div`
88
display: flex;
99
justify-content: space-between;
10-
1110
width: 100%;
1211
height: 100%;
1312
background-color: ${({ theme }) => theme.lightBlue};
14-
padding: 18.5px 32px;
13+
padding: 24px;
1514
border 1px solid ${({ theme }) => theme.stroke};
1615
border-top-left-radius: 3px;
1716
border-top-right-radius: 3px;
17+
border-bottom: none;
18+
flex-wrap: wrap;
19+
20+
${landscapeStyle(
21+
() =>
22+
css`
23+
flex-wrap: nowrap;
24+
gap: 0px;
25+
padding: 18.6px 32px;
26+
`
27+
)}
1828
`;
1929

20-
const JurorData = styled.div`
30+
const TitleAndRewardsAndCoherency = styled.div`
2131
display: flex;
22-
align-items: center;
23-
justify-content: space-between;
24-
width: 100%;
25-
flex-wrap: wrap;
26-
gap: calc(24px + (48 - 24) * ((100vw - 300px) / (1250 - 300)));
32+
flex-direction: column;
33+
gap: 12px;
34+
35+
${landscapeStyle(
36+
() =>
37+
css`
38+
flex-direction: row;
39+
gap: 32px;
40+
`
41+
)}
2742
`;
2843

2944
const JurorTitle = styled.div`
30-
display: none;
31-
gap: 36px;
45+
display: flex;
46+
gap: 16px;
3247
align-items: center;
48+
3349
label {
3450
font-weight: 400;
3551
font-size: 14px;
@@ -40,21 +56,23 @@ const JurorTitle = styled.div`
4056
${landscapeStyle(
4157
() =>
4258
css`
43-
display: flex;
44-
width: 372px;
59+
width: calc(160px + (260 - 160) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
60+
gap: 36px;
4561
`
4662
)}
4763
`;
4864

49-
const RewardsAndCoherency = styled.div`
50-
display: flex;
51-
gap: calc(52px + (104 - 52) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
52-
`;
53-
5465
const Rewards = styled.div`
55-
width: 132px;
66+
${landscapeStyle(
67+
() =>
68+
css`
69+
width: calc(80px + (180 - 80) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
70+
`
71+
)}
5672
`;
5773

74+
const Coherency = styled.div``;
75+
5876
const HowItWorks = styled.div`
5977
display: flex;
6078
align-items: center;
@@ -86,27 +104,26 @@ const coherentVotesTooltipMsg =
86104
const TopJurorsHeader: React.FC = () => {
87105
return (
88106
<Container>
89-
<JurorTitle>
90-
<label>#</label>
91-
<label>Juror</label>
92-
</JurorTitle>
93-
<JurorData>
94-
<RewardsAndCoherency>
95-
<Rewards>
96-
<WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
97-
<label> Total Rewards </label>
98-
</WithHelpTooltip>
99-
</Rewards>
100-
107+
<TitleAndRewardsAndCoherency>
108+
<JurorTitle>
109+
<label>#</label>
110+
<label>Juror</label>
111+
</JurorTitle>
112+
<Rewards>
113+
<WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
114+
<label> Total Rewards </label>
115+
</WithHelpTooltip>
116+
</Rewards>
117+
<Coherency>
101118
<WithHelpTooltip place="top" tooltipMsg={coherentVotesTooltipMsg}>
102119
<label> Coherent Votes </label>
103120
</WithHelpTooltip>
104-
</RewardsAndCoherency>
105-
<HowItWorks>
106-
<BookOpenIcon />
107-
<label> How it works </label>
108-
</HowItWorks>
109-
</JurorData>
121+
</Coherency>
122+
</TitleAndRewardsAndCoherency>
123+
<HowItWorks>
124+
<BookOpenIcon />
125+
<label> How it works </label>
126+
</HowItWorks>
110127
</Container>
111128
);
112129
};

0 commit comments

Comments
 (0)