Small screens: all facets within one accordion

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

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>
     )
   }

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

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",