tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-04 15:07:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

make footer sticky

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-12 00:38:16 +02:00
parent f6c2d0d6b6
commit 0606d643e7
3 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/dateSelect.js
View File

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

19
components/footer.js Normal file
View File

@@ -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>
)
}

27
pages/index.js
View File

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