🐛 Fix starship position when scrolling content

homostellaris · Nov 15, 2024 · 54100ff · 54100ff
1 parent c094b3a
commit 54100ff
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/components/demo/Journey/index.tsx b/components/demo/Journey/index.tsx
@@ -3,6 +3,7 @@ import Starship from '../../common/Starship'
 import Todos from '../../todos'
 import { Todo } from '../../todos/interfaces'
 import { useWindowSize } from '../../common/useWindowResize'
+import { TodoPosition } from '../../todos/TodoContext'
 
 export default function Journey({ todos }: { todos: Todo[] }) {
 	const currentTodoRef = createRef<HTMLDivElement>()
@@ -52,7 +53,7 @@ function useMaintainScrollOffset(currentTodoRef, todosRef) {
 
 export function useStarshipYPosition(
 	starship: HTMLElement | null,
-	nextTodoPosition: DOMRect | null,
+	nextTodoPosition: TodoPosition,
 	commonAncestor: HTMLElement | null,
 ) {
 	console.debug('Starship position render')
@@ -65,18 +66,20 @@ export function useStarshipYPosition(
 		if (
 			starship === null ||
 			nextTodoPosition === null ||
-			nextTodoPosition.height === null ||
 			commonAncestor === null
 		)
 			return setStarshipY(0)
 
 		const commonAncestorRect = commonAncestor.getBoundingClientRect()
-		const todoDistanceFromCommonAncestor =
-			nextTodoPosition.y - commonAncestorRect.y
+		const todoDistanceFromCommonAncestor = nextTodoPosition.top
 		const starshipHeightAdjustment =
 			(nextTodoPosition.height - starship?.offsetHeight) / 2
+		const additionalOffset = -5 // Just a visual thing to make the center of the rocket align and ignore the tail
 
-		const y = todoDistanceFromCommonAncestor + starshipHeightAdjustment
+		const y =
+			todoDistanceFromCommonAncestor +
+			starshipHeightAdjustment +
+			additionalOffset
 		console.debug(`Setting startship Y to ${y}`, {
 			commonAncestorRect,
 			nextTodoPosition,

diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx
@@ -255,7 +255,11 @@ export const TodoLists = ({}: {}) => {
 					'Setting next todo with ID',
 					nextTodoRef.current.dataset.id,
 				)
-				setNextTodoPosition(nextTodoRef.current.getBoundingClientRect()) // Send this rather than the current ref as if unchanged then is will be memoised and nothing will happen.
+				const domRect = nextTodoRef.current.getBoundingClientRect()
+				setNextTodoPosition({
+					height: domRect.height,
+					top: nextTodoRef.current.offsetTop,
+				}) // Send this rather than the current ref as if unchanged then is will be memoised and nothing will happen.
 			} else {
 				console.debug('No next todo ref')
 				setNextTodoPosition(null) // Send this rather than the current ref as if unchanged then is will be memoised and nothing will happen.
@@ -266,10 +270,7 @@ export const TodoLists = ({}: {}) => {
 	const [present] = useTodoActionSheet()
 
 	return (
-		<IonContent
-			fullscreen
-			ref={contentRef}
-		>
+		<IonContent ref={contentRef}>
 			<IonFab
 				horizontal="end"
 				slot="fixed"
@@ -320,7 +321,7 @@ export const TodoLists = ({}: {}) => {
 									<IonInfiniteScrollContent></IonInfiniteScrollContent>
 								</IonInfiniteScroll>
 								<IonList
-									className="mr-1"
+									className="mr-1 ion-no-padding"
 									id="log-and-wayfinder"
 								>
 									{todos[0].sort(byDate).map(todo => (
@@ -899,11 +900,8 @@ export const Icebox = ({ todos }: { todos: Todo[] }) => {
 	if (todos === undefined) return null
 
 	return (
-		<section
-			className="mt-2"
-			id="icebox"
-		>
-			<IonGrid className="ion-padding-start">
+		<section id="icebox">
+			<IonGrid className="ion-padding-start ion-margin-vertical">
 				<IonRow className="gap-2">
 					{todos.map(todo => (
 						<IonCard

diff --git a/components/todos/TodoContext.tsx b/components/todos/TodoContext.tsx
@@ -9,10 +9,7 @@ import { Todo } from '../db'
 
 export const TodoContext = createContext<{
 	nextTodo: {
-		position: [
-			get: DOMRect | null,
-			set: Dispatch<SetStateAction<DOMRect | null>>,
-		]
+		position: [get: TodoPosition, set: Dispatch<SetStateAction<TodoPosition>>]
 	}
 	selectedTodo: [
 		todo: Todo | null,
@@ -28,7 +25,7 @@ export function TodoContextProvider({
 }: {
 	children: React.ReactNode
 }) {
-	const [nextTodoPosition, setNextTodoPosition] = useState<DOMRect | null>(null)
+	const [nextTodoPosition, setNextTodoPosition] = useState<TodoPosition>(null)
 	const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null)
 
 	return (
@@ -48,3 +45,5 @@ export function TodoContextProvider({
 export default function useTodoContext() {
 	return useContext(TodoContext)
 }
+
+export type TodoPosition = Pick<DOMRect, 'top' | 'height'> | null