arian/navidrome
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Make spotify-ish more spotify-ish (#914)

Browse Source 
* [Theme] Allow customising album and player parts

* [Theme] Allow customizing song lists view

* Make spotify-ish more spotify-ish

* Fix responsive issues in spotify-ish

* Spotify-ish login page

* Add back the previous "Spotify-ish" theme as "Green"

Co-authored-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Samarjeet
2021-04-01 02:28:47 +05:30
committed by GitHub
parent 5128c049d7
commit ea65da484b
9 changed files with 573 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/album/AlbumGridView.js
+66 -54
View File
@@ -19,59 +19,64 @@ import {
RangeField,
} from '../common'
const useStyles = makeStyles((theme) => ({
root: {
margin: '20px',
},
tileBar: {
transition: 'all 150ms ease-out',
opacity: 0,
textAlign: 'left',
marginBottom: '3px',
background:
'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
},
tileBarMobile: {
textAlign: 'left',
marginBottom: '3px',
background:
'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
},
albumArtistName: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'left',
fontSize: '1em',
},
albumName: {
fontSize: '14px',
color: theme.palette.type === 'dark' ? '#eee' : 'black',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
albumSubtitle: {
fontSize: '12px',
color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
link: {
position: 'relative',
display: 'block',
textDecoration: 'none',
'&:hover $tileBar': {
opacity: 1,
const useStyles = makeStyles(
(theme) => ({
root: {
margin: '20px',
},
},
albumLink: {
position: 'relative',
display: 'block',
textDecoration: 'none',
},
}))
tileBar: {
transition: 'all 150ms ease-out',
opacity: 0,
textAlign: 'left',
marginBottom: '3px',
background:
'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
},
tileBarMobile: {
textAlign: 'left',
marginBottom: '3px',
background:
'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
},
albumArtistName: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'left',
fontSize: '1em',
},
albumName: {
fontSize: '14px',
color: theme.palette.type === 'dark' ? '#eee' : 'black',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
albumSubtitle: {
fontSize: '12px',
color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
link: {
position: 'relative',
display: 'block',
textDecoration: 'none',
'&:hover $tileBar': {
opacity: 1,
},
},
albumLink: {
position: 'relative',
display: 'block',
textDecoration: 'none',
},
albumContainer: {},
albumPlayButton: {},
}),
{ name: 'NDAlbumGridView' }
)
const useCoverStyles = makeStyles({
cover: {
@@ -112,7 +117,7 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
const classes = useStyles()
return (
<div>
<div className={classes.albumContainer}>
<Link
className={classes.link}
to={linkToRecord(basePath, record.id, 'show')}
@@ -120,7 +125,14 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
<Cover album={record} />
<GridListTileBar
className={isDesktop ? classes.tileBar : classes.tileBarMobile}
subtitle={<PlayButton color={'white'} record={record} size="small" />}
subtitle={
<PlayButton
className={classes.albumPlayButton}
color={'white'}
record={record}
size="small"
/>
}
actionIcon={<AlbumContextMenu record={record} color={'white'} />}
/>
</Link>