TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split Footer content from Footer file

Browse Source
This commit is contained in:
Aarni Halinen
2020-10-09 22:42:46 +03:00
parent f84d8593d2
commit d7c85d46d9
6 changed files with 123 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer/Footer.tsx
+18 -99
View File
@@ -1,12 +1,28 @@
import React from "react";
import styled from "styled-components";
import Anchor from "../Anchor";
import { colors } from "@theme/colors";
import FooterContent from "./FooterContent";
const StyledFooter = styled.footer`
display: flex;
flex-direction: column;
background-color: ${colors.darkBlue};
`;
const CopyRight = styled.div`
display: flex;
flex-flow: row nowrap;
background-color: ${colors.black};
text-align: center;
justify-content: center;
font-size: 12px;
padding: 1rem 0;
p {
padding: 0.5rem 1rem;
margin: 0;
font-size: 14px;
}
a {
color: ${colors.white};
@@ -20,69 +36,6 @@ const StyledFooter = styled.footer`
}
}
p {
color: ${colors.white};
margin: 0;
padding: 0.4rem 0;
font-size: 14px;
}
`;
const Content = styled.div`
display: flex;
& > div:first-of-type {
padding: 48px 0;
flex: 2 1;
& > * {
padding: 0 24px;
}
}
h4 {
color: ${colors.lightBlue};
padding: 24px 0;
}
`;
const MarginSpace = styled.div`
max-width: 600px;
margin: auto;
`;
const Columns = styled.div`
display: flex;
justify-content: space-between;
& > div > div {
margin-bottom: 1rem;
}
`;
const Map = styled.div`
flex: 1;
@media screen and (max-width: 600px) {
display: none;
}
iframe {
border: none;
}
`;
const CopyRight = styled.div`
display: flex;
flex-flow: row nowrap;
background-color: ${colors.black};
text-align: center;
justify-content: center;
font-size: 12px;
padding: 1rem 0;
p {
padding: 0.5rem 1rem;
}
@media screen and (max-width: 600px) {
flex-flow: column nowrap;
}
@@ -90,41 +43,7 @@ const CopyRight = styled.div`
const Footer: React.FC = () => (
<StyledFooter>
<Content>
<div>
<MarginSpace>
<h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
<Columns>
<div>
<div>
<p>TUAS-Talo</p>
<p>Maarintie 8</p>
<p>PL 15500, 00076 Aalto</p>
</div>
<div>
<p>Y-tunnus: 1627010-1</p>
<p>sik-hallitus@list.ayy.fi</p>
<Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
</div>
</div>
<div>
<Anchor to="/jaseneksi">Jäseneksi</Anchor>
<Anchor to="/palaute">Palaute</Anchor>
<Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
<Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
</div>
</Columns>
</MarginSpace>
</div>
<Map>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
width="100%"
height="100%"
/>
</Map>
</Content>
<FooterContent />
<CopyRight>
<p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
<a href="mailto:sik-vtmk@list.ayy.fi">webmaster: sik-vtmk@list.ayy.fi</a>
src/components/Footer/FooterContent.tsx
+104
View File
@@ -0,0 +1,104 @@
import React from "react";
import styled from "styled-components";
import Anchor from "../Anchor";
import { colors } from "@theme/colors";
const Content = styled.div`
display: flex;
& > div:first-of-type {
padding: 48px 0;
flex: 2 1;
& > * {
padding: 0 24px;
}
}
h4 {
color: ${colors.lightBlue};
padding: 24px 0;
}
a {
color: ${colors.white};
display: block;
text-decoration: underline;
padding: 0.4rem 0;
font-size: 14px;
&:hover {
text-decoration: none;
}
}
p {
color: ${colors.white};
margin: 0;
padding: 0.4rem 0;
font-size: 14px;
}
`;
const MarginSpace = styled.div`
max-width: 600px;
margin: auto;
`;
const Columns = styled.div`
display: flex;
justify-content: space-between;
& > div > div {
margin-bottom: 1rem;
}
`;
const Map = styled.div`
flex: 1;
@media screen and (max-width: 600px) {
display: none;
}
iframe {
border: none;
}
`;
const FooterContent: React.FC = () => (
<Content>
<div>
<MarginSpace>
<h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
<Columns>
<div>
<div>
<p>TUAS-Talo</p>
<p>Maarintie 8</p>
<p>PL 15500, 00076 Aalto</p>
</div>
<div>
<p>Y-tunnus: 1627010-1</p>
<p>sik-hallitus@list.ayy.fi</p>
<Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
</div>
</div>
<div>
<Anchor to="/jaseneksi">Jäseneksi</Anchor>
<Anchor to="/palaute">Palaute</Anchor>
<Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
<Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
</div>
</Columns>
</MarginSpace>
</div>
<Map>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
width="100%"
height="100%"
/>
</Map>
</Content>
)
export default FooterContent;
src/components/Footer/index.ts
-2
View File
@@ -1,2 +0,0 @@
import Footer from "./Footer";
export default Footer;
src/components/FooterMap/FooterMap.tsx
-16
View File
@@ -1,16 +0,0 @@
import React from "react";
import styled from "styled-components";
const IFrame = styled.iframe`
`;
const FooterMap: React.FC = () => (
<IFrame
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
width="600"
height="350"
/>
)
export default FooterMap;
src/components/FooterMap/index.ts
-2
View File
@@ -1,2 +0,0 @@
import FooterMap from "./FooterMap";
export default FooterMap;
src/pages/CommonPage.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from "react";
import Header from "@components/Header";
import Footer from "@components/Footer";
import Footer from "@components/Footer/Footer";
export interface CommonPageProps {
page: any;