isaacphysics · axlewin · May 23, 2025 · May 19, 2025 · May 19, 2025 · May 19, 2025
diff --git a/cypress/support/component-index-ada.html b/cypress/support/component-index-ada.html
@@ -29,6 +29,6 @@
     <title>Ada Computer Science</title>
   </head>
   <body>
-    <div data-cy-root></div>
+    <div data-cy-root id="root" data-reduced-motion="true"></div>
   </body>
 </html>
diff --git a/cypress/support/component-index-phy.html b/cypress/support/component-index-phy.html
@@ -29,6 +29,6 @@
     <title>Isaac Science</title>
 </head>
 <body data-bs-theme="neutral">
-<div data-cy-root id="root"></div>
+<div data-cy-root id="root" data-reduced-motion="true"></div>
 </body>
 </html>
diff --git a/src/app/components/content/IsaacQuestion.tsx b/src/app/components/content/IsaacQuestion.tsx
@@ -284,9 +284,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                 }
             </div>
             {/* Physics Hints */}
-            {isPhy && <div>
-                <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />
-            </div>}
+            {isPhy && <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />}
         </Form>
 
         {/* LLM free-text question validation response */}

diff --git a/src/app/components/elements/Book.tsx b/src/app/components/elements/Book.tsx
@@ -10,6 +10,7 @@ import { BookPage } from "./BookPage";
 import { skipToken } from "@reduxjs/toolkit/query";
 import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
 import { TeacherNotes } from "./TeacherNotes";
