Add example questions to subject overviews

Author: sjd210

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

@@ -256,7 +256,7 @@ export const ListView = ({items, className, ...rest}: ListViewProps & ListViewIt
                     return <EventListViewItem key={index} {...rest} item={item}/>;
                 case (DOCUMENT_TYPE.QUIZ):
                     return <QuizListViewItem key={index} {...rest} item={item}/>;
-                case SEARCH_RESULT_TYPE.GAMEBOARD:
+                case SEARCH_RESULT_TYPE.QUESTION_DECK:
                     return <QuestionDeckListViewItem key={index} {...rest} item={item}/>;
                 default:
                     // Do not render this item if there is no matching DOCUMENT_TYPE

src/app/components/pages/SubjectLandingPage.tsx

@@ -92,7 +92,7 @@ export const LandingPageFooter = ({context}: {context: PageContextState}) => {
     // TODO: are we going to make subject-specific news?
     const {data: news} = useGetNewsPodListQuery({subject: "physics"});
 
-    return <Row className={classNames("mt-5 py-4 row-cols-1 row-cols-md-2")}>
+    return <Row className={classNames("mt-2 py-4 row-cols-1 row-cols-md-2")}>
         <div className="d-flex flex-column mt-3">
             {/* if there are books, display books. otherwise, display news */}
             {books.length > 0

src/app/components/pages/SubjectOverviewPage.tsx

@@ -3,13 +3,15 @@ import { RouteComponentProps, withRouter } from "react-router";
 import { Container } from "reactstrap";
 import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
 import { useUrlPageTheme } from "../../services/pageContext";
-import { HUMAN_SUBJECTS, isDefined, LEARNING_STAGE, LearningStage, PHY_NAV_SUBJECTS, Subject } from "../../services";
-import { PageContextState } from "../../../IsaacAppTypes";
-import { ListViewCardProps, ListViewCards } from "../elements/list-groups/ListView";
+import { above, HUMAN_SUBJECTS, isDefined, LEARNING_STAGE, LearningStage, PHY_NAV_SUBJECTS, SEARCH_RESULT_TYPE, subject, Subject, SUBJECTS, useDeviceSize } from "../../services";
+import { PageContextState, ShortcutResponse } from "../../../IsaacAppTypes";
+import { ListView, ListViewCardProps, ListViewCards, QuestionDeckListViewItem } from "../elements/list-groups/ListView";
 import { LandingPageFooter } from "./SubjectLandingPage";
 import { DifficultyIcon } from "../elements/svg/DifficultyIcons";
 
 const SubjectCards = ({context}: { context: PageContextState }) => {
+    const deviceSize = useDeviceSize();
+
     if (!isDefined(context?.subject)) return null;
 
     const humanSubject = context?.subject && HUMAN_SUBJECTS[context.subject];
@@ -77,14 +79,41 @@ const SubjectCards = ({context}: { context: PageContextState }) => {
                 icon: `/assets/phy/icons/redesign/subject-${context.subject}.svg`,
             }
         });
-    } //hrm
+    }
 
-    return <ListViewCards showBlanks cards={cards
+    return <ListViewCards showBlanks={above["lg"](deviceSize)} cards={cards
         .sort((a, b) => a ? (b ? 0 : -1) : 1) // put nulls at the end
         .filter((x, i, a) => x || (i % 2 === 0 ? a[i + 1] : a[i - 1])) // remove pairs of nulls
     } />;
 };
 
+const ExampleQuestions = ({ subject }: { subject: Subject }) => {
+    const items: { [key in Subject]: ShortcutResponse[] } = {
+        maths: [{
+            title: "Sample Maths Questions",
+            type: SEARCH_RESULT_TYPE.QUESTION_DECK,
+            id: "sample_maths_questions",
+        }],
+        physics: [/*{
+            title: "Sample Physics Questions",
+            type: SEARCH_RESULT_TYPE.QUESTION_DECK,
+            id: "sample_phy_questions",
+        }*/], // Uncomment when physics questions are available
+        chemistry: [{
+            title: "Sample Chemistry Questions",
+            type: SEARCH_RESULT_TYPE.QUESTION_DECK,
+            id: "sample_chem_questions",
+        }],
+        biology: [{
+            title: "Sample Biology Questions",
+            type: SEARCH_RESULT_TYPE.QUESTION_DECK,
+            id: "sample_bio_questions",
+        }],
+    };
+
+    return items[subject].length > 0 ? <ListView items={items[subject]} /> : null;
+};
+
 export const SubjectOverviewPage = withRouter((props: RouteComponentProps) => {
     const pageContext = useUrlPageTheme();
 
@@ -149,7 +178,7 @@ export const SubjectOverviewPage = withRouter((props: RouteComponentProps) => {
                 </ul>
             </p>
 
-            {/* <ExampleQuestions/> */}
+            <ExampleQuestions subject={pageContext.subject} />
 
             <LandingPageFooter context={pageContext} />
         </div>}

src/app/services/constants.ts

@@ -924,7 +924,7 @@ export function isAQuestionLikeDoc(doc: ContentDTO): doc is IsaacQuestionPageDTO
 
 export enum SEARCH_RESULT_TYPE {
     SHORTCUT = "shortcut",
-    GAMEBOARD = "gameboard",
+    QUESTION_DECK = "question deck",
 }
 
 export const documentDescription: {[documentType in DOCUMENT_TYPE]: string} = {

src/scss/phy/list-groups.scss

@@ -35,6 +35,14 @@
       &:not(:first-child) {
         border-top: 1px solid var(--border-light);
       }
+      &:nth-child(1) {
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+      }
+      &:nth-last-child(1) {
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
     }
 
     @include media-breakpoint-up(lg) {