v1.1.0: Druck-Optimierung, UI-Verbesserungen
- Drucklayout: kein innerer Rahmen, volle DIN-A4-Breite, @page-Regel - Besucher-Spalte: zeigt keine 0 an wenn kein Wert eingetragen - Beginn-Zeit synchronisiert automatisch die Ende-Zeit - Hintergrundfarbe auf helles Blau (#EEF4FF) - Listen-Tab und kompakte Vorschau mit weißem Rahmen - Besucher-Spalte schmaler, Header als "Bes." abgekürzt - Drucken-Button im Listen-Tab, Navigation bei Druck ausgeblendet Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -43,11 +43,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<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]">
|
||||
<div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4 print:p-0">
|
||||
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#EEF4FF] print:max-w-none print:border-0 print:p-0 print:bg-white">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start sm:items-center mb-4 gap-2">
|
||||
<div className="flex justify-between items-start sm:items-center mb-4 gap-2 print:hidden">
|
||||
<h1 className="text-xl sm:text-2xl font-bold leading-tight">
|
||||
<span className="hidden sm:inline">Sternwarte-Welzheim </span>
|
||||
Logbuch für {activeKuppel}-Kuppel
|
||||
@@ -63,7 +63,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Kuppel-Tabs */}
|
||||
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
|
||||
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto print:hidden">
|
||||
{KUPPELN.map((k) => (
|
||||
<button
|
||||
key={k}
|
||||
@@ -81,7 +81,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Eingabe/Liste-Tabs */}
|
||||
<div className="flex gap-1 mb-4 border-b border-gray-200">
|
||||
<div className="flex gap-1 mb-4 border-b border-gray-200 print:hidden">
|
||||
{(['eingabe', 'liste'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
@@ -115,37 +115,54 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
|
||||
{/* Kompakte Liste — nur auf Desktop sichtbar */}
|
||||
<div className="hidden lg:block mt-5 border-t-2 border-gray-300 pt-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
|
||||
<button
|
||||
onClick={() => setActiveTab('liste')}
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Alle anzeigen →
|
||||
</button>
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
|
||||
<button
|
||||
onClick={() => setActiveTab('liste')}
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Alle anzeigen →
|
||||
</button>
|
||||
</div>
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={5}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={5}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Liste-Tab: vollständige Liste */}
|
||||
{activeTab === 'liste' && (
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={20}
|
||||
/>
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
|
||||
<div className="flex justify-between items-center mb-2 print:hidden">
|
||||
<span className="text-sm font-semibold text-gray-600">Einträge {activeKuppel}-Kuppel</span>
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"
|
||||
>
|
||||
🖨 Drucken
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden print:block mb-4">
|
||||
<div className="text-lg font-bold">Sternwarte Welzheim — Logbuch {activeKuppel}-Kuppel</div>
|
||||
<div className="text-sm text-gray-500">Ausdruck vom {new Date().toLocaleDateString('de-DE')}</div>
|
||||
</div>
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={20}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
|
||||
<footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
|
||||
<div>
|
||||
<a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
|
||||
rxf@gmx.de
|
||||
|
||||
Reference in New Issue
Block a user