From 2eb850364671854217da64bd70d6fdd4776e70f5 Mon Sep 17 00:00:00 2001 From: Han Date: Thu, 20 Jun 2024 20:26:12 +0100 Subject: [PATCH 1/5] TOP-235 switch to service_at_location fields --- .../DetailDialog/DetailDialog.styles.js | 46 +++++++++ .../DetailDialog/LocationAccordion.jsx | 42 +++++--- src/components/DetailDialog/ScheduleTable.jsx | 31 ++++++ src/components/DetailDialog/index.jsx | 98 ++++++------------- 4 files changed, 135 insertions(+), 82 deletions(-) create mode 100644 src/components/DetailDialog/DetailDialog.styles.js create mode 100644 src/components/DetailDialog/ScheduleTable.jsx diff --git a/src/components/DetailDialog/DetailDialog.styles.js b/src/components/DetailDialog/DetailDialog.styles.js new file mode 100644 index 0000000..488cf29 --- /dev/null +++ b/src/components/DetailDialog/DetailDialog.styles.js @@ -0,0 +1,46 @@ +import styled from "styled-components" + +export const Crosshead = styled.h2` + margin-bottom: 15px; + color: ${props => props.theme.styles.text}; +` + +export const CrossheadSub = styled.h3` + margin-bottom: 15px; + color: ${props => props.theme.styles.text}; +` + +export const Columns = styled.div` + margin-bottom: 30px; + &:last-of-type { + margin-bottom: 0px; + } + div { + margin-bottom: 20px; + &:last-of-type { + margin-bottom: 0px; + } + } + @supports (display: grid) { + @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 35px; + row-gap: 25px; + div { + margin-bottom: 0px; + } + } + } +` + +export const Table = styled.table` + width: 100%; + color: ${props => props.theme.styles.text}; + td { + width: 50%; + } + tr:not(:last-child) td { + padding-bottom: 10px; + } +` diff --git a/src/components/DetailDialog/LocationAccordion.jsx b/src/components/DetailDialog/LocationAccordion.jsx index f3a9be3..c14b983 100644 --- a/src/components/DetailDialog/LocationAccordion.jsx +++ b/src/components/DetailDialog/LocationAccordion.jsx @@ -108,41 +108,43 @@ const TickListWithTopMargin = styled(TickList)` margin-top: 25px; ` -const LocationAccordion = ({ locations }) => { +const LocationAccordion = ({ service_at_locations }) => { const [active, setActive] = useState(0) const cookiesAccepted = checkCookiesAccepted() return ( Locations - {locations.map((location, i) => ( -
+ {service_at_locations.map((service_at_location, i) => ( +