From bac58707cb0a5287d3115a328ed16daf50ab0de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim-Luca=20Lagm=C3=B6ller?= <lagmoellertim@gmail.com>
Date: Mon, 18 Feb 2019 17:59:59 +0100
Subject: [PATCH] Mobile support and Footer
---
src/App.js | 2 ++
src/App.module.css | 4 ++-
src/components/body/body.module.css | 2 +-
.../body/container/Container.module.css | 6 ++++-
src/components/footer/Footer.jsx | 19 ++++++++++++++
src/components/footer/Footer.module.css | 25 +++++++++++++++++++
src/components/header/header.module.css | 1 +
src/index.css | 6 +++++
8 files changed, 62 insertions(+), 3 deletions(-)
create mode 100644 src/components/footer/Footer.jsx
create mode 100644 src/components/footer/Footer.module.css
diff --git a/src/App.js b/src/App.js
index d37c169..77cf9c5 100755
--- 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
index 676495a..2b7f631 100755
--- 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;
}
\ No newline at end of file
diff --git a/src/components/body/body.module.css b/src/components/body/body.module.css
index 8410135..c3b1c75 100644
--- 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;
}
\ No newline at end of file
diff --git a/src/components/body/container/Container.module.css b/src/components/body/container/Container.module.css
index 40e923b..d1ee9ad 100644
--- 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
new file mode 100644
index 0000000..e8a937f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5a35a53
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
index bcf48cc..7ce8bbf 100644
--- 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
index c62723b..79e9405 100755
--- 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;
}
\ No newline at end of file