General improvements 10

src/app/components/content/IsaacNumericQuestion.tsx

@@ -14,7 +14,7 @@ import {
     Row,
     UncontrolledTooltip
 } from "reactstrap";
-import {above, isAda, isPhy, siteSpecific, useCurrentQuestionAttempt, useDeviceSize} from "../../services";
+import {above, below, isAda, isPhy, siteSpecific, useCurrentQuestionAttempt, useDeviceSize} from "../../services";
 import {IsaacQuestionProps} from "../../../IsaacAppTypes";
 import {Markup} from "../elements/markup";
 import classNames from "classnames";
@@ -107,7 +107,7 @@ const IsaacNumericQuestion = ({doc, questionId, validationResponse, readonly}: I
                 </IsaacContentValueOrChildren>
             </div>
             <Row className="no-print">
-                <Col className="d-flex flex-column flex-md-row">
+                <Col xs={12} className="d-flex flex-column flex-md-row">
                     <div className="d-flex flex-column numeric-value w-100 w-md-50 mb-2">
                         Value
                         <InputGroup className={"feedback-zone nq-feedback separate-input-group flex-grow-1"}>
@@ -129,7 +129,7 @@ const IsaacNumericQuestion = ({doc, questionId, validationResponse, readonly}: I
                         <Dropdown className="flex-grow-1" disabled={readonly} isOpen={isOpen && noDisplayUnit} toggle={() => {setIsOpen(!isOpen);}}>
                             <DropdownToggle
                                 disabled={readonly || !noDisplayUnit}
-                                className={classNames("feedback-zone w-md-auto h-100 px-2 py-1", {"border-dark display-unit": !noDisplayUnit, "feedback-showing": currentAttemptUnitsWrong && noDisplayUnit, "bg-white my-2": isPhy})}
+                                className={classNames("feedback-zone w-md-auto h-100 px-2 py-1", {"border-dark display-unit": !noDisplayUnit, "feedback-showing": currentAttemptUnitsWrong && noDisplayUnit, "bg-white": isPhy, "my-2": isPhy && below['sm'](deviceSize)})}
                                 color={noDisplayUnit ? siteSpecific("dropdown", undefined) : "white"}
                                 caret={isPhy && noDisplayUnit}
                             >
@@ -155,15 +155,13 @@ const IsaacNumericQuestion = ({doc, questionId, validationResponse, readonly}: I
                         </Dropdown>
                     </div>}
                 </Col>
-                {!readonly && isPhy && above['md'](deviceSize) && <>
-                    <div className="pt-2">
-                        <Button className="numeric-help d-flex align-items-center p-0 gap-2" type="button" color="link" size="sm" innerRef={helpTooltip}>
-                            <i className="icon icon-info layered icon-color-grey"/>
-                            Show me some examples
-                        </Button>
-                    </div>
+                {!readonly && isPhy && above['md'](deviceSize) && <Col xs={12}>
+                    <Button className="numeric-help d-flex align-items-center m-0 p-0 gap-2 text-muted small" type="button" color="link" size="sm" innerRef={helpTooltip}>
+                        <i className="icon icon-info layered icon-color-grey"/>
+                        What can I type in this box?
+                    </Button>
                     {tooltip}
-                </>}
+                </Col>}
             </Row>
             <QuestionInputValidation userInput={currentAttemptValue ?? ""} validator={numericInputValidator} />
         </div>

src/app/components/elements/Book.tsx

@@ -1,25 +1,27 @@
-import React, { useEffect, useState } from "react";
-import { Container } from "reactstrap";
-import { BookSidebar, MainContent, SidebarLayout } from "./layout/SidebarLayout";
-import { Markup } from "./markup";
-import { TitleAndBreadcrumb } from "./TitleAndBreadcrumb";
-import { useContextFromContentObjectTags } from "../../services";
-import { useHistory } from "react-router";
-import { useGetBookDetailPageQuery, useGetBookIndexPageQuery } from "../../state/slices/api/booksApi";
-import { BookPage } from "./BookPage";
-import { skipToken } from "@reduxjs/toolkit/query";
-import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
-import { TeacherNotes } from "./TeacherNotes";
-import { EditContentButton } from "./EditContentButton";
-
+import React, {useEffect, useState} from "react";
+import {Container} from "reactstrap";
+import {BookSidebar, MainContent, SidebarLayout} from "./layout/SidebarLayout";
+import {Markup} from "./markup";
+import {TitleAndBreadcrumb} from "./TitleAndBreadcrumb";
+import {useContextFromContentObjectTags} from "../../services";
+import {useHistory} from "react-router";
+import {useGetBookDetailPageQuery, useGetBookIndexPageQuery} from "../../state/slices/api/booksApi";
+import {BookPage} from "./BookPage";
+import {skipToken} from "@reduxjs/toolkit/query";
+import {ShowLoadingQuery} from "../handlers/ShowLoadingQuery";
+import {TeacherNotes} from "./TeacherNotes";
+import {IsaacContentValueOrChildren} from "../content/IsaacContentValueOrChildren";
+import {ContentDTO} from "../../../IsaacApiTypes";
+import {EditContentButton} from "./EditContentButton";
+
 interface BookProps {
     match: { params: { bookId: string } };
 }
 
 export const Book = ({match: {params: {bookId}}}: BookProps) => {
 
     const [pageId, setPageId] = useState<string | undefined>(undefined);
-    
+
     const bookIndexPageQuery = useGetBookIndexPageQuery({id: `book_${bookId}`});
     const bookDetailPageQuery = useGetBookDetailPageQuery(pageId ? { id: pageId } : skipToken);
 
@@ -44,7 +46,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
     }, [book?.chapters, history.location]);
 
     return <Container data-bs-theme={pageContext?.subject ?? "neutral"}>
-        <TitleAndBreadcrumb 
+        <TitleAndBreadcrumb
             currentPageTitle={book?.title ?? "Book"}
             icon={{type: "hex", icon: "icon-book"}}
         />
@@ -55,8 +57,8 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                 thenRender={(definedBookIndexPage) => {
                     return <>
                         <BookSidebar book={definedBookIndexPage} urlBookId={bookId} pageId={pageId} />
-                        <MainContent className="mt-4">
-                            {pageId 
+                        <MainContent className="my-4">
+                            {pageId
                                 ? <ShowLoadingQuery
                                     query={bookDetailPageQuery}
                                     defaultErrorTitle="Unable to load book page."
@@ -65,12 +67,25 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                                 : <>
                                     <EditContentButton doc={definedBookIndexPage}/>
                                     <TeacherNotes notes={definedBookIndexPage.teacherNotes} />
-                                    <div>
-                                        <div className="book-image-container mx-3 float-end">
+                                    {definedBookIndexPage.value && <div>
+                                        <div className="book-image-container book-height-lg d-none d-sm-block mx-3 float-end">
                                             <img src={definedBookIndexPage.coverImage?.src} alt={definedBookIndexPage.title} />
                                         </div>
                                         <Markup className="d-contents" trusted-markup-encoding={"markdown"}>{definedBookIndexPage.value}</Markup>
-                                    </div>
+                                    </div>}
+                                    {!!definedBookIndexPage.children?.length && <>
+                                        <div className="d-flex">
+                                            <div className="flex-grow-1">
+                                                <IsaacContentValueOrChildren {...definedBookIndexPage.children[0] as ContentDTO} />
+                                            </div>
+                                            <div className="book-image-container book-height-lg d-none d-sm-block mx-3 float-end">
+                                                <img src={definedBookIndexPage.coverImage?.src} alt={definedBookIndexPage.title} />
+                                            </div>
+                                        </div>
+                                        <IsaacContentValueOrChildren>
+                                            {definedBookIndexPage.children.slice(1)}
+                                        </IsaacContentValueOrChildren>
+                                    </>}
                                 </>
                             }
                         </MainContent>

src/app/components/elements/BookPage.tsx

@@ -1,21 +1,23 @@
 import React from "react";
-import { IsaacContentValueOrChildren } from "../content/IsaacContentValueOrChildren";
-import { ListView } from "./list-groups/ListView";
-import { IsaacBookDetailPageDTO } from "../../../IsaacApiTypes";
-import { TeacherNotes } from "./TeacherNotes";
-import { Markup } from "./markup";
-import { EditContentButton } from "./EditContentButton";
+import {IsaacContentValueOrChildren} from "../content/IsaacContentValueOrChildren";
+import {ListView} from "./list-groups/ListView";
+import {IsaacBookDetailPageDTO} from "../../../IsaacApiTypes";
+import {TeacherNotes} from "./TeacherNotes";
+import {EditContentButton} from "./EditContentButton";
 
 export const BookPage = ({ page }: { page: IsaacBookDetailPageDTO }) => {
-    
+
     return <div className="book-page">
         <>
+            <h3 className="mb-3">
+                {page.subtitle && <span className="me-2 text-theme">{page.subtitle} </span>}
+                {page.title}
+            </h3>
+
             <EditContentButton doc={page}/>
 
             <TeacherNotes notes={page.teacherNotes} />
 
-            <h3 className="mb-3"><Markup encoding="latex">{page.title}</Markup></h3>
-
             {!!page.gameboards?.length && <>
                 <h4 className="mb-3" id="resources">Questions</h4>
                 <div className="mt-3 mb-5 list-results-container p-2">

src/app/components/elements/EditContentButton.tsx

@@ -13,11 +13,11 @@ export const EditContentButton = ({doc, className}: EditContentButtonProps) => {
     const {data: segueEnvironment} = useGetSegueEnvironmentQuery();
     if (segueEnvironment === "DEV" && doc?.canonicalSourceFile) {
         return <div className="not-mobile">
-            <h3>
+            <h4>
                 <ExternalLink href={EDITOR_URL + doc.canonicalSourceFile} className={className || ""}>
                     {doc.published ? "Published" : "Unpublished"} ✎
                 </ExternalLink>
-            </h3>
+            </h4>
         </div>;
     } else {
         return null; // does not render

src/app/components/elements/Tabs.tsx

@@ -100,7 +100,7 @@ const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass=""}: Tabs
 export const Tabs = (props: TabsProps) => {
     const {
         className="", tabContentClass="", children, activeTabOverride, onActiveTabChange,
-        deselectable=false, refreshHash, expandable, style="tabs"
+        deselectable=false, refreshHash, expandable, style=(siteSpecific("dropdowns", "tabs")),
     } = props;
     const [activeTab, setActiveTab] = useState(activeTabOverride || 1);
 

src/app/components/elements/TeacherDashboard.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, useState } from 'react';
 import { selectors, useAppSelector } from '../../state';
 import { Button, Card, Col, Row } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import { BookInfo, extractTeacherName, ISAAC_BOOKS, isDefined, isOverdue, isTutor, sortUpcomingAssignments, Subject, useDeviceSize } from '../../services';
+import { BookInfo, extractTeacherName, ISAAC_BOOKS, isOverdue, isTutor, sortUpcomingAssignments, Subject, useDeviceSize } from '../../services';
 import { AssignmentDTO, QuizAssignmentDTO, UserSummaryDTO } from '../../../IsaacApiTypes';
 import StyledToggle from './inputs/StyledToggle';
 import { AssignmentCard, StudentDashboard } from './StudentDashboard';
@@ -11,6 +11,7 @@ import { Spacer } from './Spacer';
 import { AppGroup, UserSnapshot } from '../../../IsaacAppTypes';
 import { useStatefulElementRef } from './markup/portals/utils';
 import { ScrollShadows } from './ScrollShadows';
+import { ShowLoading } from '../handlers/ShowLoading';
 
 interface GroupsPanelProps {
     groups: AppGroup[] | undefined;
@@ -44,10 +45,6 @@ interface AssignmentsPanelProps {
 
 const AssignmentsPanel = ({ assignments, quizzes, groups }: AssignmentsPanelProps) => {
     const user = useAppSelector(selectors.user.orNull);
-
-    if (!isDefined(assignments) || !isDefined(quizzes)) {
-        return <div className="dashboard-panel"/>;
-    }
 
     const upcomingAssignments = assignments?.filter(a => !isOverdue(a)); // Filter out past assignments
     const sortedAssignments = upcomingAssignments ? sortUpcomingAssignments(upcomingAssignments) : [];
@@ -63,15 +60,19 @@ const AssignmentsPanel = ({ assignments, quizzes, groups }: AssignmentsPanelProp
 
     return <div className="dashboard-panel">
         <h4>View scheduled work</h4>
-        {soonestDeadlines.length ? 
-            <div className="overflow-y-auto px-1 pt-1 mx-n1 mt-m1 mb-2">
-                {soonestDeadlines.map((assignment, i) => 
-                    <div className={i+1 < soonestDeadlines.length ? "mb-3" : "mb-1"} key={assignment.id}>
-                        <AssignmentCard assignment={assignment} isTeacherDashboard groups={groups} />
-                    </div>)}
-            </div>
-            : <div className="text-center mt-lg-3">You have no assignments with upcoming due dates.</div>
-        }
+        <ShowLoading
+            until={assignments && quizzes}
+            thenRender={() => {
+                return soonestDeadlines.length 
+                    ? <div className="overflow-y-auto px-1 pt-1 mx-n1 mt-m1 mb-2">
+                        {soonestDeadlines.map((assignment, i) => 
+                            <div className={i+1 < soonestDeadlines.length ? "mb-3" : "mb-1"} key={assignment.id}>
+                                <AssignmentCard assignment={assignment} isTeacherDashboard groups={groups} />
+                            </div>)}
+                    </div>
+                    : <div className="text-center mt-lg-3">You have no assignments with upcoming due dates.</div>;
+            }}
+        />
         <Spacer/>
         <div className="d-flex align-items-center">
             <Link to="/assignment_schedule" className="d-inline text-center panel-link me-3">

src/app/components/pages/AssignmentProgress.tsx

@@ -391,7 +391,7 @@ const GroupDetails = ({group, user}: {group: AppGroup, user: RegisteredUserDTO})
         <AssignmentProgressLegend showQuestionKey={activeTab === MARKBOOK_TYPE_TAB.tests} id={`legend-${group.id}`} />
         {/* Only full teachers can see the tests tab */}
         {pageSettings.isTeacher
-            ? <Tabs className="my-4 mb-5" tabContentClass="mt-4" activeTabOverride={activeTab} onActiveTabChange={setActiveTab}>
+            ? <Tabs className="my-4 mb-5" tabContentClass="mt-4" activeTabOverride={activeTab} onActiveTabChange={setActiveTab} style="tabs">
                 {{
                     [`Assignments (${assignments.length || 0})`]: assignmentTabComponents,
                     [`Tests (${quizAssignments.length || 0})`]: quizTabComponents

src/app/components/pages/MyProgress.tsx

@@ -120,7 +120,7 @@ const MyProgress = withRouter((props: MyProgressProps) => {
 
                     <Card className="mt-4">
                         <CardBody>
-                            <Tabs tabContentClass="mt-4" onActiveTabChange={(tabIndex) => {
+                            <Tabs style="tabs" tabContentClass="mt-4" onActiveTabChange={(tabIndex) => {
                                 const flush = tabRefs[tabIndex - 1].current;
                                 if (flush) {
                                     // Don't call the flush in an event handler that causes the render, that's too early.

src/app/components/pages/Question.tsx

@@ -107,8 +107,6 @@ export const Question = withRouter(({questionIdOverride, match, location, previe
                         <MainContent>
                             {!preview && <CanonicalHrefElement />}
 
-                            <TeacherNotes notes={doc.teacherNotes} />
-
                             <div className={classNames("no-print d-flex align-items-center", siteSpecific("my-3", "mt-3"))}>
                                 {isAda && <>
                                     {pageContainsLLMFreeTextQuestion && <span className="me-2"><LLMFreeTextQuestionIndicator /></span>}
@@ -131,7 +129,7 @@ export const Question = withRouter(({questionIdOverride, match, location, previe
                                     </div>
                                 </>}
                             </div>
-                            
+
                             {isPhy && <Row className="content-metadata-container d-flex">
                                 <Col xs={12} md={"auto"} className="d-flex flex-column flex-grow-1 px-3 pb-3 pb-md-0">
                                     <span>Subject & topics</span>
@@ -145,7 +143,7 @@ export const Question = withRouter(({questionIdOverride, match, location, previe
                                 </Col>
                                 <Col xs={12} sm={6} md={"auto"} className="d-flex flex-column flex-grow-0 px-3 mt-3 pb-3 mt-md-0">
                                     <span>Status</span>
-                                    {allQuestionsCorrect 
+                                    {allQuestionsCorrect
                                         ? <div className="d-flex align-items-center"><span className="icon-correct me-2"/> Correct</div>
                                         : anyQuestionAttempted
                                             ? <div className="d-flex align-items-center"><span className="icon-in-progress me-2"/> In Progress</div>
@@ -154,12 +152,14 @@ export const Question = withRouter(({questionIdOverride, match, location, previe
                                 </Col>
                                 <Col xs={12} sm={6} md={"auto"} className="d-flex flex-column flex-grow-0 px-3 mt-3 mt-md-0 pb-sm-0">
                                     <span>Stage & difficulty</span>
-                                    <StageAndDifficultySummaryIcons audienceViews={determineAudienceViews(doc.audience, navigation.creationContext)} iconClassName="ps-2" stack/> 
+                                    <StageAndDifficultySummaryIcons audienceViews={determineAudienceViews(doc.audience, navigation.creationContext)} iconClassName="ps-2" stack/>
                                 </Col>
                             </Row>}
 
                             {isPhy && <EditContentButton doc={doc} />}
 
+                            <TeacherNotes notes={doc.teacherNotes} />
+
                             <Row className="question-content-container">
                                 <Col className={classNames("py-4 question-panel", {"px-0 px-sm-2": isPhy}, {"mw-760": isAda})}>
 
@@ -198,6 +198,6 @@ export const Question = withRouter(({questionIdOverride, match, location, previe
                     </SidebarLayout>
                 </Container>
             </GameboardContext.Provider>;}
-        } 
+        }
     />;
 });

src/app/components/pages/books_old/maths_book_gcse.tsx

@@ -20,7 +20,7 @@ export const MathsBookGcse = () => {
                 <PageFragment fragmentId="maths_book_gcse_intro"/>
             </div>
             <div className="book-levels">
-                <Tabs tabTitleClass="px-3 py-1 hint-tab-title" tabContentClass="pt-2">
+                <Tabs style="tabs" tabTitleClass="px-3 py-1 hint-tab-title" tabContentClass="pt-2">
                     {{
                         'Boards for Class and Homework': <Col>
                             <h4>Chapters:</h4>

src/app/components/pages/books_old/phys_book_gcse.tsx

@@ -20,7 +20,7 @@ export const PhysBookGcse = () => {
                 <PageFragment fragmentId="phys_book_gcse_intro"/>
             </div>
             <div className="book-levels">
-                <Tabs tabTitleClass="px-3 py-1 hint-tab-title" tabContentClass="pt-2" activeTabOverride={2}>
+                <Tabs style="tabs" tabTitleClass="px-3 py-1 hint-tab-title" tabContentClass="pt-2" activeTabOverride={2}>
                     {{
                         'Boards for Class and Homework': <Col>
                             <h4>Chapters:</h4>