Move "browse all questions/concepts" to top of page

On subject-specific question finders and concept listings, move the "browse all" button out of the sidebar to the top of the page. Remove this option entirely for practice tests because we don't want to link to the main practice tests listing anywhere.

Author: axlewin

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

@@ -426,20 +426,6 @@ export const SubjectSpecificConceptListSidebar = (props: ConceptListSidebarProps
                 }
             </div>
         </search>
-
-        <div className="section-divider"/>
-
-        <div className="sidebar-help">
-            <p>The concepts shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
-            <p>If you want to explore broader concepts across multiple subjects or learning stages, you can use the main concept browser:</p>
-            <AffixButton size="md" color="keyline" tag={Link} to="/concepts" affix={{
-                affix: "icon-right",
-                position: "suffix",
-                type: "icon"
-            }}>
-                Browse concepts
-            </AffixButton>
-        </div>
     </ContentSidebar>;
 };
 
@@ -490,23 +476,6 @@ export const GenericConceptsSidebar = (props: ConceptListSidebarProps) => {
             </div>
         </search>
 
-        <div className="section-divider"/>
-
-        {pageContext?.subject && <>
-            <div className="section-divider"/>
-
-            <div className="sidebar-help">
-                <p>The concepts shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
-                <p>If you want to explore broader concepts across multiple subjects or learning stages, you can use the main concept browser:</p>
-                <AffixButton size="md" color="keyline" tag={Link} to="/concepts" affix={{
-                    affix: "icon-right",
-                    position: "suffix",
-                    type: "icon"
-                }}>
-                    Browse concepts
-                </AffixButton>
-            </div>
-        </>}
     </ContentSidebar>;
 };
 
@@ -541,22 +510,6 @@ export const QuestionFinderSidebar = (props: QuestionFinderSidebarProps) => {
 
             <QuestionFinderFilterPanel {...questionFinderFilterPanelProps} />
         </search>
-
-        {pageContext?.subject && pageContext?.stage && <>
-            <div className="section-divider"/>
-
-            <div className="sidebar-help">
-                <p>The questions shown here have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
-                <p>If you want to explore our full range of questions across multiple subjects or learning stages, you can use the main question finder:</p>
-                <AffixButton size="md" color="keyline" tag={Link} to="/questions" affix={{
-                    affix: "icon-right",
-                    position: "suffix",
-                    type: "icon"
-                }}>
-                    Browse all questions
-                </AffixButton>
-            </div>
-        </>}
     </ContentSidebar>;
 };
 
@@ -660,20 +613,6 @@ export const PracticeQuizzesSidebar = (props: PracticeQuizzesSidebarProps) => {
             </ul>
         </>}
 
-        {isFullyDefinedContext(pageContext) && <>
-            <div className="section-divider"/>
-            <div className="sidebar-help">
-                <p>The practice tests shown here have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
-                <p>If you want to explore our full range of practice tests, you can view the main practice tests page:</p>
-                <AffixButton size="md" color="keyline" tag={Link} to="/practice_tests" affix={{
-                    affix: "icon-right",
-                    position: "suffix",
-                    type: "icon"
-                }}>
-                    Browse all practice tests
-                </AffixButton>
-            </div>
-        </>}
         <div className="section-divider"/>
         <div className="sidebar-help">
             <p>You can see all of the tests that you have in progress or have completed in your My Isaac:</p>

src/app/components/pages/Concepts.tsx

@@ -1,5 +1,5 @@
 import React, {FormEvent, MutableRefObject, useEffect, useMemo, useRef, useState} from "react";
-import {RouteComponentProps, withRouter} from "react-router-dom";
+import {Link, RouteComponentProps, withRouter} from "react-router-dom";
 import {selectors, useAppSelector} from "../../state";
 import {Badge, Card, CardBody, CardHeader, Container} from "reactstrap";
 import queryString from "query-string";
@@ -10,11 +10,12 @@ import {IsaacSpinner} from "../handlers/IsaacSpinner";
 import { ListView } from "../elements/list-groups/ListView";
 import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/list-groups/ContentSummaryListGroupItem";
 import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout, GenericConceptsSidebar } from "../elements/layout/SidebarLayout";
-import { isFullyDefinedContext, useUrlPageTheme } from "../../services/pageContext";
+import { getHumanContext, isFullyDefinedContext, useUrlPageTheme } from "../../services/pageContext";
 import { useListConceptsQuery } from "../../state/slices/api/conceptsApi";
 import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
 import { ContentSummaryDTO } from "../../../IsaacApiTypes";
 import { skipToken } from "@reduxjs/toolkit/query";
+import { AffixButton } from "../elements/AffixButton";
 
 const subjectToTagMap = {
     physics: TAG_ID.physics,
@@ -113,13 +114,25 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
                 currentPageTitle="Concepts" 
                 intermediateCrumbs={crumb ? [crumb] : undefined}
                 icon={{type: "hex", icon: "icon-concept"}}
+                className="mb-4"
             />
             <SidebarLayout>
                 {pageContext?.subject 
                     ? <SubjectSpecificConceptListSidebar {...sidebarProps}/> 
                     : <GenericConceptsSidebar {...sidebarProps}/>
                 }
                 <MainContent>
+                    {pageContext?.subject && <div className="d-flex align-items-baseline flex-wrap flex-md-nowrap">
+                        <p className="me-3 mt-2">The concepts shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
+                        <AffixButton size="md" color="keyline" tag={Link} to="/concepts" className="ms-auto"
+                            affix={{
+                                affix: "icon-right",
+                                position: "suffix",
+                                type: "icon"
+                            }}>
+                            Browse all concepts
+                        </AffixButton>
+                    </div>}
                     {isPhy && <div className="list-results-container p-2 my-4">
                         <ShowLoadingQuery
                             query={listConceptsQuery}

src/app/components/pages/QuestionFinder.tsx

@@ -52,6 +52,8 @@ import { PageFragment } from "../elements/PageFragment";
 import { RenderNothing } from "../elements/RenderNothing";
 import { processTagHierarchy, pruneTreeNode } from "../../services/questionHierarchy";
 import { SearchInputWithIcon } from "../elements/SearchInputs";
+import { AffixButton } from "../elements/AffixButton";
+import { Link } from "react-router-dom";
 import { updateTopicChoices } from "../../services";
 
 // Type is used to ensure that we check all query params if a new one is added in the future
@@ -459,10 +461,20 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
 
                 {siteSpecific(
                     <div className="my-3">
-                        {(pageContext?.subject && pageContext.stage 
-                            ? `Use our question finder to find questions to try on ${getHumanContext(pageContext)} topics.` 
-                            : "Use our question finder to find questions to try on topics in Physics, Maths, Chemistry and Biology."
-                        ) + " Use our practice questions to become fluent in topics and then take your understanding and problem solving skills to the next level with our challenge questions."}
+                        {(pageContext?.subject && pageContext.stage)
+                            ? <div className="d-flex align-items-baseline flex-wrap flex-md-nowrap">
+                                <p className="me-3 mt-2">The questions shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
+                                <AffixButton size="md" color="keyline" tag={Link} to="/questions" className="ms-auto"
+                                    affix={{
+                                        affix: "icon-right",
+                                        position: "suffix",
+                                        type: "icon"
+                                    }}>
+                                    Browse all questions
+                                </AffixButton>
+                            </div>
+                            : <>Use our question finder to find questions to try on topics in Physics, Maths, Chemistry and Biology.
+                              Use our practice questions to become fluent in topics and then take your understanding and problem solving skills to the next level with our challenge questions.</>}
                     </div>,
                     <PageFragment fragmentId={"question_finder_intro"} ifNotFound={RenderNothing} />
                 )}