Skip to content

Commit e98219c

Browse files
axlewinaxlewin
authored
Merge pull request #1468 from isaacphysics/redesign/general-improvements-9
Redesign/general-improvements-9
2 parents 3d915c2 + 90b4770 commit e98219c

22 files changed

+154
-100
lines changed

‎cypress/support/component-index-ada.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@
2929
<title>Ada Computer Science</title>
3030
</head>
3131
<body>
32-
<div data-cy-root></div>
32+
<div data-cy-root id="root" data-reduced-motion="true"></div>
3333
</body>
3434
</html>

‎cypress/support/component-index-phy.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@
2929
<title>Isaac Science</title>
3030
</head>
3131
<body data-bs-theme="neutral">
32-
<div data-cy-root id="root"></div>
32+
<div data-cy-root id="root" data-reduced-motion="true"></div>
3333
</body>
3434
</html>

‎src/app/components/content/IsaacQuestion.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -284,9 +284,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
284284
}
285285
</div>
286286
{/* Physics Hints */}
287-
{isPhy && <div>
288-
<IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />
289-
</div>}
287+
{isPhy && <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />}
290288
</Form>
291289

292290
{/* LLM free-text question validation response */}

‎src/app/components/elements/Book.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { BookPage } from "./BookPage";
1010
import { skipToken } from "@reduxjs/toolkit/query";
1111
import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
1212
import { TeacherNotes } from "./TeacherNotes";
13+
import { EditContentButton } from "./EditContentButton";
1314

1415
interface BookProps {
1516
match: { params: { bookId: string } };
@@ -62,6 +63,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
6263
thenRender={(bookDetailPage) => <BookPage page={bookDetailPage} />}
6364
/>
6465
: <>
66+
<EditContentButton doc={definedBookIndexPage}/>
6567
<TeacherNotes notes={definedBookIndexPage.teacherNotes} />
6668
<div>
6769
<div className="book-image-container mx-3 float-end">

‎src/app/components/elements/BookPage.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import { IsaacContentValueOrChildren } from "../content/IsaacContentValueOrChild
33
import { ListView } from "./list-groups/ListView";
44
import { IsaacBookDetailPageDTO } from "../../../IsaacApiTypes";
55
import { TeacherNotes } from "./TeacherNotes";
6+
import { Markup } from "./markup";
7+
import { EditContentButton } from "./EditContentButton";
68

79
export const BookPage = ({ page }: { page: IsaacBookDetailPageDTO }) => {
810

911
return <div className="book-page">
1012
<>
13+
<EditContentButton doc={page}/>
14+
1115
<TeacherNotes notes={page.teacherNotes} />
1216

13-
<h3 className="mb-3">{page.title}</h3>
17+
<h3 className="mb-3"><Markup encoding="latex">{page.title}</Markup></h3>
1418

1519
{!!page.gameboards?.length && <>
1620
<h4 className="mb-3" id="resources">Questions</h4>

‎src/app/components/elements/CollapsibleList.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
4545
? <span>{props.title && props.asSubList ? props.title : <b>{props.title}</b>}</span>
4646
: props.title;
4747

48-
return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
49-
<div className="row collapsible-head" ref={headRef}>
48+
return <Col className={classNames("collapsible-list-container", props.className)} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
49+
<div className="row m-0 collapsible-head" ref={headRef}>
5050
<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}>
5151
{title && <span>{title}</span>}
5252
<Spacer/>
@@ -56,7 +56,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
5656
</button>
5757
</div>
5858
<div
59-
className={`collapsible-body overflow-hidden ${expanded ? "open" : "closed"}`}
59+
className={`collapsible-body ${expanded ? "open" : "closed"}`}
6060
style={{height: expanded ? expandedHeight : 0, maxHeight: expanded ? expandedHeight : 0, marginBottom: expanded ? (props.additionalOffset ?? 0) : 0}}
6161
>
6262
<div ref={listRef} className={classNames({"ms-2": props.asSubList})} {...{"inert": expanded ? undefined : "true"}}>

‎src/app/components/elements/inputs/StyledCheckbox.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useEffect, useMemo, useState} from "react";
22
import {InputProps} from "reactstrap";
33
import {v4} from "uuid";
44
import {Spacer} from "../Spacer";
5-
import {ifKeyIsEnter, isAda} from "../../../services";
5+
import {ifKeyIsEnter, isAda, isPhy} from "../../../services";
66
import classNames from "classnames";
77

88
// 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}) => {
1515
const [checked, setChecked] = useState(props.checked ?? false);
1616
const id = useMemo(() => {return (props.id ?? "") + "-" + v4();}, [props.id]);
1717
const onCheckChange = (e: React.ChangeEvent<HTMLInputElement>) => {
18-
props.onChange && props.onChange(e);
18+
if (props.onChange) props.onChange(e);
1919
setChecked(e.target.checked);
2020
};
2121

@@ -38,3 +38,13 @@ export const StyledCheckbox = (props: InputProps & {partial?: boolean}) => {
3838
<Spacer/>
3939
</div>;
4040
};
41+
42+
interface CheckboxWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
43+
active?: boolean;
44+
}
45+
46+
// in many places, we want a stylised wrapper around the checkbox indicating selection.
47+
export const CheckboxWrapper = (props: CheckboxWrapperProps) => {
48+
const {active, className, ...rest} = props;
49+
return <div {...rest} className={classNames("ps-3 checkbox-wrapper", {"ms-2": isPhy, "bg-white": isAda, "checkbox-active": active}, className)}/>;
50+
};

