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

many visual alignments

Browse Source
This commit is contained in:
Thomas Ruoff
2020-11-26 00:38:34 +01:00
parent 4801525dc4
commit d546e98ab2
11 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/header.tsx
View File

@@ -1,25 +1,40 @@
import React, { useContext } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import UserContext from './user/context'
import Logo from './logo'
export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
export default function Header({ label }: { label?: string }) {
const { username, role } = useContext(UserContext)
return (
<>
<div className="flex flex-row items-center p-3 my-3 text-white bg-gray-400 rounded-sm">
<h1 className="mr-3 flex-grow text-2xl">
<Link href="/">
<a className="text-indigo-600 font-extrabold">{label}</a>
</Link>
</h1>
<Logo className="w-40 flex-shrink-0 text-white" />
</div>
{username && (
<div className="info-message">
FYI, you are logged in as <strong className="ml-1">{username}</strong>
<Head>
<title>Pfadi-Bussle {label}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="my-3">
<div className="flex flex-row items-center p-3 text-white bg-blue-800 rounded-t-sm">
<h1 className="mr-3 flex-grow text-2xl">
<Link href="/">
<a className="font-extrabold">Pfadi-Bussle</a>
</Link>
</h1>
<Logo className="w-40 flex-shrink-0" />
</div>
)}
{label && (
<div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
{username === 'admin' && (
<div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
Admin
</div>
)}
<h2 className="mr-3 flex-grow">
<span className="font-extrabold">{label}</span>
</h2>
</div>
)}
</div>
</>
)
}

2
components/wizard/index.tsx
View File

