From 984a91e79cdec56ddbc280a7dbf080bd06bb9a33 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Sun, 6 Jun 2021 10:54:05 +0300
Subject: [PATCH] Small screens: all facets within one accordion
---
src/client/components/facet_bar/FacetBar.js | 50 +++++++++++++++++---
src/client/components/facet_bar/FacetInfo.js | 7 +--
src/client/containers/SemanticPortal.js | 4 ++
src/client/translations/sampo/localeEN.json | 1 +
4 files changed, 53 insertions(+), 9 deletions(-)
diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js
index c86efb36..12ce8e3d 100644
--- a/src/client/components/facet_bar/FacetBar.js
+++ b/src/client/components/facet_bar/FacetBar.js
@@ -17,6 +17,7 @@ import Accordion from '@material-ui/core/Accordion'
import AccordionSummary from '@material-ui/core/AccordionSummary'
import AccordionDetails from '@material-ui/core/AccordionDetails'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import Typography from '@material-ui/core/Typography'
import clsx from 'clsx'
const styles = theme => ({
@@ -283,6 +284,45 @@ class FacetBar extends React.Component {
)
}
+ renderFacets = ({ classes, facets, someFacetIsFetching }) => {
+ const { screenSize } = this.props
+ if (screenSize === 'xs' || screenSize === 'sm') {
+ return (
+ <Accordion>
+ <AccordionSummary
+ classes={{
+ root: classes.accordionSummaryRoot,
+ content: classes.accordionSummaryContent
+ }}
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls='panel1a-content'
+ id='panel1a-header'
+ >
+ <Typography variant='h6'>{intl.get('facetBar.filters')}</Typography>
+ </AccordionSummary>
+ <AccordionDetails
+ className={classes.accordionDetails}
+ />
+ {facets && Object.keys(facets).map(facetID => {
+ if (facetID !== 'datasetSelector') {
+ return this.renderFacet(facetID, someFacetIsFetching)
+ }
+ })}
+ </Accordion>
+ )
+ } else {
+ return (
+ <>
+ {facets && Object.keys(facets).map(facetID => {
+ if (facetID !== 'datasetSelector') {
+ return this.renderFacet(facetID, someFacetIsFetching)
+ }
+ })}
+ </>
+ )
+ }
+ }
+
render () {
const { classes, facetClass, resultClass, resultCount, facetData, facetedSearchMode } = this.props
const { facets } = facetData
@@ -332,13 +372,10 @@ class FacetBar extends React.Component {
fetchFacet={this.props.fetchFacet}
perspectiveID={facetClass}
clearAllFacets={this.props.clearAllFacets}
+ screenSize={this.props.screenSize}
/>
</Paper>}
- {facets && Object.keys(facets).map(facetID => {
- if (facetID !== 'datasetSelector') {
- return this.renderFacet(facetID, someFacetIsFetching)
- }
- })}
+ {this.renderFacets({ classes, facets, someFacetIsFetching })}
</div>
)
}
@@ -372,7 +409,8 @@ FacetBar.propTypes = {
defaultActiveFacets: PropTypes.instanceOf(Set).isRequired,
leafletMap: PropTypes.object,
showError: PropTypes.func.isRequired,
- rootUrl: PropTypes.string.isRequired
+ rootUrl: PropTypes.string.isRequired,
+ screenSize: PropTypes.string.isRequired
}
export const FacetBarComponent = FacetBar
diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js
index 19078712..660753a5 100644
--- a/src/client/components/facet_bar/FacetInfo.js
+++ b/src/client/components/facet_bar/FacetInfo.js
@@ -50,7 +50,8 @@ class FacetInfo extends React.Component {
handleRemoveAllFiltersOnClick = () => this.props.clearAllFacets({ facetClass: this.props.facetClass })
render () {
- const { classes, facetClass, resultClass, resultCount, someFacetIsFetching } = this.props
+ const { classes, facetClass, resultClass, resultCount, someFacetIsFetching, screenSize } = this.props
+ const mobileMode = screenSize === 'xs' || screenSize === 'sm'
const { facets } = this.props.facetData
const uriFilters = {}
const spatialFilters = {}
@@ -90,7 +91,7 @@ class FacetInfo extends React.Component {
{this.props.fetchingResultCount
? <CircularProgress style={{ color: purple[500] }} thickness={5} size={26} />
: <Typography variant='h6'>{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>}
- <Divider className={classes.facetInfoDivider} />
+ {!mobileMode && <Divider className={classes.facetInfoDivider} />}
{(activeUriFilters ||
activeSpatialFilters ||
activeTextFilters ||
@@ -127,7 +128,7 @@ class FacetInfo extends React.Component {
</div>
<Divider className={classes.facetInfoDivider} />
</>}
- <Typography variant='h6'>{intl.get('facetBar.narrowDownBy')}:</Typography>
+ {!mobileMode && <Typography variant='h6'>{intl.get('facetBar.narrowDownBy')}:</Typography>}
</div>
)
}
diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js
index 2d03a955..85296f25 100644
--- a/src/client/containers/SemanticPortal.js
+++ b/src/client/containers/SemanticPortal.js
@@ -352,6 +352,7 @@ const SemanticPortal = props => {
expanded={props[perspective.id].facetedSearchHeaderExpanded}
updateExpanded={props.updatePerspectiveHeaderExpanded}
descriptionHeight={perspective.perspectiveDescHeight}
+ screenSize={screenSize}
/>
<Grid
container spacing={1} className={props[perspective.id].facetedSearchHeaderExpanded
@@ -380,6 +381,7 @@ const SemanticPortal = props => {
showError={props.showError}
defaultActiveFacets={perspective.defaultActiveFacets}
rootUrl={rootUrlWithLang}
+ screenSize={screenSize}
/>
</Grid>
<Grid item xs={12} md={9} className={classes.resultsContainer}>
@@ -435,6 +437,7 @@ const SemanticPortal = props => {
expanded={props[perspective.id].instancePageHeaderExpanded}
updateExpanded={props.updatePerspectiveHeaderExpanded}
descriptionHeight={perspective.perspectiveDescHeight}
+ screenSize={screenSize}
/>
<Grid
container spacing={1} className={props[perspective.id].instancePageHeaderExpanded
@@ -497,6 +500,7 @@ const SemanticPortal = props => {
expanded={props[perspective.id].instancePageHeaderExpanded}
updateExpanded={props.updatePerspectiveHeaderExpanded}
descriptionHeight={perspective.perspectiveDescHeight}
+ screenSize={screenSize}
/>
<Grid
container spacing={1} className={props[perspective.id].instancePageHeaderExpanded
diff --git a/src/client/translations/sampo/localeEN.json b/src/client/translations/sampo/localeEN.json
index 6fd49067..b0074b87 100644
--- a/src/client/translations/sampo/localeEN.json
+++ b/src/client/translations/sampo/localeEN.json
@@ -28,6 +28,7 @@
},
"facetBar": {
"results": "Results",
+ "filters": "Filters",
"activeFilters": "Active filters:",
"removeAllFilters": "Remove all",
"narrowDownBy": "Narrow down by",
--
GitLab