Verified Commit c71b673a authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Make filteredListPage mobile friendly

parent d0992279
......@@ -9,7 +9,6 @@ const useStyles = makeStyles(
display: 'grid',
alignContent: 'start',
gridGap: '20px',
maxWidth: '400px',
gridTemplateRows: 'auto auto',
'& > *': {
......
import React from 'react'
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'gatsby-plugin-intl'
import { makeStyles, useTheme } from '@material-ui/core/styles'
import { Collapse, Button } from '@material-ui/core'
import StickyOnScroll from '../general/stickyOnScroll'
......@@ -24,9 +26,28 @@ const useStyles = makeStyles(
position: 'sticky',
padding: '1.5em',
top: 0,
[theme.breakpoints.down('sm')]: {
padding: '1em',
},
},
filterButton: {
display: 'none',
[theme.breakpoints.down('sm')]: {
display: 'inline-block',
marginBottom: '2em',
},
},
collapse: {
[theme.breakpoints.up('md')]: {
height: 'auto !important',
visibility: 'visible',
},
},
list: {
paddingTop: '2em',
[theme.breakpoints.down('sm')]: {
padding: '2em 1em 0',
},
},
}),
{ name: 'filteredList' }
......@@ -37,6 +58,7 @@ const FilteredListLayout = ({
className,
...props
}) => {
const [showMobileFilter, setShowMobileFilter] = useState(true)
const classes = useStyles()
const theme = useTheme()
......@@ -48,7 +70,19 @@ const FilteredListLayout = ({
className={classes.filter}
scrollTriggerHeight={theme.shape.headerHeight}
>
{filter}
<div>
<Button
className={classes.filterButton}
onClick={() => setShowMobileFilter(!showMobileFilter)}
>
<FormattedMessage
id={showMobileFilter ? 'filter.hide' : 'filter.show'}
/>
</Button>
<Collapse className={classes.collapse} in={showMobileFilter}>
{filter}
</Collapse>
</div>
</StickyOnScroll>
<div className={classes.list}>{children}</div>
</div>
......
......@@ -205,35 +205,8 @@ const StudydocumentsQuickFilter = ({ ...props }) => {
)}
/>
)
// TODO Autocomplete component to select lecture from summary list...
// content = [
// m(
// 'div',
// m(ListSelect, {
// placeholderText: i18n('studydocs.quickfilter.lecturePlaceholder'),
// toolbarAttrs: {
// background: '#fff',
// style: { borderRadius: '4px' },
// before: m(Shadow),
// },
// listAttrs: {
// permanent: true,
// height: null,
// style: { borderRadius: '4px', border: '1px solid #eee' },
// },
// onSelect: item => {
// filterValues.lecture = [item]
// this.state = STATE_SELECTED
// },
// options: controller.availableFilterValues.lecture
// ? Object.keys(controller.availableFilterValues.lecture).sort()
// : [],
// })
// ),
// ]
} else {
// step === STUDYDOCUMENTS_QUICKFILTER_STEP_SEMETSER is the default case
// step === STUDYDOCUMENTS_QUICKFILTER_STEP_SEMESTER is the default case
content = (
<div className={classes.stepSemester}>
{['itet', 'mavt', 'other'].map(department => (
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment