make footer sticky

components/dateSelect.js

@@ -87,7 +87,7 @@ export default function DateSelect() {
           formatDate={dateFormat}
           parseDate={parseDate}
           dayPickerProps={{
-            className: 'Selectable',
+            className: 'datepicker',
             selectedDays: [from, { from, to }],
             disabledDays,
             modifiers,
@@ -95,7 +95,7 @@ export default function DateSelect() {
           }}
           onDayChange={(from) => setRange({ ...range, from })}
         />
-        <Form.Label className="px-2">bis</Form.Label>
+        <Form.Label className="px-2">-</Form.Label>
         <DayPickerInput
           ref={toRef}
           component={Form.Control}
@@ -105,7 +105,7 @@ export default function DateSelect() {
           formatDate={dateFormat}
           parseDate={parseDate}
           dayPickerProps={{
-            className: 'Selectable',
+            className: 'datepicker',
             selectedDays: [from, { from, to }],
             disabledDays,
             modifiers,

components/footer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Card from 'react-bootstrap/Card'
+
+export default function Footer() {
+  return (
+    <footer className="mt-5 mb-2">
+      <Card>
+        <Card.Body>
+          <Card.Title>i.A. des Freundeskreis des VCP Rosenfeld</Card.Title>
+          <Card.Text>
+            Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw.
+            geben.
+          </Card.Text>
+        </Card.Body>
+      </Card>
+    </footer>
+  )
+}

pages/index.js

@@ -3,6 +3,7 @@ import React from 'react'
 import Head from 'next/head'
 
 import Wizard from '../components/wizard'
+import Footer from '../components/footer'
 
 export default function Home() {
   return (
@@ -12,7 +13,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
+      <main className="main">
         <h1>Pfadi Bussle Buchen</h1>
 
         <p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
@@ -20,9 +21,7 @@ export default function Home() {
         <Wizard />
       </main>
 
-      <footer>
-        <a>Freundeskreis des VCP Rosenfeld</a>
-      </footer>
+      <Footer />
 
       <style jsx global>{`
         html,
@@ -38,23 +37,33 @@ export default function Home() {
           box-sizing: border-box;
         }
 
-        .Selectable
+        .container {
+          display: flex;
+          min-height: 100vh;
+          flex-direction: column;
+        }
+
+        .main {
+          flex: 1;
+        }
+
+        .datepicker
           .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
           background-color: #f0f8ff !important;
           color: #4a90e2;
         }
-        .Selectable .DayPicker-Day {
+        .datepicker .DayPicker-Day {
           border-radius: 0 !important;
         }
-        .Selectable .DayPicker-Day--start {
+        .datepicker .DayPicker-Day--start {
           border-top-left-radius: 50% !important;
           border-bottom-left-radius: 50% !important;
         }
-        .Selectable .DayPicker-Day--end {
+        .datepicker .DayPicker-Day--end {
           border-top-right-radius: 50% !important;
           border-bottom-right-radius: 50% !important;
         }
-        .Selectable .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
+        .datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
           color: #505050;
           background-color: #fcc;
         }