Add mobile album list view

ui/src/album/AlbumListView.js

@@ -3,13 +3,13 @@ import {
   BooleanField,
   Datagrid,
   DateField,
-  NumberField,
   FunctionField,
+  NumberField,
   Show,
   SimpleShowLayout,
   TextField,
 } from 'react-admin'
-import { DurationField, RangeField } from '../common'
+import { DurationField, RangeField, SimpleList } from '../common'
 import { useMediaQuery } from '@material-ui/core'
 import AlbumContextMenu from './AlbumContextMenu'
 
@@ -28,19 +28,32 @@ const AlbumDetails = (props) => {
 
 const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  return (
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  return isXsmall ? (
+    <SimpleList
+      primaryText={(r) => r.name}
+      secondaryText={(r) => r.albumArtist}
+      tertiaryText={(r) => (
+        <>
+          <RangeField record={r} source={'year'} sortBy={'maxYear'} />
+          &nbsp;&nbsp;&nbsp;
+        </>
+      )}
+      linkType={'show'}
+      rightIcon={(r) => <AlbumContextMenu record={r} />}
+      {...rest}
+    />
+  ) : (
     <Datagrid expand={<AlbumDetails />} rowClick={'show'} {...rest}>
       <TextField source="name" />
-      <FunctionField
+      <FunctionField source="artist" render={(r) => r.albumArtist} />
-        source="artist"
-        render={(r) => (r.albumArtist ? r.albumArtist : r.artist)}
-      />
       {isDesktop && <NumberField source="songCount" />}
       {isDesktop && <NumberField source="playCount" />}
-      {isDesktop && <RangeField source={'year'} sortBy={'maxYear'} />}
+      <RangeField source={'year'} sortBy={'maxYear'} />
       {isDesktop && <DurationField source="duration" />}
       <AlbumContextMenu />
     </Datagrid>
   )
 }
+
 export default AlbumListView