@@ -3,7 +3,7 @@ import {Link, RouteComponentProps, withRouter} from "react-router-dom";
3
3
import { selectors , useAppSelector } from "../../state" ;
4
4
import { Badge , Card , CardBody , CardHeader , Container } from "reactstrap" ;
5
5
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" ;
7
7
import { generateSubjectLandingPageCrumbFromContext , TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb" ;
8
8
import { ShortcutResponse , Tag } from "../../../IsaacAppTypes" ;
9
9
import { IsaacSpinner } from "../handlers/IsaacSpinner" ;
@@ -16,6 +16,7 @@ import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
16
16
import { ContentSummaryDTO , Stage } from "../../../IsaacApiTypes" ;
17
17
import { skipToken } from "@reduxjs/toolkit/query" ;
18
18
import { AffixButton } from "../elements/AffixButton" ;
19
+ import classNames from "classnames" ;
19
20
20
21
const subjectToTagMap = {
21
22
physics : TAG_ID . physics ,
@@ -29,6 +30,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
29
30
const { location, history} = props ;
30
31
const user = useAppSelector ( selectors . user . orNull ) ;
31
32
const pageContext = useUrlPageTheme ( ) ;
33
+ const deviceSize = useDeviceSize ( ) ;
32
34
33
35
const searchParsed = queryString . parse ( location . search , { arrayFormat : "comma" } ) ;
34
36
@@ -117,6 +119,15 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
117
119
118
120
const crumb = isPhy && isFullyDefinedContext ( pageContext ) && generateSubjectLandingPageCrumbFromContext ( pageContext ) ;
119
121
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
+
120
131
const sidebarProps = { searchText, setSearchText, conceptFilters, setConceptFilters, applicableTags, tagCounts} ;
121
132
122
133
return (
@@ -128,20 +139,13 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
128
139
/>
129
140
< SidebarLayout >
130
141
{ pageContext ?. subject
131
- ? < SubjectSpecificConceptListSidebar { ...sidebarProps } />
142
+ ? < SubjectSpecificConceptListSidebar { ...sidebarProps } optionBar = { BrowseAllButton } />
132
143
: < GenericConceptsSidebar { ...sidebarProps } searchStages = { searchStages } setSearchStages = { setSearchStages } stageCounts = { stageCounts } />
133
144
}
134
145
< MainContent >
135
146
{ 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 }
145
149
</ div > }
146
150
{ isPhy && < div className = "list-results-container p-2 my-4" >
147
151
< ShowLoadingQuery
0 commit comments