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

ditch boostrap and use tailwind instead

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-13 23:45:44 +02:00
parent 9554793520
commit 9485d936b3
13 changed files with 1102 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/contact.js
View File

@@ -2,9 +2,6 @@ import React, { useContext } from 'react'
import { WizardContext } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
@@ -12,68 +9,77 @@ export default function Contact() {
return (
<>
<Form.Group>
<Form.Label>
Name <Required />
</Form.Label>
<Form.Control
type="text"
name="name"
value={name}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
E-Mail <Required />
</Form.Label>
<Form.Control
type="email"
name="email"
value={email}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
Straße <Required />
</Form.Label>
<Form.Control
type="text"
name="street"
value={street}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Row>
<Form.Group as={Col} xs={4}>
<Form.Label>
<div className="fsw">
<div className="fs">
<label className="flabel">
Name <Required />
</label>
<input
type="text"
name="name"
value={name}
onChange={onChangeEvent}
required
className="input-text"
/>
</div>
</div>
<div className="fsw">
<div className="fs">
<label className="flabel">
E-Mail <Required />
</label>
<input
type="email"
name="email"
value={email}
onChange={onChangeEvent}
required
className="input-text"
/>
</div>
</div>
<div className="fsw">
<div className="fs">
<label className="flabel">
Straße <Required />
</label>
<input
type="text"
name="street"
value={street}
onChange={onChangeEvent}
required
className="input-text"
/>
</div>
</div>
<div className="fsw">
<div className="fs">
<label className="flabel">
PLZ <Required />
</Form.Label>
<Form.Control
</label>
<input
type="text"
name="zip"
value={zip}
onChange={onChangeEvent}
required
className="input-text"
/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>
<label className="flabel">
Stadt <Required />
</Form.Label>
<Form.Control
</label>
<input
type="text"
name="city"
value={city}
onChange={onChangeEvent}
required
className="input-text"
/>
</Form.Group>
</Form.Row>
</div>
</div>
</>
)
}

32
components/dateSelect.js
View File

@@ -3,9 +3,6 @@ import useSWR from 'swr'
import { WizardContext } from '../context/wizardStore'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import { DateUtils } from 'react-day-picker'
import DayPickerInput from 'react-day-picker/DayPickerInput'
@@ -74,14 +71,14 @@ export default function DateSelect() {
}
return (
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum <Required />
</Form.Label>
<Form.Group>
<div className="fsw">
<div className="fs">
<label className="flabel">
Datum <Required />
</label>
<DayPickerInput
ref={fromRef}
component={Form.Control}
inputProps={{ className: 'input-text w-32' }}
value={from}
placeholder="Von"
formatDate={dateFormat}
@@ -95,11 +92,10 @@ export default function DateSelect() {
}}
onDayChange={(from) => setRange({ ...range, from })}
/>
<Form.Label className="px-2">-</Form.Label>
<label className="px-2">-</label>
<DayPickerInput
ref={toRef}
component={Form.Control}
inputProps={{ disabled: !from }}
inputProps={{ className: 'input-text w-32', disabled: !from }}
value={to}
placeholder="Bis"
formatDate={dateFormat}
@@ -115,14 +111,10 @@ export default function DateSelect() {
}}
onDayChange={(to) => setRange({ ...range, to })}
/>
<Button
className="ml-2"
variant="outline-secondary"
onClick={() => setRange({})}
>
<button onClick={() => setRange({})} className="btn btn-gray">
Zurücksetzen
</Button>
</Form.Group>
</Form.Group>
</button>
</div>
</div>
)
}

15
components/footer.js
View File

@@ -1,19 +1,12 @@
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>
<p>i.A. des Freundeskreis des VCP Rosenfeld</p>
<p>
Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.
</p>
</footer>
)
}

80
components/reason.js
View File

@@ -2,48 +2,58 @@ import React, { useContext } from 'react'
import { WizardContext } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
const { formDataChanged } = state
const { purpose, destination, org } = state.formData
return (
<>
<Form.Group>
<Form.Label>
Zweck der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="purpose"
value={purpose}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>Verein</Form.Label>
<Form.Control
type="text"
name="org"
value={org}
onChange={onChangeEvent}
/>
</Form.Group>
<Form.Group>
<Form.Label>
Ziel der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="destination"
value={destination}
onChange={onChangeEvent}
required
/>
</Form.Group>
<div className="fsw">
<div className="fs">
<label className="flabel">
Zweck der Fahrt <Required />
</label>
<input
type="text"
name="purpose"
value={purpose}
onChange={onChangeEvent}
required
className={`input-text ${
formDataChanged.includes('purpose') && 'input-changed'
}`}
/>
</div>
</div>
<div className="fsw">
<div className="fs">
<label className="flabel">
Ziel der Fahrt <Required />
</label>
<input
type="text"
name="destination"
value={destination}
onChange={onChangeEvent}
required
className="input-text"
/>
</div>
</div>
<div className="fsw">
<div className="fs">
<label className="flabel">Verein</label>
<input
type="text"
name="org"
value={org}
onChange={onChangeEvent}
className="input-text"
/>
</div>
</div>
</>
)
}

35
components/wizard.js
View File

