From 79bbff0e98b753f27ecd53f9b6c360cd963deb20 Mon Sep 17 00:00:00 2001 From: Deluan Date: Sat, 24 Apr 2021 11:29:12 -0400 Subject: [PATCH] Make Playlist grid more responsive --- ui/src/playlist/PlaylistList.js | 49 ++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/ui/src/playlist/PlaylistList.js b/ui/src/playlist/PlaylistList.js index 1baf9015f..434c8cd20 100644 --- a/ui/src/playlist/PlaylistList.js +++ b/ui/src/playlist/PlaylistList.js @@ -12,6 +12,7 @@ import { } from 'react-admin' import Switch from '@material-ui/core/Switch' import { DurationField, List, Writable, isWritable } from '../common' +import { useMediaQuery } from '@material-ui/core' const PlaylistFilter = (props) => ( @@ -55,24 +56,34 @@ const TogglePublicInput = ({ permissions, resource, record = {}, source }) => { ) } -const PlaylistList = ({ permissions, ...props }) => ( - }> - isWritable(r && r.owner)}> - - - - - - - - - - - -) +const PlaylistList = ({ permissions, ...props }) => { + const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) + const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) + + return ( + }> + isWritable(r && r.owner)} + > + + + {isDesktop && } + {isDesktop && } + {isDesktop && } + {!isXsmall && ( + + )} + + + + + + ) +} export default PlaylistList