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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user