From 97a91f1f6f006be6c65a94fe2b2ca35085d4e103 Mon Sep 17 00:00:00 2001 From: toni-lyttinen Date: Wed, 16 Feb 2022 14:57:26 +0200 Subject: [PATCH 1/2] fix: contact page styling --- src/components/ContactCard.tsx | 10 +- src/views/ContactsPage/ContactsPageView.tsx | 124 ++++++++++++++------ 2 files changed, 96 insertions(+), 38 deletions(-) diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx index d88c272..b1aa8a2 100644 --- a/src/components/ContactCard.tsx +++ b/src/components/ContactCard.tsx @@ -18,8 +18,8 @@ const Row = styled.div` const ImageContainer = styled.div` position: relative; - height: 150px; - width: 150px; + height: 125px; + width: 125px; flex-shrink: 0; img { @@ -33,17 +33,17 @@ const Info = styled.div` flex-direction: column; align-items: flex-start; margin-left: -20px; - min-width: 225px; + min-width: 150px; padding: 2rem; color: ${colors.darkBlue}; & > p { - font-size: 1.1rem; + font-size: 1.0rem; margin: 0; } & > h3 { - font-size: 1.4rem; + font-size: 1.2rem; font-weight: 500; } `; diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index dc8646c..61d525d 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -70,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees const Container = styled.div` color: ${colors.darkBlue}; + align-items: center; + justify-content: center; + width: 50vw; & > h2 { text-transform: uppercase; + font-size: 4rem; width: 100%; } @@ -80,15 +84,63 @@ const Container = styled.div` display: flex; flex-flow: row wrap; } + + @media (max-width: 950px) { + width: 100vw; + } +`; + +const ContactContainer = styled.div` + display: flex; + flex-direction: row; + @media (max-width: 950px) { + flex-direction: column; + } +`; + +const ContentCenter = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 60vw; + padding: 15px 15px; + overflow-x: hidden; + @media (max-width: 950px) { + width: 100vw; + } +`; + +const ContentAside = styled.div` + display: flex; + width: 20vw; + padding: 15px 15px; + @media (max-width: 950px) { + justify-content: center; + align-items: center; + width: 100%; + } +`; + +const TitleContainer = styled.div` + display: flex; + width: 100%; + align-items: center; + justify-content: center; + padding: 10px 10px; + flex-direction: column; + margin: auto; `; const CommitteeContainer: React.FC<{ committee: Committee; }> = ({ committee, children }) => ( -

- {committee.name_fi || committee.name_en} -

+ +

+ {committee.name_fi || committee.name_en} +

+
{committee.roles.map((role) => ( role.representatives.map((representative) => ( @@ -129,41 +181,47 @@ interface Representative { const ContactsPageView: React.FC = () => ( <> - -

Yhteystiedot

-

- Asiaa olisi, mutta kehen ottaa yhteyttä? -
- Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta. -

- - - - {orderedCommittees.map((json) => ( - - {(json.slug !== "board") && ( - - )} - - - {(json.slug === "board") && ( -

- {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} - - hallitus@sahkoinsinoorikilta.fi - - {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} -

+ + +

Yhteystiedot

+

+ Asiaa olisi, mutta kehen ottaa yhteyttä? +
+ Tämä sivu yrittää valottaa sen oikean ihmisen sekä vastuualueen. +

+ {orderedCommittees.map((json) => ( + + {(json.slug !== "board") && ( + )} - - - - ))} +
+ + + {(json.slug === "board") && ( + +

+ {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} + + hallitus@sahkoinsinoorikilta.fi + + {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} +

+ + )} + +
+ + + ))} + + + ); From 9fff8dea54acef738272f3907ac17606d1bd5595 Mon Sep 17 00:00:00 2001 From: toni-lyttinen Date: Wed, 16 Feb 2022 15:27:29 +0200 Subject: [PATCH 2/2] fix: contact page aside handling --- src/views/ContactsPage/ContactsPageView.tsx | 95 ++++++++------------- 1 file changed, 34 insertions(+), 61 deletions(-) diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index 61d525d..312f292 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -91,34 +91,10 @@ const Container = styled.div` `; const ContactContainer = styled.div` - display: flex; - flex-direction: row; - @media (max-width: 950px) { - flex-direction: column; - } -`; - -const ContentCenter = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 60vw; - padding: 15px 15px; + margin-top: -13rem; overflow-x: hidden; @media (max-width: 950px) { - width: 100vw; - } -`; - -const ContentAside = styled.div` - display: flex; - width: 20vw; - padding: 15px 15px; - @media (max-width: 950px) { - justify-content: center; - align-items: center; - width: 100%; + margin-top: 0; } `; @@ -181,48 +157,45 @@ interface Representative { const ContactsPageView: React.FC = () => ( <> - - + +

Yhteystiedot

+

+ Asiaa olisi, mutta kehen ottaa yhteyttä? +
+ Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta. +

+ + + - - {(json.slug === "board") && ( - -

- {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} - - hallitus@sahkoinsinoorikilta.fi - - {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} -

- - )} - -
- - - ))} - - + {orderedCommittees.map((json) => ( + + {(json.slug !== "board") && ( + + )} + + + {(json.slug === "board") && ( +

+ {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} + + hallitus@sahkoinsinoorikilta.fi + + {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} +

+ )} + + + + ))} ); + export default ContactsPageView;