fix: scroll issues
This commit is contained in:
@@ -34,6 +34,14 @@ export default function AnnotationPageView({
|
||||
const [isCalibrationModalOpen, setIsCalibrationModalOpen] = useState(false);
|
||||
const [dialectScores, setDialectScores] = useState<Record<string, number>>({});
|
||||
|
||||
// Scroll to top on component mount
|
||||
useEffect(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Load calibration scores on component mount
|
||||
useEffect(() => {
|
||||
const loadScores = async () => {
|
||||
|
||||
@@ -49,10 +49,16 @@ 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]);
|
||||
|
||||
useEffect(() => {
|
||||
// Scroll to top when entry changes
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, [entry.id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface CalibrationInfoViewProps {
|
||||
onContinue: () => void;
|
||||
hasExistingAnswers: boolean;
|
||||
@@ -9,6 +11,13 @@ export default function CalibrationInfoView({
|
||||
onContinue,
|
||||
hasExistingAnswers,
|
||||
}: CalibrationInfoViewProps) {
|
||||
useEffect(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleContinue = () => {
|
||||
onContinue();
|
||||
};
|
||||
|
||||
@@ -6,6 +6,13 @@ import { ExperimentCalibration } from '@/lib/model/experiment_calibration';
|
||||
import CalibrationPageView from './CalibrationPageView';
|
||||
import CalibrationInfoView from './CalibrationInfoView';
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
interface CalibrationPhaseProps {
|
||||
experimentId: number;
|
||||
}
|
||||
@@ -61,12 +68,14 @@ export default function CalibrationPhase({ experimentId }: CalibrationPhaseProps
|
||||
if (showInfoPage) {
|
||||
return (
|
||||
<CalibrationInfoView
|
||||
onContinue={() => setShowInfoPage(false)}
|
||||
onContinue={() => {
|
||||
scrollToTop();
|
||||
setShowInfoPage(false);
|
||||
}}
|
||||
hasExistingAnswers={hasExistingAnswers}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Show calibration page
|
||||
return <CalibrationPageView entries={entries} experimentId={experimentId} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user