@@ -1,8 +1,5 @@
import React, { useContext } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import WizardStore, { WizardContext } from '../context/wizardStore'
import DateSelect from './dateSelect'
@@ -24,21 +21,22 @@ function WizardInternal() {
return (
<>
<h3>Danke, die Buchung ist in Bearbeitung!</h3>
<p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
<p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
{typeof dataStored !== 'boolean' && (
<>
<p>
Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
für die nächste Buchung gespeichert werden?
</p>
<Button onClick={() => storeData(true)}>Ja, bitte speichern</Button>
<Button
<button onClick={() => storeData(true)} className="btn btn-blue">
Ja, bitte speichern
</button>
<button
onClick={() => storeData(false)}
className="ml-2"
variant="secondary"
className="btn btn-grey ml-2"
>
Nein danke
</Button>
</button>
</>
)}
{dataStored === true && (
@@ -49,7 +47,8 @@ function WizardInternal() {
}
return (
<Form
<form
className="w-full max-w-lg"
onSubmit={(event) => {
event.preventDefault()
onSubmit()
@@ -57,20 +56,20 @@ function WizardInternal() {
>
{dataStoredLoaded && (
<p>
Gespeicherte Daten aus Deinem Browser geladen.{' '}
<Button size="sm" variant="outline-secondary" onClick={forgetData}>
Daten wieder Vergessen
</Button>
Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
<a onClick={forgetData}>Daten vergessen</a>
</p>
)}
<DateSelect />
<Reason />
<Contact />
<div>{postDataError}</div>
<Button type="submit" disabled={postData}>
{postData ? 'Speichern...' : 'Absenden'}
</Button>
</Form>
<div>
<button type="submit" disabled={postData} className="btn btn-blue">
{postData ? 'Speichern...' : 'Absenden'}
</button>
</div>
</form>
)
}

5
context/wizardStore.js
View File

@@ -23,6 +23,10 @@ function reducer(state, action) {
...state.formData,
...action.payload,
},
formDataChanged: [
...state.formDataChanged,
...Object.keys(action.payload),
],
}
case ACTIONS.POST_DATA:
return {
@@ -98,6 +102,7 @@ const initialState = {
zip: '',
city: '',
},
formDataChanged: [],
}
async function createBooking(formData) {

986
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -10,12 +10,10 @@
"test:ci": "jest"
},
"dependencies": {
"bootstrap": "^4.5.0",
"moment": "^2.27.0",
"mongoose": "^5.9.25",
"next": "^9.5.0",
"react": "16.13.1",
"react-bootstrap": "^1.3.0",
"react-day-picker": "^7.4.8",
"react-dom": "16.13.1",
"rebass": "^4.0.7",
@@ -25,6 +23,9 @@
"babel-jest": "^26.2.2",
"eslint": "^7.5.0",
"eslint-plugin-react": "^7.20.5",
"jest": "^26.2.2"
"jest": "^26.2.2",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"tailwindcss": "^1.6.2"
}
}

3
pages/_app.js
View File

@@ -1,6 +1,7 @@
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/index.css'
import 'react-day-picker/lib/style.css'
import 'moment'

56
pages/index.js
View File

@@ -7,67 +7,23 @@ import Footer from '../components/footer'
export default function Home() {
return (
<div className="container">
<div className="mx-3 flex flex-col min-h-screen">
<Head>
<title>Pfadi Bussle Buchen</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="main">
<h1>Pfadi Bussle Buchen</h1>
<main className="flex-grow">
<h1 className="text-3xl">Pfadi Bussle Buchen</h1>
<p>Du willst das Pfadi Bussle buchen? Hier bist du richtig!</p>
<p className="mb-8">
Du willst das Pfadi Bussle buchen? Hier bist du richtig!
</p>
<Wizard />
</main>
<Footer />
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
.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;
}
.datepicker .DayPicker-Day {
border-radius: 0 !important;
}
.datepicker .DayPicker-Day--start {
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
}
.datepicker .DayPicker-Day--end {
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
}
.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
color: #505050;
background-color: #fcc;
}
`}</style>
</div>
)
}

18
postcss.config.js Normal file
View File

@@ -0,0 +1,18 @@
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
],
}

92
styles/index.css Normal file
View File

@@ -0,0 +1,92 @@
@tailwind base;
/* Write your own custom base styles here */
/* Start purging... */
@tailwind components;
/* Stop purging. */
/* Start purging... */
@tailwind utilities;
/* Stop purging. */
/* Your own custom utilities */
.fsw {
@apply flex flex-wrap -mx-3 mb-2;
}
.fs {
@apply w-full px-3 mb-2;
}
.flabel {
@apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}
.input-text {
@apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight;
}
.input-text:disabled {
@apply bg-gray-300 cursor-not-allowed;
}
.input-text:focus {
@apply outline-none bg-white;
}
.input-text.input-changed:invalid {
@apply border-red-500;
}
.btn {
@apply font-bold py-2 px-4 rounded mx-2;
}
.btn:first-child {
@apply ml-0;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
.btn-gray {
@apply bg-gray-500 text-white;
}
.btn-gray:hover {
@apply bg-gray-700;
}
/*@screen md {
.fs {
@apply w-1/2 mb-0;
}
}*/
.datepicker
.DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
background-color: #f0f8ff !important;
color: #4a90e2;
}
.datepicker .DayPicker-Day {
border-radius: 0 !important;
}
.datepicker .DayPicker-Day--start {
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
}
.datepicker .DayPicker-Day--end {
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
}
.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
color: #505050;
background-color: #fcc;
}

12
tailwind.config.js Normal file
View File

@@ -0,0 +1,12 @@
module.exports = {
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333',
},
},
},
variants: {},
plugins: [],
}