feat: responsive album view

ui/src/album/AlbumDetails.js

@@ -1,9 +1,9 @@
+import React, { Fragment } from 'react'
 import { Loading, useGetOne } from 'react-admin'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { subsonicUrl } from '../subsonic'
-import React from 'react'
 
-export const AlbumDetails = ({ id, children, classes }) => {
+const AlbumDetails = ({ id, classes }) => {
   const { data, loading, error } = useGetOne('album', id)
 
   if (loading) {
@@ -38,9 +38,10 @@ export const AlbumDetails = ({ id, children, classes }) => {
         <Typography component="h6">
           {data.albumArtist || data.artist}
         </Typography>
-        <Typography variant="h7">{genreYear(data)}</Typography>
+        <Typography component="p">{genreYear(data)}</Typography>
       </CardContent>
-      {children}
     </Card>
   )
 }
+
+export default AlbumDetails

ui/src/album/AlbumShow.js

@@ -2,33 +2,58 @@ import React from 'react'
 import { Show } from 'react-admin'
 import { Title } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
-import { AlbumSongList } from './AlbumSongList'
-import { AlbumDetails } from './AlbumDetails'
+import AlbumSongList from './AlbumSongList'
+import AlbumDetails from './AlbumDetails'
 
 const AlbumTitle = ({ record }) => {
   return <Title subTitle={record ? record.name : ''} />
 }
 
-const useStyles = makeStyles({
-  container: { minWidth: '24em', padding: '1em' },
-  rightAlignedCell: { textAlign: 'right' },
-  boldCell: { fontWeight: 'bold' },
+const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em'
+    }
+  },
   albumCover: {
     display: 'inline-block',
-    height: '8em',
-    width: '8em'
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '15em',
+      width: '15em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '20em',
+      width: '20em'
+    }
   },
   albumDetails: {
     display: 'inline-block',
     verticalAlign: 'top',
-    width: '14em'
+    [theme.breakpoints.down('xs')]: {
+      width: '14em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em'
+    }
   },
   albumTitle: {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }
-})
+}))
 
 const AlbumShow = (props) => {
   const classes = useStyles()

ui/src/album/AlbumSongList.js

@@ -4,7 +4,7 @@ import { DurationField, PlayButton } from '../common'
 import { addTrack } from '../player'
 import AddIcon from '@material-ui/icons/Add'
 
-export const AlbumSongList = (props) => {
+const AlbumSongList = (props) => {
   const { record } = props
   const { data, total, loading, error } = useGetList(
     'song',
@@ -43,3 +43,5 @@ export const AlbumSongList = (props) => {
     />
   )
 }
+
+export default AlbumSongList