Redesign/general-improvements-9

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 */}

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">

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>

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"}}> 

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)}/>;
+};

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)}`)}

src/app/components/elements/list-groups/AbstractListViewItem.tsx

@@ -116,7 +116,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}/>

src/app/components/elements/panels/QuestionFinderFilterPanel.tsx

@@ -22,7 +22,7 @@ import {
 import { Difficulty, ExamBoard } from "../../../../IsaacApiTypes";
 import { pageStageToSearchStage, QuestionStatus } from "../../pages/QuestionFinder";
 import classNames from "classnames";
-import { StyledCheckbox } from "../inputs/StyledCheckbox";
+import { CheckboxWrapper, StyledCheckbox } from "../inputs/StyledCheckbox";
 import { DifficultyIcons } from "../svg/DifficultyIcons";
 import { GroupBase } from "react-select";
 import { HierarchyFilterTreeList } from "../svg/HierarchyFilter";
@@ -159,14 +159,14 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={(isAda && searchStages.includes(STAGE.ALL)) ? searchStages.length - 1 : searchStages.length}
             >
                 {getFilteredStageOptions().filter(stage => pageStageToSearchStage(pageContext?.stage).includes(stage.value) || !pageContext?.stage?.length).map((stage, index) => (
-                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda, "ms-2": isPhy, "checkbox-region": isPhy && searchStages.includes(stage.value)})} key={index}>
+                    <CheckboxWrapper active={searchStages.includes(stage.value)} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchStages.includes(stage.value)}
                             onChange={() => setSearchStages(s => s.includes(stage.value) ? s.filter(v => v !== stage.value) : [...s, stage.value])}
                             label={<span>{stage.label}</span>}
                         />
-                    </div>
+                    </CheckboxWrapper>
                 ))}
             </CollapsibleList>}
             {isAda && <CollapsibleList
@@ -175,14 +175,14 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={searchExamBoards.length}
             >
                 {getFilteredExamBoardOptions({byStages: searchStages}).map((board, index) => (
-                    <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                    <CheckboxWrapper active={searchExamBoards.includes(board.value)} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchExamBoards.includes(board.value)}
                             onChange={() => setSearchExamBoards(s => s.includes(board.value) ? s.filter(v => v !== board.value) : [...s, board.value])}
                             label={<span>{board.label}</span>}
                         />
-                    </div>
+                    </CheckboxWrapper>
                 ))}
             </CollapsibleList>}
             <CollapsibleList
@@ -191,22 +191,20 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={siteSpecific(getChoiceTreeLeaves(selections).filter(l => l.value !== pageContext?.subject).length, searchTopics.length)}
             >
                 {siteSpecific(
-                    <div>
-                        <HierarchyFilterTreeList root {...{
-                            tier: pageContext?.subject ? 1 : 0,
-                            index: pageContext?.subject as TAG_ID ?? TAG_LEVEL.subject,
-                            choices, selections, setSelections,
-                            questionFinderFilter: true
-                        }}/>
-                    </div>,
+                    <HierarchyFilterTreeList root {...{
+                        tier: pageContext?.subject ? 1 : 0,
+                        index: pageContext?.subject as TAG_ID ?? TAG_LEVEL.subject,
+                        choices, selections, setSelections,
+                        questionFinderFilter: true
+                    }}/>,
                     groupBaseTagOptions.map((tag, index) => (
                         <CollapsibleList
                             title={tag.label} key={index} asSubList
                             expanded={listState[`topics ${sublistDelimiter} ${tag.label}`]?.state}
                             toggle={() => listStateDispatch({type: "toggle", id: `topics ${sublistDelimiter} ${tag.label}`, focus: true})}
                         >
                             {tag.options.map((topic, index) => (
-                                <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
+                                <div className={classNames("ps-3", {"bg-white": isAda})} key={index}>
                                     <StyledCheckbox
                                         color="primary"
                                         checked={searchTopics.includes(topic.value)}
@@ -238,7 +236,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                     <b className="small text-start">{siteSpecific("Learn more about difficulty levels", "What do the difficulty levels mean?")}</b>
                 </button>
                 {SIMPLE_DIFFICULTY_ITEM_OPTIONS.map((difficulty, index) => (
-                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda, "ms-2": isPhy, "checkbox-region": isPhy && searchDifficulties.includes(difficulty.value)})} key={index}>
+                    <CheckboxWrapper active={searchDifficulties.includes(difficulty.value)} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchDifficulties.includes(difficulty.value)}
@@ -252,7 +250,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                                 <DifficultyIcons difficulty={difficulty.value} blank className={classNames({"mt-n2": isAda, "mt-2": isPhy})}/>
                             </div>}
                         />
-                    </div>
+                    </CheckboxWrapper>
                 ))}
             </CollapsibleList>
             {isPhy && bookOptions.length > 0 && <CollapsibleList
@@ -261,27 +259,35 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={excludeBooks ? 1 : searchBooks.length}
             >
                 <>
-                    <div className={classNames("w-100 ps-3 py-1 ms-2", {"checkbox-region": excludeBooks})}>
+                    <CheckboxWrapper active={excludeBooks}>
                         <StyledCheckbox
                             color="primary"
                             checked={excludeBooks}
                             onChange={() => setExcludeBooks(p => !p)}
                             label={<span className="me-2">Exclude skills book questions</span>}
                         />
-                    </div>
+                    </CheckboxWrapper>
+                    <div className="section-divider ms-3 my-2"/>
                     {bookOptions.map((book, index) => (
-                        <div className={classNames("w-100 ps-3 py-1 ms-2", {"checkbox-region": searchBooks.includes(book.tag) && !excludeBooks})} key={index}>
+                        <CheckboxWrapper active={searchBooks.includes(book.tag) && !excludeBooks} key={index}>
                             <StyledCheckbox
-                                color="primary" disabled={excludeBooks}
+                                color="primary"
                                 checked={searchBooks.includes(book.tag) && !excludeBooks}
-                                onChange={() => setSearchBooks(
-                                    s => s.includes(book.tag)
-                                        ? s.filter(v => v !== book.tag)
-                                        : [...s, book.tag]
-                                )}
+                                onChange={() => {
+                                    if (excludeBooks) {
+                                        setExcludeBooks(false);
+                                        setSearchBooks([book.tag]);
+                                    } else {
+                                        setSearchBooks(
+                                            s => s.includes(book.tag)
+                                                ? s.filter(v => v !== book.tag)
+                                                : [...s, book.tag]
+                                        );
+                                    }
+                                }}
                                 label={<span className="me-2">{book.shortTitle ?? book.title}</span>}
                             />
-                        </div>
+                        </CheckboxWrapper>
                     ))}
                 </>
             </CollapsibleList>}
@@ -290,7 +296,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 toggle={() => listStateDispatch({type: "toggle", id: "questionStatus", focus: below["md"](deviceSize)})}
                 numberSelected={Object.values(searchStatuses).reduce((acc, item) => acc + item, 0)}
             >
-                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda, "ms-2": isPhy, "checkbox-region": isPhy && searchStatuses.notAttempted})}>
+                <CheckboxWrapper active={searchStatuses.notAttempted}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.notAttempted}
@@ -306,8 +312,8 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                             </div>
                         )}
                     />
-                </div>
-                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda, "ms-2": isPhy, "checkbox-region": isPhy && searchStatuses.complete})}>
+                </CheckboxWrapper>
+                <CheckboxWrapper active={searchStatuses.complete}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.complete}
@@ -323,8 +329,8 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                             </div>
                         )}
                     />
-                </div>
-                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda, "ms-2": isPhy, "checkbox-region": isPhy && searchStatuses.tryAgain})}>
+                </CheckboxWrapper>
+                <CheckboxWrapper active={searchStatuses.tryAgain}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.tryAgain}
@@ -340,7 +346,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                             </div>
                         )}
                     />
-                </div>
+                </CheckboxWrapper>
             </CollapsibleList>
             {/* TODO: implement once necessary tags are available
             <div className="pb-2">