Skip to content

Commit

Permalink
Merge pull request #299 from City-of-Helsinki/TILA-1201
Browse files Browse the repository at this point in the history 
TILA-1201 list card layouts
  • Loading branch information
@kieferbonk
kieferbonk authored May 6, 2022
2 parents ce77970 + 229d4e2 commit 5797197
Show file tree
Hide file tree
Showing 15 changed files with 436 additions and 291 deletions.
2 changes: 1 addition & 1 deletion ui/components/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Map = ({
>
<NavigationControl style={navControlStyle} showCompass={false} />
<Marker key={title} longitude={longitude} latitude={latitude}>
<Image src="/mapMarkerIcon.svg" height="42" width="32" alt="" />
<Image src="/icons/map_marker_icon.svg" height="42" width="32" alt="" />
</Marker>
<GeolocateControl
style={geolocateControlStyle}
Expand Down
75 changes: 52 additions & 23 deletions ui/components/applications/ApplicationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,27 @@ import { cancelApplication } from "../../modules/api";
import { MediumButton } from "../../styles/util";
import { ApplicationRoundType } from "../../modules/gql-types";

const Card = styled(HdsCard)`
const Card = styled(HdsCard).attrs({
style: {
"--border-width": 0,
"--padding-vertical": "var(--spacing-s)",
"--padding-horizontal": "var(--spacing-s)",
},
})`
margin-bottom: var(--spacing-m);
width: auto;
grid-template-columns: 1fr;
display: block;
@media (max-width: ${breakpoint.l}) {
grid-template-columns: 1fr;
@media (min-width: ${breakpoint.m}) {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-m);
}
width: auto;
`;

const Tag = styled(HdsTag)`
&& {
margin-top: var(--spacing-xs);
color: var(--color-white);
background-color: var(--tilavaraus-blue);
font-family: var(--font-regular);
Expand All @@ -54,13 +62,27 @@ const Buttons = styled.div`
font-family: var(--font-medium);
font-size: var(--fontsize-body-s);
margin-top: var(--spacing-m);
display: flex;
flex-direction: column-reverse;
gap: var(--spacing-xs);
@media (min-width: ${breakpoint.s}) {
flex-direction: row;
gap: var(--spacing-s);
}
@media (min-width: ${breakpoint.m}) {
align-items: flex-end;
justify-content: flex-end;
}
`;

const Applicant = styled.div`
font-family: var(--font-regular);
font-size: var(--fontsize-body-m);
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-s);
padding-right: var(--spacing-m);
`;

const RoundName = styled.div`
Expand All @@ -77,15 +99,18 @@ const RoundName = styled.div`
const Modified = styled.div`
font-size: var(--fontsize-body-m);
font-family: var(--font-regular);
color: var(--color-black-70);
margin-top: var(--spacing-l);
@media (min-width: ${breakpoint.s}) {
margin-top: var(--spacing-xl);
}
`;

const StyledButton = styled(MediumButton)`
margin-right: var(--spacing-xs);
font-size: var(--fontsize-body-m);
white-space: nowrap;
@media (max-width: ${breakpoint.s}) {
margin-top: var(--spacing-xs);
margin-right: 0;
width: 100%;
}
`;
Expand Down Expand Up @@ -167,27 +192,31 @@ const ApplicationCard = ({
) : null}
</div>
<Buttons>
{state === "cancelling" ? (
<CenterSpinner />
) : (
editable && (
<StyledButton
aria-label={t("applicationCard:cancel")}
onClick={() => {
modal?.current?.open();
}}
variant="secondary"
>
{t("applicationCard:cancel")}
</StyledButton>
)
)}
<StyledButton
aria-label={t("applicationCard:edit")}
disabled={!editable}
onClick={() => {
router.push(`${applicationUrl(application.id as number)}/page1`);
}}
variant="primary"
>
{t("applicationCard:edit")}
</StyledButton>
{state === "cancelling" ? (
<CenterSpinner />
) : (
<StyledButton
disabled={!editable}
onClick={() => {
modal?.current?.open();
}}
variant="danger"
>
{t("applicationCard:cancel")}
</StyledButton>
)}
</Buttons>
<ConfirmationModal
id="application-card-modal"
Expand Down
1 change: 1 addition & 0 deletions ui/components/common/BreadcrumbWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type Props = {
const Wrapper = styled.div`
display: block;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-black-20);
`;

const BreadcrumbWrapper = ({ route, aliases }: Props): JSX.Element => {
Expand Down
21 changes: 12 additions & 9 deletions ui/components/index/ApplicationRoundCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
} from "../../modules/util";
import { breakpoint } from "../../modules/style";
import { MediumButton } from "../../styles/util";
import { fontMedium, H4 } from "../../modules/style/typography";
import { fontMedium, H5 } from "../../modules/style/typography";
import { ApplicationRoundType } from "../../modules/gql-types";

interface Props {
Expand All @@ -29,7 +29,7 @@ const StyledCard = styled(Card)`
grid-template-columns: 2fr 1fr;
grid-gap: var(--spacing-m);
align-items: start;
padding: var(--spacing-m);
padding: var(--spacing-s);
margin-bottom: var(--spacing-m);
@media (max-width: ${breakpoint.s}) {
Expand All @@ -43,23 +43,27 @@ const StyledContainer = styled(Container)`
max-width: 100%;
`;

const Name = styled(H4).attrs({ as: "h3" })`
margin-top: 0;
margin-bottom: var(--spacing-2-xs);
const Name = styled(H5)`
&& {
margin-top: 0;
margin-bottom: var(--spacing-2-xs);
}
`;

const CardButton = styled(MediumButton)`
width: max-content;
width: 100%;
align-self: flex-end;
@media (min-width: ${breakpoint.s}) {
justify-self: right;
width: max-content;
}
`;

const StyledLink = styled.a`
display: flex;
align-items: center;
gap: var(--spacing-2-xs);
gap: var(--spacing-xs);
margin-top: var(--spacing-s);
${fontMedium};
Expand All @@ -69,7 +73,6 @@ const StyledLink = styled.a`
@media (min-width: ${breakpoint.s}) {
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-s);
}
`;

Expand Down Expand Up @@ -111,8 +114,8 @@ const ApplicationRoundCard = ({ applicationRound }: Props): JSX.Element => {
{state !== "past" && (
<Link href={`/criteria/${applicationRound.pk}`} passHref>
<StyledLink>
<IconArrowRight aria-hidden="true" />
{t("applicationRound:card.criteria")}
<IconArrowRight aria-hidden="true" />
</StyledLink>
</Link>
)}
Expand Down
1 change: 1 addition & 0 deletions ui/components/reservation-unit/Head.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ interface PropsType {

const TopContainer = styled.div`
background-color: white;
padding-top: var(--spacing-m);
`;

const RightContainer = styled.div`
Expand Down
77 changes: 42 additions & 35 deletions ui/components/reservation-unit/ReservationUnitCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,12 @@ const PreCardLabel = styled(H6).attrs({ as: "h3" })``;

const CardButtonContainer = styled.div`
display: grid;
grid-template-columns: 4fr 1fr;
grid-template-columns: 8fr 1fr;
margin-top: var(--spacing-s);
align-items: center;
position: relative;
@media (max-width: ${breakpoint.s}) {
@media (max-width: ${breakpoint.m}) {
grid-template-columns: 1fr;
}
`;
Expand All @@ -49,30 +49,35 @@ const CardContainer = styled.div`
align-items: flex-start;
grid-template-columns: 1fr;
@media (min-width: ${breakpoint.s}) {
grid-template-columns: 163px 4fr 2fr;
@media (min-width: ${breakpoint.m}) {
grid-template-columns: 163px 6fr 2fr;
gap: var(--spacing-xs);
}
`;

const PaddedCell = styled.div`
&:first-of-type {
padding: var(--spacing-s);
}
padding: var(--spacing-m) 0;
@media (min-width: ${breakpoint.s}) {
display: flex;
flex-direction: column;
gap: var(--spacing-s);
gap: var(--spacing-xs);
}
`;

const Image = styled.img`
const ExtraPaddedCell = styled(PaddedCell)`
padding: var(--spacing-s);
`;

const ImageCell = styled.div<{ $src: string }>`
background-image: url(${(props) => props.$src});
width: 100%;
max-height: 200px;
object-fit: cover;
height: 150px;
background-size: cover;
@media (min-width: ${breakpoint.m}) {
height: 100%;
}
`;

const Name = styled.div`
Expand All @@ -89,15 +94,16 @@ const Name = styled.div`
const MaxPersonsContainer = styled.div`
display: flex;
align-items: center;
font-size: var(--fontsize-body-m);
svg {
margin-right: var(--spacing-2-xs);
}
gap: var(--spacing-xs);
font-size: var(--fontsize-body-s);
padding-bottom: var(--spacing-2-xs);
`;

const DeleteButton = styled(MediumButton)`
margin-right: var(--spacing-s);
white-space: nowrap;
margin: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
align-self: flex-end;
justify-self: flex-start;
`;

const ArrowContainer = styled.div`
Expand All @@ -107,8 +113,11 @@ const ArrowContainer = styled.div`
right: var(--spacing-m);
bottom: var(--spacing-m);
@media (min-width: ${breakpoint.s}) {
@media (min-width: ${breakpoint.m}) {
position: static;
flex-direction: column;
gap: var(--spacing-s);
justify-self: flex-end;
}
`;

Expand Down Expand Up @@ -167,32 +176,30 @@ const ReservationUnitCard = ({
) : null}
<CardButtonContainer>
<CardContainer>
<Image src={getMainImage(reservationUnit)?.mediumUrl} alt="" />
<PaddedCell>
<ImageCell $src={getMainImage(reservationUnit)?.mediumUrl} />
<ExtraPaddedCell>
<Name>{getTranslation(reservationUnit, "name")}</Name>
<MaxPersonsContainer>
{reservationUnit.maxPersons && (
<>
<IconGroup aria-hidden />
<IconGroup aria-hidden size="s" />
{t("reservationUnitCard:maxPersons", {
count: reservationUnit.maxPersons,
})}
</>
)}
</MaxPersonsContainer>
</PaddedCell>
<PaddedCell>
<DeleteButton
variant="supplementary"
iconLeft={<IconCross aria-hidden />}
size="small"
onClick={() => {
onDelete(reservationUnit);
}}
>
{t("reservationUnitList:buttonRemove")}
</DeleteButton>
</PaddedCell>
</ExtraPaddedCell>
<DeleteButton
variant="supplementary"
iconLeft={<IconCross aria-hidden />}
size="small"
onClick={() => {
onDelete(reservationUnit);
}}
>
{t("reservationUnitList:buttonRemove")}
</DeleteButton>
</CardContainer>
<ArrowContainer>
<Circle passive={first}>
Expand Down
Loading

0 comments on commit 5797197

Please sign in to comment.