From 6d20ca27f6bc36b81f0b936784be100a5faa2823 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Fri, 1 May 2020 11:50:07 -0400
Subject: [PATCH] Add mobile album list view

---
 ui/src/album/AlbumListView.js | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js
index 4df476ce6..40a7ff396 100644
--- a/ui/src/album/AlbumListView.js
+++ b/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
-        source="artist"
-        render={(r) => (r.albumArtist ? r.albumArtist : r.artist)}
-      />
+      <FunctionField source="artist" render={(r) => r.albumArtist} />
       {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