‎src/app/components/elements/layout/SidebarLayout.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { CollapsibleList } from "../CollapsibleList";
3232
import { extendUrl } from "../../pages/subjectLandingPageComponents";
3333
import { getProgressIcon } from "../../pages/Gameboard";
3434
import { tags as tagsService } from "../../../services";
35+
import { Markup } from "../markup";
3536

3637
export const SidebarLayout = (props: RowProps) => {
3738
const { className, ...rest } = props;
@@ -479,7 +480,7 @@ export const GenericConceptsSidebar = (props: GenericConceptsSidebarProps) => {
479480
const descendentTags = tags.getDirectDescendents(subjectTag.id);
480481
const isSelected = conceptFilters.includes(subjectTag) || descendentTags.some(tag => conceptFilters.includes(tag));
481482
const isPartial = descendentTags.some(tag => conceptFilters.includes(tag)) && descendentTags.some(tag => !conceptFilters.includes(tag));
482-
return <div key={i} className={classNames("ps-2", {"checkbox-region": isSelected})}>
483+
return <div key={i} className={classNames("ps-2", {"checkbox-active": isSelected})}>
483484
<FilterCheckbox
484485
checkboxStyle="button" color="theme" data-bs-theme={subject} tag={subjectTag} conceptFilters={conceptFilters}
485486
setConceptFilters={setConceptFilters} tagCounts={tagCounts} dependentTags={descendentTags} incompatibleTags={descendentTags}
@@ -602,7 +603,7 @@ export const PracticeQuizzesSidebar = (props: PracticeQuizzesSidebarProps) => {
602603
const descendentTags = tags.getDirectDescendents(subjectTag.id);
603604
const isSelected = filterTags?.includes(subjectTag) || descendentTags.some(tag => filterTags?.includes(tag));
604605
const isPartial = descendentTags.some(tag => filterTags?.includes(tag)) && descendentTags.some(tag => !filterTags?.includes(tag));
605-
return <li key={i} className={classNames("ps-2", {"checkbox-region": isSelected})}>
606+
return <li key={i} className={classNames("ps-2", {"checkbox-active": isSelected})}>
606607
<FilterCheckbox
607608
checkboxStyle="button" color="theme" data-bs-theme={subject} tag={subjectTag} conceptFilters={filterTags as Tag[]}
608609
setConceptFilters={setFilterTags} tagCounts={tagCounts} dependentTags={descendentTags} incompatibleTags={descendentTags}
@@ -1494,7 +1495,7 @@ export const BookSidebar = ({ book, urlBookId, pageId }: BookSidebarProps) => {
14941495
<StyledTabPicker
14951496
checkboxTitle={<div className="d-flex">
14961497
<span className="text-theme me-2">{section.label}</span>
1497-
<span className="flex-grow-1">{section.title}</span>
1498+
<span className="flex-grow-1"><Markup encoding="latex">{section.title}</Markup></span>
14981499
</div>}
14991500
checked={pageId === section.bookPageId}
15001501
onClick={() => history.push(`/books/${urlBookId}/${section.bookPageId?.slice((book.id?.length ?? 0) + 1)}`)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
131131
</div>}
132132
</div>
133133
{subtitle && <div className="small text-muted text-wrap">
134-
{subtitle}
134+
<Markup encoding="latex">{subtitle}</Markup>
135135
</div>}
136136
{breadcrumb && <span className="hierarchy-tags d-flex flex-wrap mw-auto">
137137
<Breadcrumb breadcrumb={breadcrumb}/>

0 commit comments

Comments
 (0)