Reorganize AudioTitle classes.

Should fix https://github.com/web-scrobbler/web-scrobbler/issues/2828
This commit is contained in:
Deluan
2021-04-24 18:06:24 -04:00
parent 79bbff0e98
commit 3cede28161
3 changed files with 25 additions and 27 deletions
+11 -13
View File
@@ -32,23 +32,21 @@ const useStyle = makeStyles(
audioTitle: { audioTitle: {
textDecoration: 'none', textDecoration: 'none',
color: theme.palette.primary.dark, color: theme.palette.primary.dark,
'&.songTitle': { },
fontWeight: 'bold', songTitle: {
}, fontWeight: 'bold',
'&.songInfo': { '&:hover + $qualityInfo': {
display: 'block', opacity: 1,
}, },
}, },
songInfo: {
display: 'block',
},
qualityInfo: { qualityInfo: {
marginTop: '-4px', marginTop: '-4px',
opacity: 0, opacity: 0,
transition: 'all 500ms ease-out', transition: 'all 500ms ease-out',
}, },
audioName: {
'&:hover + $qualityInfo': {
opacity: 1,
},
},
player: { player: {
display: (props) => (props.visible ? 'block' : 'none'), display: (props) => (props.visible ? 'block' : 'none'),
'@media screen and (max-width:810px)': { '@media screen and (max-width:810px)': {
@@ -86,15 +84,15 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
return ( return (
<Link to={`/album/${audioInfo.albumId}/show`} className={className}> <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
<span className={`${className} songTitle`}> <span>
<span className={classes.audioName}>{audioInfo.name}</span> <span className={classes.songTitle}>{audioInfo.name}</span>
{isDesktop && ( {isDesktop && (
<QualityInfo record={qi} className={classes.qualityInfo} /> <QualityInfo record={qi} className={classes.qualityInfo} />
)} )}
</span> </span>
{!isMobile && ( {!isMobile && (
<div className={classes.artistAlbum}> <div className={classes.artistAlbum}>
<span className={`${className} songInfo`}> <span className={classes.songInfo}>
{`${audioInfo.singer} - ${audioInfo.album}`} {`${audioInfo.singer} - ${audioInfo.album}`}
</span> </span>
</div> </div>
+7 -7
View File
@@ -319,13 +319,13 @@ export default {
audioTitle: { audioTitle: {
color: '#000', color: '#000',
fontSize: '0.875rem', fontSize: '0.875rem',
'&.songTitle': { },
fontWeight: 400, songTitle: {
}, fontWeight: 400,
'&.songInfo': { },
fontSize: '0.675rem', songInfo: {
color: '#b3b3b3', fontSize: '0.675rem',
}, color: '#b3b3b3',
}, },
player: {}, player: {},
}, },
+7 -7
View File
@@ -241,13 +241,13 @@ export default {
audioTitle: { audioTitle: {
color: '#fff', color: '#fff',
fontSize: '0.875rem', fontSize: '0.875rem',
'&.songTitle': { },
fontWeight: 400, songTitle: {
}, fontWeight: 400,
'&.songInfo': { },
fontSize: '0.675rem', songInfo: {
color: '#b3b3b3', fontSize: '0.675rem',
}, color: '#b3b3b3',
}, },
player: { player: {
border: '10px solid blue', border: '10px solid blue',