Mobile support and Footer

lagmoellertim · Feb 18, 2019 · bac5870 · bac5870
1 parent 51f7e4e
commit bac5870
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 3 deletions.
diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 import reducer from './store/reducer';
 import devToolsEnhancer from 'remote-redux-devtools';
+import Footer from './components/footer/Footer';
 
 class App extends Component {
 	constructor() {
@@ -20,6 +21,7 @@ class App extends Component {
 				<Layout className={AppCSS.layout}>
 					<Header />
 					<Body />
+					<Footer />
 				</Layout>
 			</Provider>
 		);

diff --git a/src/App.module.css b/src/App.module.css
@@ -1,3 +1,5 @@
 .layout {
-  height: 100vh;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/components/body/body.module.css b/src/components/body/body.module.css
@@ -1,7 +1,7 @@
 .body {
     background-color: #15D0B3;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex: auto;
 }
diff --git a/src/components/body/container/Container.module.css b/src/components/body/container/Container.module.css
@@ -1,14 +1,18 @@
 .container {
     background: white;
-    width: 550px;
+    max-width: 600px;
     padding: 3rem;
     border-radius: .5rem;
+    margin: 20px 0;
     font-family: Montserrat;
 }
 
 @media(max-width: 768px) {
     .container {
         background: white;
+        margin: 20px 0;
+        padding: 1.5rem;
+
         width: calc(100% - 10vh);
     }
 }

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Layout, Icon } from 'antd';
+import FooterCSS from './Footer.module.css';
+
+const Footer = () => {
+	return (
+		<Layout.Footer className={FooterCSS.footer}>
+			<div className={FooterCSS.footerContainer}>
+				<p>
+					Made with <Icon type="heart" theme="filled" /> by{' '}
+					<a href="https://lagmoellertim.de">Tim-Luca Lagmöller</a>
+				</p>
+				<a href="http://donate.lagmoellertim.de">Donate</a>
+			</div>
+		</Layout.Footer>
+	);
+};
+
+export default Footer;
diff --git a/src/components/footer/Footer.module.css b/src/components/footer/Footer.module.css
@@ -0,0 +1,25 @@
+.footerContainer {
+    display: flex;
+    flex: none;
+    justify-content: space-between;
+}
+
+.footerContainer p {
+    margin: 0;
+}
+
+.footerContainer p i {
+    color: #f50000;
+}
+
+.footerContainer a {
+    color: black;
+}
+
+.footerContainer p a {
+    font-weight: bold;
+}
+
+.footerContainer a:hover {
+    color: rgb(211, 0, 0);
+}
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
@@ -1,6 +1,7 @@
 .header {
     display: flex;
     justify-content: space-between;
+    flex: none;
 }
 
 .header .brand h1 {

diff --git a/src/index.css b/src/index.css
@@ -8,6 +8,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+}
+
 * {
   box-sizing: border-box;
 }