Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Filter Form overflow on mobile #7940

Merged
merged 10 commits into from
Jul 22, 2022
+34 −26
Merged

Fix Filter Form overflow on mobile #7940

Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46ca3e7
Fix filters list overflow on mobile
antoinefricker Jul 7, 2022
0373e2d
Clean margin and paddings
antoinefricker Jul 8, 2022
4ade8ab
Close issue
antoinefricker Jul 8, 2022
c8fadd8
Remove !important
antoinefricker Jul 8, 2022
bb6864f
Remove useless template string
antoinefricker Jul 21, 2022
9f086fb
Consistent top margin on any breakpoint
antoinefricker Jul 21, 2022
f8ad4aa
Correct AppBar right margin to content
antoinefricker Jul 22, 2022
d794df4
Better top app toolbar
antoinefricker Jul 22, 2022
62f4697
Keep consistent toolbar height on List, Edit and View templates
antoinefricker Jul 22, 2022
ee00ac6
Remove block
antoinefricker Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/ra-ui-materialui/src/layout/AppBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -153,14 +153,15 @@ const StyledAppBar = styled(MuiAppBar, {
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
[`& .${AppBarClasses.toolbar}`]: {
paddingRight: 24,
padding: `0 ${theme.spacing(1.5)} 0 0`,
[theme.breakpoints.down('md')]: {
minHeight: theme.spacing(6),
},
},

[`& .${AppBarClasses.menuButton}`]: {
marginLeft: '0.2em',
marginRight: '0.2em',
},

[`& .${AppBarClasses.title}`]: {
flex: 1,
textOverflow: 'ellipsis',
18 changes: 9 additions & 9 deletions packages/ra-ui-materialui/src/layout/TopToolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -20,20 +20,20 @@ const StyledToolbar = styled(Toolbar, {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'flex-end',
paddingBottom: theme.spacing(1),
gap: theme.spacing(1),
[theme.breakpoints.up('sm')]: {
minHeight: theme.spacing(6),
},
[theme.breakpoints.up('xs')]: {
paddingLeft: 0,
paddingRight: 0,
whiteSpace: 'nowrap',
flex: '0 1 auto',
minHeight: 'unset !important',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we avoid this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed that, as agreed, toolbar keeps (again) consistent height on List, Edit and View templates

[theme.breakpoints.up('md')]: {
padding: theme.spacing(0.5),
paddingTop: theme.spacing(1),
},
[theme.breakpoints.down('md')]: {
paddingRight: theme.spacing(2),
flex: '0 1 100%',
padding: theme.spacing(0.5),
paddingBottom: theme.spacing(1),
},
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
},
}));
15 changes: 7 additions & 8 deletions packages/ra-ui-materialui/src/list/ListToolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -67,17 +67,16 @@ const Root = styled(Toolbar, {
name: PREFIX,
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
position: 'relative',
justifyContent: 'space-between',
alignItems: 'flex-end',
minHeight: 'auto',
[theme.breakpoints.up('sm')]: {
paddingRight: 0,
},
[theme.breakpoints.up('xs')]: {
paddingLeft: 0,
},
width: '100%',
padding: '0 !important',
[theme.breakpoints.down('sm')]: {
paddingLeft: theme.spacing(2),
backgroundColor: theme.palette.background.paper,
},
[theme.breakpoints.down('md')]: {
margin: 0,
flexWrap: 'wrap',
},
}));
27 changes: 18 additions & 9 deletions packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -131,6 +131,7 @@ export const FilterFormBase = (props: FilterFormBaseProps) => {
filterElement={filterElement}
handleHide={handleHide}
resource={resource}
className={FilterFormClasses.filterFormInput}
/>
))}
<div className={FilterFormClasses.clearFix} />
@@ -200,22 +201,30 @@ const PREFIX = 'RaFilterForm';

export const FilterFormClasses = {
clearFix: `${PREFIX}-clearFix`,
filterFormInput: `${PREFIX}-filterFormInput`,
};

const StyledForm = styled('form', {
name: PREFIX,
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
marginTop: theme.spacing(-0.5),
marginBottom: theme.spacing(0.5),
minHeight: theme.spacing(8),
display: 'flex',
alignItems: 'flex-end',
flexWrap: 'wrap',
pointerEvents: 'none',

[`& .${FilterFormClasses.clearFix}`]: { clear: 'right' },
'&': {
display: 'flex',
flex: '0 1 auto',
[theme.breakpoints.up('md')]: {
flex: '0 1 100%',
},
flexWrap: 'wrap',
alignItems: 'flex-end',
minHeight: theme.spacing(8),
pointerEvents: 'none',
padding: `0 0 ${theme.spacing(0.5)} 0`,
},
'& .MuiFormHelperText-root': { display: 'none' },
[`& .${FilterFormClasses.clearFix}`]: { clear: 'right' },
[`& .${FilterFormClasses.filterFormInput} .MuiFormControl-root`]: {
marginTop: `${theme.spacing(1)}`,
},
}));

/**
1 change: 1 addition & 0 deletions packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -47,6 +47,7 @@ FilterFormInput.propTypes = {
filterElement: PropTypes.node,
handleHide: PropTypes.func,
resource: PropTypes.string,
className: PropTypes.string,
};

const PREFIX = 'RaFilterFormInput';