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