ZHAW/BA_TTS_Annotation_Plattform
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: improve layout spacing and smooth scrolling in calibration views

Browse Source
This commit is contained in:
averel10
2026-03-27 13:18:50 +01:00
parent afcbdc115d
commit 5359685413
6 changed files with 86 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -13,7 +13,7 @@ export default function RootLayout({
<body className="flex flex-col min-h-screen">
<AudioProvider>
<Header />
<main className="flex-grow">
<main className="flex-grow py-4">
{children}
</main>
<Footer />

2
src/app/page.tsx
View File

@@ -46,7 +46,7 @@ export default async function HomePage() {
);
return (
<div className="max-w-2xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-2xl font-bold text-gray-800 mb-2">Experimente</h1>
<p className="text-gray-500 mb-8">
Wählen Sie ein Experiment aus, um mit der Annotation zu beginnen oder fortzufahren.

9
src/components/AnnotationViews/AnnotationPageView.tsx
View File

@@ -47,6 +47,7 @@ export default function AnnotationPageView({
loadScores();
}, [experimentId]);
const getAnnotationConfig = (dialectLabel: string) => {
switch (viewType) {
case 'quality-choice':
@@ -118,6 +119,12 @@ export default function AnnotationPageView({
const currentEntry = entries[currentIndex];
const isComplete = entries.every((e) => e.annotation !== null);
// Smooth scroll to top when current entry changes
useEffect(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, [currentIndex]);
const handlePrevious = () => {
if (currentIndex > 0) {
setCurrentIndex((i) => i - 1);
@@ -245,7 +252,7 @@ export default function AnnotationPageView({
{/* Main content area */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Top bar */}
<div className="sticky top-0 z-40 bg-white border-b border-gray-200 p-4">
<div className="sticky top-0 z-40 bg-white border-b border-gray-200 pb-4 px-4">
<div className="flex items-center justify-between max-w-4xl mx-auto">
{/* Toggle and Home buttons */}
<div className="flex gap-2">

9
src/components/CalibrationViews/CalibrationEntryView.tsx
View File

@@ -49,6 +49,8 @@ export default function CalibrationEntryView({
setSelectedDialect(existingAnswer?.dialectLabel || null);
setSelectedConfidence(existingAnswer?.confidence || null);
setFullyPlayed(existingAnswer ? true : false);
// Scroll to top when entry changes with smooth animation
window.scrollTo({ top: 0, behavior: 'smooth' });
}, [entry, existingAnswer]);
return (
@@ -85,8 +87,10 @@ export default function CalibrationEntryView({
</p>
)}
{/* Questions container */}
<div className="mt-6 flex flex-col lg:flex-row gap-6">
{/* Dialect question */}
<div className="mt-6 mb-4">
<div className="flex-1">
<div className="text-sm font-semibold text-gray-700 mb-3">
Welcher Dialekt ist es?
</div>
@@ -124,7 +128,7 @@ export default function CalibrationEntryView({
</div>
{/* Confidence question */}
<div className="mt-6">
<div className="flex-1">
<div className="text-sm font-semibold text-gray-700 mb-3">
Wie sicher sind Sie?
</div>
@@ -161,5 +165,6 @@ export default function CalibrationEntryView({
</div>
</div>
</div>
</div>
);
}

2
src/components/CalibrationViews/CalibrationInfoView.tsx
View File

@@ -18,7 +18,7 @@ export default function CalibrationInfoView({
<div className="flex-1 flex items-center justify-center px-4">
<div className="max-w-2xl w-full">
{/* Header */}
<div className="text-center mb-12 mt-8">
<div className="text-center mb-4">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Kalibrierungsphase</h1>
</div>

6
src/components/CalibrationViews/CalibrationPageView.tsx
View File

@@ -169,7 +169,7 @@ export default function CalibrationPageView({
<div className="flex flex-col h-full bg-white">
<div className="flex-1 flex flex-col overflow-hidden">
<div className="flex-1 overflow-y-auto">
<div className="max-w-3xl mx-auto py-20 px-4">
<div className="max-w-3xl mx-auto px-4">
<div className="text-center mb-12">
<div className="text-5xl mb-4">🎉</div>
<h1 className="text-3xl font-bold text-green-600 mb-3">
@@ -210,7 +210,7 @@ export default function CalibrationPageView({
<div className="flex flex-col h-full bg-white">
<div className="flex-1 flex flex-col overflow-hidden">
{/* Header with progress */}
<div className="sticky top-0 z-50 bg-white border-b border-gray-200 px-6 py-4">
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-6 pb-4">
<div className="flex items-center justify-between mb-3">
<h1 className="text-xl font-bold text-gray-800">Kalibrierungsphase</h1>
<span className="text-sm text-gray-600">
@@ -241,7 +241,7 @@ export default function CalibrationPageView({
</div>
{/* Navigation footer */}
<div className="sticky bottom-0 bg-white border-t border-gray-200 px-6 py-4 flex gap-3 justify-between">
<div className="sticky bottom-0 bg-white border-t border-gray-200 px-6 pt-4 flex gap-3 justify-between">
<button
onClick={handlePrevious}
disabled={currentIndex === 0 || isPending}