fix: contact page aside handling

This commit is contained in:
toni-lyttinen
2022-02-16 15:27:29 +02:00
parent 97a91f1f6f
commit 9fff8dea54
+34 -61
View File
@@ -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 = () => (
<>
<ContactContainer>
<ContentAside>
<TextSection>
<h1>Yhteystiedot</h1>
<p>
Asiaa olisi, mutta kehen ottaa yhteyttä?
<br />
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
</p>
<aside>
<div>
<h6>Toimikuntaluettelo</h6>
<Index committees={orderedCommittees} />
</div>
</ContentAside>
<ContentCenter>
<h1>Yhteystiedot</h1>
<p>
Asiaa olisi, mutta kehen ottaa yhteyttä?
<br />
Tämä sivu yrittää valottaa sen oikean ihmisen sekä vastuualueen.
</p>
{orderedCommittees.map((json) => (
<React.Fragment key={json.slug}>
{(json.slug !== "board") && (
<Divider />
)}
<div id={json.slug}>
</aside>
</TextSection>
<ContactContainer>
<CommitteeContainer committee={json}>
{(json.slug === "board") && (
<TitleContainer>
<p>
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
<BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
hallitus@sahkoinsinoorikilta.fi
</BlueLink>
{". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
</p>
</TitleContainer>
)}
</CommitteeContainer>
</div>
</React.Fragment>
))}
</ContentCenter>
<ContentAside />
{orderedCommittees.map((json) => (
<React.Fragment key={json.slug}>
{(json.slug !== "board") && (
<Divider />
)}
<TextSection id={json.slug}>
<CommitteeContainer committee={json}>
{(json.slug === "board") && (
<p>
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
<BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
hallitus@sahkoinsinoorikilta.fi
</BlueLink>
{". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
</p>
)}
</CommitteeContainer>
</TextSection>
</React.Fragment>
))}
</ContactContainer>
</>
);
export default ContactsPageView;