third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-06 02:13:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fine tune album grid

Browse Source
This commit is contained in:
Deluan 2020-04-07 21:25:06 -04:00
parent f537984bbf
commit d0188db4f9
1 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/src/album/AlbumGridView.js
View File

@ -11,6 +11,10 @@ const useStyles = makeStyles((theme) => ({
root: { root: {
margin: '20px' margin: '20px'
}, },
gridListTile: {
minHeight: '200px',
minWidth: '200px'
},
cover: { cover: {
display: 'inline-block', display: 'inline-block',
width: '100%', width: '100%',
@ -32,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
const getColsForWidth = (width) => { const getColsForWidth = (width) => {
if (width === 'xs') return 2 if (width === 'xs') return 2
if (width === 'sm') return 3 if (width === 'sm') return 4
if (width === 'md') return 5 if (width === 'md') return 5
if (width === 'lg') return 6 if (width === 'lg') return 6
return 7 return 7
@ -43,14 +47,10 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<GridList <GridList cellHeight={'auto'} cols={getColsForWidth(width)} spacing={20}>
cellHeight={'auto'}
cols={getColsForWidth(width)}
className={classes.gridList}
spacing={20}
>
{ids.map((id) => ( {ids.map((id) => (
<GridListTile <GridListTile
className={classes.gridListTile}
component={Link} component={Link}
key={id} key={id}
to={linkToRecord(basePath, data[id].id, 'show')} to={linkToRecord(basePath, data[id].id, 'show')}
@ -68,11 +68,9 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
className={classes.tileBar} className={classes.tileBar}
title={data[id].name} title={data[id].name}
subtitle={ subtitle={
<> <div className={classes.albumArtistName}>
<div className={classes.albumArtistName}> {data[id].albumArtist}
{data[id].albumArtist} </div>
</div>
</>
} }
/> />
</GridListTile> </GridListTile>