feat: implement AlbumShow using a Datagrid. WIP: still need to make it responsive

2020-02-12 20:35:35 -05:00
parent 8ebb85b0af
commit 9fa73e3b7b
10 changed files with 230 additions and 158 deletions
@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+export 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',
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '10em',
+      width: '10em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '15em',
+      width: '15em'
+    }
+  },
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [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'
+  }
+}))