Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 5797197

Browse files
kieferbonkkieferbonk
authored
Merge pull request #299 from City-of-Helsinki/TILA-1201
TILA-1201 list card layouts
2 parents ce77970 + 229d4e2 commit 5797197

15 files changed

Lines changed: 436 additions & 291 deletions

File tree

‎ui/components/Map.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Map = ({
5757
>
5858
<NavigationControl style={navControlStyle} showCompass={false} />
5959
<Marker key={title} longitude={longitude} latitude={latitude}>
60-
<Image src="/mapMarkerIcon.svg" height="42" width="32" alt="" />
60+
<Image src="/icons/map_marker_icon.svg" height="42" width="32" alt="" />
6161
</Marker>
6262
<GeolocateControl
6363
style={geolocateControlStyle}

‎ui/components/applications/ApplicationCard.tsx‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,27 @@ import { cancelApplication } from "../../modules/api";
1818
import { MediumButton } from "../../styles/util";
1919
import { ApplicationRoundType } from "../../modules/gql-types";
2020

21-
const Card = styled(HdsCard)`
21+
const Card = styled(HdsCard).attrs({
22+
style: {
23+
"--border-width": 0,
24+
"--padding-vertical": "var(--spacing-s)",
25+
"--padding-horizontal": "var(--spacing-s)",
26+
},
27+
})`
2228
margin-bottom: var(--spacing-m);
29+
width: auto;
30+
grid-template-columns: 1fr;
31+
display: block;
2332
24-
@media (max-width: ${breakpoint.l}) {
25-
grid-template-columns: 1fr;
33+
@media (min-width: ${breakpoint.m}) {
34+
display: grid;
35+
grid-template-columns: 2fr 1fr;
36+
gap: var(--spacing-m);
2637
}
27-
28-
width: auto;
2938
`;
3039

3140
const Tag = styled(HdsTag)`
3241
&& {
33-
margin-top: var(--spacing-xs);
3442
color: var(--color-white);
3543
background-color: var(--tilavaraus-blue);
3644
font-family: var(--font-regular);
@@ -54,13 +62,27 @@ const Buttons = styled.div`
5462
font-family: var(--font-medium);
5563
font-size: var(--fontsize-body-s);
5664
margin-top: var(--spacing-m);
65+
display: flex;
66+
flex-direction: column-reverse;
67+
gap: var(--spacing-xs);
68+
69+
@media (min-width: ${breakpoint.s}) {
70+
flex-direction: row;
71+
gap: var(--spacing-s);
72+
}
73+
74+
@media (min-width: ${breakpoint.m}) {
75+
align-items: flex-end;
76+
justify-content: flex-end;
77+
}
5778
`;
5879

5980
const Applicant = styled.div`
6081
font-family: var(--font-regular);
6182
font-size: var(--fontsize-body-m);
6283
margin-top: var(--spacing-xs);
6384
margin-bottom: var(--spacing-s);
85+
padding-right: var(--spacing-m);
6486
`;
6587

6688
const RoundName = styled.div`
@@ -77,15 +99,18 @@ const RoundName = styled.div`
7799
const Modified = styled.div`
78100
font-size: var(--fontsize-body-m);
79101
font-family: var(--font-regular);
102+
color: var(--color-black-70);
103+
margin-top: var(--spacing-l);
104+
105+
@media (min-width: ${breakpoint.s}) {
106+
margin-top: var(--spacing-xl);
107+
}
80108
`;
81109

82110
const StyledButton = styled(MediumButton)`
83-
margin-right: var(--spacing-xs);
84-
font-size: var(--fontsize-body-m);
111+
white-space: nowrap;
85112
86113
@media (max-width: ${breakpoint.s}) {
87-
margin-top: var(--spacing-xs);
88-
margin-right: 0;
89114
width: 100%;
90115
}
91116
`;
@@ -167,27 +192,31 @@ const ApplicationCard = ({
167192
) : null}
168193
</div>
169194
<Buttons>
195+
{state === "cancelling" ? (
196+
<CenterSpinner />
197+
) : (
198+
editable && (
199+
<StyledButton
200+
aria-label={t("applicationCard:cancel")}
201+
onClick={() => {
202+
modal?.current?.open();
203+
}}
204+
variant="secondary"
205+
>
206+
{t("applicationCard:cancel")}
207+
</StyledButton>
208+
)
209+
)}
170210
<StyledButton
211+
aria-label={t("applicationCard:edit")}
171212
disabled={!editable}
172213
onClick={() => {
173214
router.push(`${applicationUrl(application.id as number)}/page1`);
174215
}}
216+
variant="primary"
175217
>
176218
{t("applicationCard:edit")}
177219
</StyledButton>
178-
{state === "cancelling" ? (
179-
<CenterSpinner />
180-
) : (
181-
<StyledButton
182-
disabled={!editable}
183-
onClick={() => {
184-
modal?.current?.open();
185-
}}
186-
variant="danger"
187-
>
188-
{t("applicationCard:cancel")}
189-
</StyledButton>
190-
)}
191220
</Buttons>
192221
<ConfirmationModal
193222
id="application-card-modal"

‎ui/components/common/BreadcrumbWrapper.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ type Props = {
2020
const Wrapper = styled.div`
2121
display: block;
2222
background-color: var(--color-white);
23+
border-bottom: 1px solid var(--color-black-20);
2324
`;
2425

2526
const BreadcrumbWrapper = ({ route, aliases }: Props): JSX.Element => {

‎ui/components/index/ApplicationRoundCard.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from "../../modules/util";
1414
import { breakpoint } from "../../modules/style";
1515
import { MediumButton } from "../../styles/util";
16-
import { fontMedium, H4 } from "../../modules/style/typography";
16+
import { fontMedium, H5 } from "../../modules/style/typography";
1717
import { ApplicationRoundType } from "../../modules/gql-types";
1818

1919
interface Props {
@@ -29,7 +29,7 @@ const StyledCard = styled(Card)`
2929
grid-template-columns: 2fr 1fr;
3030
grid-gap: var(--spacing-m);
3131
align-items: start;
32-
padding: var(--spacing-m);
32+
padding: var(--spacing-s);
3333
margin-bottom: var(--spacing-m);
3434
3535
@media (max-width: ${breakpoint.s}) {
@@ -43,23 +43,27 @@ const StyledContainer = styled(Container)`
4343
max-width: 100%;
4444
`;
4545

46-
const Name = styled(H4).attrs({ as: "h3" })`
47-
margin-top: 0;
48-
margin-bottom: var(--spacing-2-xs);
46+
const Name = styled(H5)`
47+
&& {
48+
margin-top: 0;
49+
margin-bottom: var(--spacing-2-xs);
50+
}
4951
`;
5052

5153
const CardButton = styled(MediumButton)`
52-
width: max-content;
54+
width: 100%;
55+
align-self: flex-end;
5356
5457
@media (min-width: ${breakpoint.s}) {
5558
justify-self: right;
59+
width: max-content;
5660
}
5761
`;
5862

5963
const StyledLink = styled.a`
6064
display: flex;
6165
align-items: center;
62-
gap: var(--spacing-2-xs);
66+
gap: var(--spacing-xs);
6367
margin-top: var(--spacing-s);
6468
${fontMedium};
6569
@@ -69,7 +73,6 @@ const StyledLink = styled.a`
6973
7074
@media (min-width: ${breakpoint.s}) {
7175
margin-top: var(--spacing-l);
72-
margin-bottom: var(--spacing-s);
7376
}
7477
`;
7578

@@ -111,8 +114,8 @@ const ApplicationRoundCard = ({ applicationRound }: Props): JSX.Element => {
111114
{state !== "past" && (
112115
<Link href={`/criteria/${applicationRound.pk}`} passHref>
113116
<StyledLink>
114-
<IconArrowRight aria-hidden="true" />
115117
{t("applicationRound:card.criteria")}
118+
<IconArrowRight aria-hidden="true" />
116119
</StyledLink>
117120
</Link>
118121
)}

‎ui/components/reservation-unit/Head.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface PropsType {
4848

4949
const TopContainer = styled.div`
5050
background-color: white;
51+
padding-top: var(--spacing-m);
5152
`;
5253

5354
const RightContainer = styled.div`

‎ui/components/reservation-unit/ReservationUnitCard.tsx‎

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ const PreCardLabel = styled(H6).attrs({ as: "h3" })``;
3333

3434
const CardButtonContainer = styled.div`
3535
display: grid;
36-
grid-template-columns: 4fr 1fr;
36+
grid-template-columns: 8fr 1fr;
3737
margin-top: var(--spacing-s);
3838
align-items: center;
3939
position: relative;
4040
41-
@media (max-width: ${breakpoint.s}) {
41+
@media (max-width: ${breakpoint.m}) {
4242
grid-template-columns: 1fr;
4343
}
4444
`;
@@ -49,30 +49,35 @@ const CardContainer = styled.div`
4949
align-items: flex-start;
5050
grid-template-columns: 1fr;
5151
52-
@media (min-width: ${breakpoint.s}) {
53-
grid-template-columns: 163px 4fr 2fr;
52+
@media (min-width: ${breakpoint.m}) {
53+
grid-template-columns: 163px 6fr 2fr;
5454
gap: var(--spacing-xs);
5555
}
5656
`;
5757

5858
const PaddedCell = styled.div`
59-
&:first-of-type {
60-
padding: var(--spacing-s);
61-
}
62-
6359
padding: var(--spacing-m) 0;
6460
6561
@media (min-width: ${breakpoint.s}) {
6662
display: flex;
6763
flex-direction: column;
68-
gap: var(--spacing-s);
64+
gap: var(--spacing-xs);
6965
}
7066
`;
7167

72-
const Image = styled.img`
68+
const ExtraPaddedCell = styled(PaddedCell)`
69+
padding: var(--spacing-s);
70+
`;
71+
72+
const ImageCell = styled.div<{ $src: string }>`
73+
background-image: url(${(props) => props.$src});
7374
width: 100%;
74-
max-height: 200px;
75-
object-fit: cover;
75+
height: 150px;
76+
background-size: cover;
77+
78+
@media (min-width: ${breakpoint.m}) {
79+
height: 100%;
80+
}
7681
`;
7782

7883
const Name = styled.div`
@@ -89,15 +94,16 @@ const Name = styled.div`
8994
const MaxPersonsContainer = styled.div`
9095
display: flex;
9196
align-items: center;
92-
font-size: var(--fontsize-body-m);
93-
94-
svg {
95-
margin-right: var(--spacing-2-xs);
96-
}
97+
gap: var(--spacing-xs);
98+
font-size: var(--fontsize-body-s);
99+
padding-bottom: var(--spacing-2-xs);
97100
`;
98101

99102
const DeleteButton = styled(MediumButton)`
100-
margin-right: var(--spacing-s);
103+
white-space: nowrap;
104+
margin: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
105+
align-self: flex-end;
106+
justify-self: flex-start;
101107
`;
102108

103109
const ArrowContainer = styled.div`
@@ -107,8 +113,11 @@ const ArrowContainer = styled.div`
107113
right: var(--spacing-m);
108114
bottom: var(--spacing-m);
109115
110-
@media (min-width: ${breakpoint.s}) {
116+
@media (min-width: ${breakpoint.m}) {
111117
position: static;
118+
flex-direction: column;
119+
gap: var(--spacing-s);
120+
justify-self: flex-end;
112121
}
113122
`;
114123

@@ -167,32 +176,30 @@ const ReservationUnitCard = ({
167176
) : null}
168177
<CardButtonContainer>
169178
<CardContainer>
170-
<Image src={getMainImage(reservationUnit)?.mediumUrl} alt="" />
171-
<PaddedCell>
179+
<ImageCell $src={getMainImage(reservationUnit)?.mediumUrl} />
180+
<ExtraPaddedCell>
172181
<Name>{getTranslation(reservationUnit, "name")}</Name>
173182
<MaxPersonsContainer>
174183
{reservationUnit.maxPersons && (
175184
<>
176-
<IconGroup aria-hidden />
185+
<IconGroup aria-hidden size="s" />
177186
{t("reservationUnitCard:maxPersons", {
178187
count: reservationUnit.maxPersons,
179188
})}
180189
</>
181190
)}
182191
</MaxPersonsContainer>
183-
</PaddedCell>
184-
<PaddedCell>
185-
<DeleteButton
186-
variant="supplementary"
187-
iconLeft={<IconCross aria-hidden />}
188-
size="small"
189-
onClick={() => {
190-
onDelete(reservationUnit);
191-
}}
192-
>
193-
{t("reservationUnitList:buttonRemove")}
194-
</DeleteButton>
195-
</PaddedCell>
192+
</ExtraPaddedCell>
193+
<DeleteButton
194+
variant="supplementary"
195+
iconLeft={<IconCross aria-hidden />}
196+
size="small"
197+
onClick={() => {
198+
onDelete(reservationUnit);
199+
}}
200+
>
201+
{t("reservationUnitList:buttonRemove")}
202+
</DeleteButton>
196203
</CardContainer>
197204
<ArrowContainer>
198205
<Circle passive={first}>

0 commit comments

Comments
 (0)