@@ -22,7 +22,7 @@ function WizardInternal() {
{dataStoredLoaded && (
<p className="mb-6 info-message">
Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
<a className="link" onClick={forgetData} href="">
<a className="link" onClick={forgetData}>
Daten wieder vergessen
</a>
</p>

9
pages/admin/booking/[uuid]/bill.tsx
View File

@@ -173,10 +173,9 @@ export default function BookingBillPage({
}
return (
<div className="mx-3 flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
<h2 className="text-3xl">Abrechnung</h2>
<>
<Header label="Abrechung" />
<main className="main">
{booking && (
<form className="form" onSubmit={onSubmit}>
<div>
@@ -306,6 +305,6 @@ export default function BookingBillPage({
</main>
<Footer />
</div>
</>
)
}

8
pages/admin/booking/[uuid]/index.tsx
View File

@@ -77,9 +77,9 @@ export default function ShowBookingAdmin({
}
return (
<div className="mx-3 flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
<>
<Header label="Buchung" />
<main className="main py-3">
<h2 className="text-3xl">Buchung {booking.uuid}</h2>
<Calendar start={booking.startDate} end={booking.endDate} />
<div>
@@ -113,6 +113,6 @@ export default function ShowBookingAdmin({
</main>
<Footer />
</div>
</>
)
}

8
pages/admin/index.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Footer from '../../components/footer'
import Header from '../../components/header'
@@ -30,12 +29,7 @@ export const getServerSideProps = withSession(async (context) => {
export default function AdminRecentBookings({ bookings }) {
return (
<>
<Head>
<title>Pfadi Bussle Admin</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle Buchungsliste" />
<Header label="Buchungsliste" />
<main className="main py-3">
{bookings.map((booking: any) => (
<div

8
pages/admin/login.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head'
import Footer from '../../components/footer'
import Header from '../../components/header'
import Input from '../../components/input'
@@ -44,12 +43,7 @@ export default function Login() {
return (
<>
<Head>
<title>Pfadi Bussle Admin</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle Admin Login" />
<Header label="Admin Login" />
<main className="main w-64">
<form className="form" onSubmit={onSubmit}>
<Input

8
pages/book.tsx
View File

@@ -1,4 +1,3 @@
import Head from 'next/head'
import React from 'react'
import Footer from '../components/footer'
import Header from '../components/header'
@@ -7,12 +6,7 @@ import Wizard from '../components/wizard/index'
export default function Home() {
return (
<>
<Head>
<title>Pfadi Bussle</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle" />
<Header label="Anfrage" />
<main className="main">
<Wizard />
</main>

9
pages/booking/[uuid]/index.tsx
View File

@@ -56,10 +56,9 @@ export default function ShowBooking({
}
return (
<div className="mx-3 flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
<h2 className="text-3xl">Ihre Buchung</h2>
<>
<Header label="Ihre Buchung" />
<main className="main">
<div>
<strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
</div>
@@ -85,6 +84,6 @@ export default function ShowBooking({
</main>
<Footer />
</div>
</>
)
}

21
pages/booking/[uuid]/stored.tsx
View File

@@ -24,15 +24,20 @@ export default function ShowBookingStored({
}
return (
<div className="mx-3 flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
<h3>Vielen Dank für die Buchungsanfrage!</h3>
<p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
<>
<Header label="Eingangsbestätigung" />
<main className="main">
<h3 className="text-lg mb-3">Vielen Dank für die Buchungsanfrage</h3>
<p className="mb-6">
Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
</p>
<p>
Den{' '}
<Link href={`/booking/${booking.uuid}`}>
<a className="link">Buchungstatus einsehen</a>
</Link>
<a className="link">Link</a>
</Link>{' '}
zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung
auch jederzeit storniert werden.
</p>
{!storedBookingData && !bookingDataStored && (
<div className="mt-6">
@@ -56,6 +61,6 @@ export default function ShowBookingStored({
</main>
<Footer />
</div>
</>
)
}

39
pages/index.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Footer from '../components/footer'
import Header from '../components/header'
@@ -7,36 +6,23 @@ import Header from '../components/header'
export default function Home() {
return (
<>
<Head>
<title>Pfadi Bussle</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle" />
<Header />
<main className="main">
<div className="sm:text-center lg:text-left">
<div className="mt-6 sm:text-center lg:text-left">
<h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
<span className="block text-indigo-600 xl:inline">
Pfadi-Bussle
</span>{' '}
<span className="block xl:inline">des VCP Rosenfeld e.V.</span>
<span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
<span className="block xl:inline">
Freundeskreis des VCP Rosenfeld e.V.
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Der Freundeskreis des VCP Rosenfeld e.V. unterstützt und fördert die
Jugendarbeit des VCP Rosenfeld auch mit der Bereitstellung des
Pfadi-Bussles.
</p>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Für Fahrten & Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc.
kann man unser Pfadi-Bussle mieten.
</p>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Abgerechnet wird nach gefahrenen Kilometern und Spritverbrauch.
Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man
unser Pfadi-Bussle mieten.
</p>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div className="rounded-md shadow">
<Link href="/book">
<a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg md:px-5">
<a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
Zur Buchungsanfrage
</a>
</Link>
@@ -53,10 +39,13 @@ export default function Home() {
0151 / 21225302
</a>{' '}
oder{' '}
<a href="https://wa.me/4915121225362">
<a
href="https://wa.me/4915121225362"
className="inline-flex flex-row align-baseline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current h-4 inline"
className="fill-current h-3 inline hover:text-gray-700"
viewBox="0 0 738 741"
>
<title>Whatsapp</title>

26
styles/index.css
View File

@@ -40,15 +40,15 @@
}
.flabel {
@apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
@apply block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2;
}
.input-text {
@apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full;
@apply appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight w-full;
}
.input-text:disabled {
@apply bg-gray-300 cursor-not-allowed;
@apply bg-gray-200 cursor-not-allowed;
}
.input-text:focus {
@@ -56,11 +56,11 @@
}
.ibtn {
@apply p-1 text-gray-400 text-xs w-6 h-6 rounded;
@apply p-1 text-gray-300 text-xs w-6 h-6 rounded;
}
.ibtn:hover {
@apply text-gray-500;
@apply text-gray-400;
}
.ibtn:active {
@@ -80,11 +80,11 @@
}
.btn-blue {
@apply bg-blue-500 text-white;
@apply bg-blue-800 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
@apply bg-blue-900;
}
.btn-red {
@@ -96,11 +96,11 @@
}
.btn-gray {
@apply bg-gray-500 text-white;
@apply bg-gray-300 text-white;
}
.btn-gray:hover {
@apply bg-gray-700;
@apply bg-gray-400;
}
.btn:disabled {
@@ -108,15 +108,15 @@
}
.link {
@apply font-medium text-blue-500 underline;
@apply font-medium text-blue-400 underline cursor-pointer;
}
.link:hover {
@apply text-blue-700;
@apply text-blue-600;
}
.info-message {
@apply flex items-center bg-yellow-200 border-solid border border-yellow-700 rounded text-yellow-700 py-2 px-3;
@apply flex items-center bg-yellow-100 border-solid border border-yellow-500 rounded text-yellow-700 py-2 px-3;
}
.info-message:before {
@@ -125,7 +125,7 @@
}
.error-message {
@apply flex items-center bg-red-200 border-solid border border-red-700 rounded text-red-700 py-2 px-3;
@apply flex items-center bg-red-100 border-solid border border-red-700 rounded text-red-700 py-2 px-3;
}
.error-message:before {