Apply Anpassung_1: art-specific object logic, responsive design, remove Kuppel field

- Sonnenführung: fixes Sonne as sole object, no selector shown
- BEO-Sitzung / Technischer Dienst: object field hidden, DB stays empty
- Kuppel field removed from form (determined by active tab)
- Responsive layout: single-column on mobile, side-by-side on sm+
- Touch-friendly input sizes (py-3, text-base)
- Compact header and tab labels on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-27 18:05:40 +02:00
parent 12be2f1db2
commit 6a655212bf
4 changed files with 125 additions and 85 deletions

View File

@@ -43,17 +43,22 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
}
return (
<div className="min-h-screen bg-white py-4 px-4">
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">Logbuch Sternwarte Welzheim</h1>
<div className="flex items-center gap-4">
<span className="text-sm text-gray-600">
<div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4">
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#FFFFDD]">
{/* Header */}
<div className="flex justify-between items-start sm:items-center mb-4 gap-2">
<h1 className="text-xl sm:text-3xl font-bold leading-tight">
Logbuch<span className="hidden sm:inline"> Sternwarte Welzheim</span>
</h1>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs sm:text-sm text-gray-600 hidden sm:inline">
{kuerzel} {beoName}
</span>
<span className="text-xs text-gray-600 sm:hidden">{kuerzel}</span>
<button
onClick={handleLogout}
className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
>
Abmelden
</button>
@@ -61,24 +66,25 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
</div>
{/* Kuppel-Tabs */}
<div className="flex gap-1 mb-4 border-b-2 border-gray-300">
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
{KUPPELN.map((k) => (
<button
key={k}
onClick={() => { setActiveKuppel(k); setEditEntry(null); }}
className={`px-5 py-2 text-sm font-medium rounded-t-lg transition-colors ${
className={`px-3 sm:px-5 py-2 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${
activeKuppel === k
? 'bg-[#85B7D7] text-black border-2 border-b-0 border-gray-300'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
Kuppel {k}
<span className="sm:hidden">{k}</span>
<span className="hidden sm:inline">Kuppel {k}</span>
</button>
))}
</div>
{/* Eingabe/Liste-Tabs */}
<div className="flex gap-1 mb-6 border-b border-gray-200">
<div className="flex gap-1 mb-5 border-b border-gray-200">
{(['eingabe', 'liste'] as const).map((tab) => (
<button
key={tab}
@@ -119,14 +125,14 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
/>
)}
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
<footer className="mt-8 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
<div>
<a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
mailto:rxf@gmx.de
rxf@gmx.de
</a>
</div>
<div className="text-right">
Version {version} {buildDate}
v{version} {buildDate}
</div>
</footer>
</main>