+import { EditContentButton } from "./EditContentButton";
 
 interface BookProps {
     match: { params: { bookId: string } };
@@ -62,6 +63,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                                     thenRender={(bookDetailPage) => <BookPage page={bookDetailPage} />}
                                 />
                                 : <>
+                                    <EditContentButton doc={definedBookIndexPage}/>
                                     <TeacherNotes notes={definedBookIndexPage.teacherNotes} />
                                     <div>
                                         <div className="book-image-container mx-3 float-end">

diff --git a/src/app/components/elements/BookPage.tsx b/src/app/components/elements/BookPage.tsx
@@ -3,14 +3,18 @@ import { IsaacContentValueOrChildren } from "../content/IsaacContentValueOrChild
 import { ListView } from "./list-groups/ListView";
 import { IsaacBookDetailPageDTO } from "../../../IsaacApiTypes";
 import { TeacherNotes } from "./TeacherNotes";
+import { Markup } from "./markup";
+import { EditContentButton } from "./EditContentButton";
 
 export const BookPage = ({ page }: { page: IsaacBookDetailPageDTO }) => {
 
     return <div className="book-page">
         <>
+            <EditContentButton doc={page}/>
+
             <TeacherNotes notes={page.teacherNotes} />
 
-            <h3 className="mb-3">{page.title}</h3>
+            <h3 className="mb-3"><Markup encoding="latex">{page.title}</Markup></h3>
 
             {!!page.gameboards?.length && <>
                 <h4 className="mb-3" id="resources">Questions</h4>

diff --git a/src/app/components/elements/CollapsibleList.tsx b/src/app/components/elements/CollapsibleList.tsx
@@ -45,8 +45,8 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
         ? <span>{props.title && props.asSubList ? props.title : <b>{props.title}</b>}</span>
         : props.title;
 
-    return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
-        <div className="row collapsible-head" ref={headRef}>
+    return <Col className={classNames("collapsible-list-container", props.className)} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
+        <div className="row m-0 collapsible-head" ref={headRef}>
             <button className={classNames("w-100 d-flex align-items-center p-3 text-start", {"bg-white": isAda, "bg-transparent": isPhy, "ps-4": props.asSubList})} onClick={toggle}>
                 {title && <span>{title}</span>}
                 <Spacer/>
@@ -56,7 +56,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
             </button>
         </div>
         <div
-            className={`collapsible-body overflow-hidden ${expanded ? "open" : "closed"}`} 
+            className={`collapsible-body ${expanded ? "open" : "closed"}`} 
             style={{height: expanded ? expandedHeight : 0, maxHeight: expanded ? expandedHeight : 0, marginBottom: expanded ? (props.additionalOffset ?? 0) : 0}}
         >
             <div ref={listRef} className={classNames({"ms-2": props.asSubList})} {...{"inert": expanded ? undefined : "true"}}> 

diff --git a/src/app/components/elements/inputs/StyledCheckbox.tsx b/src/app/components/elements/inputs/StyledCheckbox.tsx
@@ -2,7 +2,7 @@ import React, {useEffect, useMemo, useState} from "react";
 import {InputProps} from "reactstrap";
 import {v4} from "uuid";
 import {Spacer} from "../Spacer";
-import {ifKeyIsEnter, isAda} from "../../../services";
+import {ifKeyIsEnter, isAda, isPhy} from "../../../services";
 import classNames from "classnames";
 
 // A custom checkbox, dealing with mouse and keyboard input. Pass `onChange((e : ChangeEvent) => void)`, `checked: bool`, and `label: Element` as required as props to use.
@@ -15,7 +15,7 @@ export const StyledCheckbox = (props: InputProps & {partial?: boolean}) => {
     const [checked, setChecked] = useState(props.checked ?? false);
     const id = useMemo(() => {return (props.id ?? "") + "-" + v4();}, [props.id]);
     const onCheckChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange && props.onChange(e);
+        if (props.onChange) props.onChange(e);
         setChecked(e.target.checked);
     };
 
@@ -38,3 +38,13 @@ export const StyledCheckbox = (props: InputProps & {partial?: boolean}) => {
         <Spacer/>
     </div>;
 };
+
+interface CheckboxWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+}
+
+// in many places, we want a stylised wrapper around the checkbox indicating selection.
+export const CheckboxWrapper = (props: CheckboxWrapperProps) => {
+    const {active, className, ...rest} = props;
+    return <div {...rest} className={classNames("ps-3 checkbox-wrapper", {"ms-2": isPhy, "bg-white": isAda, "checkbox-active": active}, className)}/>;
+};
diff --git a/src/app/components/elements/layout/SidebarLayout.tsx b/src/app/components/elements/layout/SidebarLayout.tsx
@@ -30,6 +30,7 @@ import { CollapsibleList } from "../CollapsibleList";
 import { extendUrl } from "../../pages/subjectLandingPageComponents";
 import { getProgressIcon } from "../../pages/Gameboard";
 import { tags as tagsService } from "../../../services";
+import { Markup } from "../markup";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -468,7 +469,7 @@ export const GenericConceptsSidebar = (props: ConceptListSidebarProps) => {
                     const descendentTags = tags.getDirectDescendents(subjectTag.id);
                     const isSelected = conceptFilters.includes(subjectTag) || descendentTags.some(tag => conceptFilters.includes(tag));
                     const isPartial = descendentTags.some(tag => conceptFilters.includes(tag)) && descendentTags.some(tag => !conceptFilters.includes(tag));
-                    return <div key={i} className={classNames("ps-2", {"checkbox-region": isSelected})}>
+                    return <div key={i} className={classNames("ps-2", {"checkbox-active": isSelected})}>
                         <FilterCheckbox 
                             checkboxStyle="button" color="theme" data-bs-theme={subject} tag={subjectTag} conceptFilters={conceptFilters} 
                             setConceptFilters={setConceptFilters} tagCounts={tagCounts} dependentTags={descendentTags} incompatibleTags={descendentTags}
@@ -613,7 +614,7 @@ export const PracticeQuizzesSidebar = (props: PracticeQuizzesSidebarProps) => {
                     const descendentTags = tags.getDirectDescendents(subjectTag.id);
                     const isSelected = filterTags?.includes(subjectTag) || descendentTags.some(tag => filterTags?.includes(tag));
                     const isPartial = descendentTags.some(tag => filterTags?.includes(tag)) && descendentTags.some(tag => !filterTags?.includes(tag));
-                    return <li key={i} className={classNames("ps-2", {"checkbox-region": isSelected})}>
+                    return <li key={i} className={classNames("ps-2", {"checkbox-active": isSelected})}>
                         <FilterCheckbox 
                             checkboxStyle="button" color="theme" data-bs-theme={subject} tag={subjectTag} conceptFilters={filterTags as Tag[]} 
                             setConceptFilters={setFilterTags} tagCounts={tagCounts} dependentTags={descendentTags} incompatibleTags={descendentTags}
@@ -1519,7 +1520,7 @@ export const BookSidebar = ({ book, urlBookId, pageId }: BookSidebarProps) => {
                             <StyledTabPicker
                                 checkboxTitle={<div className="d-flex">
                                     <span className="text-theme me-2">{section.label}</span>
-                                    <span className="flex-grow-1">{section.title}</span>
+                                    <span className="flex-grow-1"><Markup encoding="latex">{section.title}</Markup></span>
                                 </div>}
                                 checked={pageId === section.bookPageId}
                                 onClick={() => history.push(`/books/${urlBookId}/${section.bookPageId?.slice((book.id?.length ?? 0) + 1)}`)}

diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -131,7 +131,7 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
                     </div>}
                 </div>
                 {subtitle && <div className="small text-muted text-wrap">
-                    {subtitle}
+                    <Markup encoding="latex">{subtitle}</Markup>
                 </div>}
                 {breadcrumb && <span className="hierarchy-tags d-flex flex-wrap mw-auto">
                     <Breadcrumb breadcrumb={breadcrumb}/>