diff options
| author | Eugene Sokolov <eug-vs@keemail.me> | 2020-11-15 08:03:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-11-15 08:03:24 +0300 |
| commit | d23df805ed5d0e78c604d5c9f81f21bbc6a06288 (patch) | |
| tree | 2c78cdec9460feac5affc98a768f80857921bb92 | |
| parent | 83f400f3c760b17cb71be259b3d322db38139d4a (diff) | |
| parent | afa7e4abe02959798665949193d832907d97153a (diff) | |
| download | react-benzin-d23df805ed5d0e78c604d5c9f81f21bbc6a06288.tar.gz | |
Merge pull request #19 from eug-vs/develop
Optimize ContentSection for mobile
| -rw-r--r-- | package-lock.json | 2 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/lib/ContentSection/ContentSection.tsx | 12 |
3 files changed, 12 insertions, 4 deletions
diff --git a/package-lock.json b/package-lock.json index bc32763..a147a70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-benzin", - "version": "4.0.1", + "version": "4.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 07dce12..05fa52e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-benzin", - "version": "4.0.1", + "version": "4.0.2", "description": "A powerful React Material components library.", "homepage": "https://eug-vs.github.io/react-benzin", "main": "dist/index.js", diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx index 3432bd5..f18684c 100644 --- a/src/lib/ContentSection/ContentSection.tsx +++ b/src/lib/ContentSection/ContentSection.tsx @@ -4,6 +4,8 @@ import { Typography, Divider, makeStyles, + useMediaQuery, + Theme, } from '@material-ui/core'; @@ -14,13 +16,19 @@ interface PropTypes { const useStyles = makeStyles(theme => ({ content: { - padding: theme.spacing(2, 2, 1, 3), + [theme.breakpoints.up('md')]: { + padding: theme.spacing(2, 2, 1, 3), + }, + [theme.breakpoints.down('sm')]: { + padding: theme.spacing(2, 0), + }, marginBottom: theme.spacing(1), }, })); const ContentSection: React.FC<PropTypes> = ({ sectionName, children, level = 0 }) => { const classes = useStyles(); + const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')); let adjustedLevel = level + 2; // Make everything smaller if (adjustedLevel > 6) adjustedLevel = 6; @@ -31,7 +39,7 @@ const ContentSection: React.FC<PropTypes> = ({ sectionName, children, level = 0 return ( <> <Typography variant={variant}>{sectionName}</Typography> - <Divider variant="middle" /> + <Divider variant={isMobile ? 'fullWidth' : 'middle'} /> <Typography component="div" className={classes.content}> {children} </Typography> |