Skip to content

Commit 37ec8ae

Browse files
committed
Re-align concepts browse button
1 parent 8d8b94f commit 37ec8ae

File tree

2 files changed

+25
-20
lines changed

2 files changed

+25
-20
lines changed

src/app/components/pages/Concepts.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Link, RouteComponentProps, withRouter} from "react-router-dom";
33
import {selectors, useAppSelector} from "../../state";
44
import {Badge, Card, CardBody, CardHeader, Container} from "reactstrap";
55
import queryString from "query-string";
6-
import {getFilteredStageOptions, isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
6+
import {above, below, getFilteredStageOptions, isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags, useDeviceSize} from "../../services";
77
import {generateSubjectLandingPageCrumbFromContext, TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
88
import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
99
import {IsaacSpinner} from "../handlers/IsaacSpinner";
@@ -16,6 +16,7 @@ import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
1616
import { ContentSummaryDTO, Stage } from "../../../IsaacApiTypes";
1717
import { skipToken } from "@reduxjs/toolkit/query";
1818
import { AffixButton } from "../elements/AffixButton";
19+
import classNames from "classnames";
1920

2021
const subjectToTagMap = {
2122
physics: TAG_ID.physics,
@@ -29,6 +30,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
2930
const {location, history} = props;
3031
const user = useAppSelector(selectors.user.orNull);
3132
const pageContext = useUrlPageTheme();
33+
const deviceSize = useDeviceSize();
3234

3335
const searchParsed = queryString.parse(location.search, {arrayFormat: "comma"});
3436

@@ -117,6 +119,15 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
117119

118120
const crumb = isPhy && isFullyDefinedContext(pageContext) && generateSubjectLandingPageCrumbFromContext(pageContext);
119121

122+
const BrowseAllButton = <AffixButton size="md" color="keyline" tag={Link} to="/concepts" className={classNames("ms-auto btn-horizontal", {"btn-lg": below["md"](deviceSize), "btn-md": above["lg"](deviceSize)})}
123+
affix={{
124+
affix: "icon-arrow-right",
125+
position: "suffix",
126+
type: "icon"
127+
}}>
128+
Browse all concepts
129+
</AffixButton>;
130+
120131
const sidebarProps = {searchText, setSearchText, conceptFilters, setConceptFilters, applicableTags, tagCounts};
121132

122133
return (
@@ -128,20 +139,13 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
128139
/>
129140
<SidebarLayout>
130141
{pageContext?.subject
131-
? <SubjectSpecificConceptListSidebar {...sidebarProps}/>
142+
? <SubjectSpecificConceptListSidebar {...sidebarProps} optionBar={BrowseAllButton}/>
132143
: <GenericConceptsSidebar {...sidebarProps} searchStages={searchStages} setSearchStages={setSearchStages} stageCounts={stageCounts}/>
133144
}
134145
<MainContent>
135146
{pageContext?.subject && <div className="d-flex align-items-baseline flex-wrap flex-md-nowrap flex-lg-wrap flex-xl-nowrap mt-3">
136-
<p className="me-3">The concepts shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
137-
<AffixButton size="md" color="keyline" tag={Link} to="/concepts" className="ms-auto"
138-
affix={{
139-
affix: "icon-arrow-right",
140-
position: "suffix",
141-
type: "icon"
142-
}}>
143-
Browse all concepts
144-
</AffixButton>
147+
<p className="me-0 me-lg-3">The concepts shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
148+
{above["lg"](deviceSize) && BrowseAllButton}
145149
</div>}
146150
{isPhy && <div className="list-results-container p-2 my-4">
147151
<ShowLoadingQuery

src/app/components/pages/QuestionFinder.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -435,14 +435,15 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
435435

436436
const crumb = isPhy && isFullyDefinedContext(pageContext) && generateSubjectLandingPageCrumbFromContext(pageContext);
437437

438-
const BrowseAllButton = <AffixButton color="keyline" tag={Link} to="/questions" className={classNames("ms-auto btn-horizontal", {"btn-lg": below["md"](deviceSize), "btn-md": above["lg"](deviceSize)})}
439-
affix={{
440-
affix: "icon-arrow-right",
441-
position: "suffix",
442-
type: "icon"
443-
}}>
444-
Browse all questions
445-
</AffixButton>;
438+
const BrowseAllButton = (pageContext?.subject && pageContext.stage) &&
439+
<AffixButton color="keyline" tag={Link} to="/questions" className={classNames("ms-auto btn-horizontal", {"btn-lg": below["md"](deviceSize), "btn-md": above["lg"](deviceSize)})}
440+
affix={{
441+
affix: "icon-arrow-right",
442+
position: "suffix",
443+
type: "icon"
444+
}}>
445+
Browse all questions
446+
</AffixButton>;
446447

447448
return <Container id="finder-page" className={classNames("mb-5")} { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
448449
<TitleAndBreadcrumb
@@ -476,7 +477,7 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
476477
<div className="my-3">
477478
{(pageContext?.subject && pageContext.stage)
478479
? <div className="d-flex align-items-baseline flex-wrap flex-md-nowrap flex-lg-wrap flex-xl-nowrap">
479-
<p className="me-3">The questions shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
480+
<p className="me-0 me-lg-3">The questions shown on this page have been filtered to only show those that are relevant to {getHumanContext(pageContext)}.</p>
480481
{above["lg"](deviceSize) && BrowseAllButton}
481482
</div>
482483
: <>Use our question finder to find questions to try on topics in Physics, Maths, Chemistry and Biology.

0 commit comments

Comments
 (0)