skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mejoras visuales

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-04 05:26:31 -04:00
parent c050d39586
commit 0950c86a27
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Search.jsx
View File

@@ -96,6 +96,13 @@ class SearchSongs extends React.Component {
} }
class SearchDisc extends React.Component { class SearchDisc extends React.Component {
getReleaseYear = (release) => {
const releaseDate = new Date(release);
return (
<span className='release-date'>{releaseDate.getFullYear()}</span>
)
}
render() { render() {
const disc = this.props.disc; const disc = this.props.disc;
return ( return (
@@ -103,7 +110,7 @@ class SearchDisc extends React.Component {
<Link to={`/disc/${disc.id}`}> <Link to={`/disc/${disc.id}`}>
{disc.cover_art ? <img src={disc.cover_art.image} className='coverart' alt={`Cover del disco: ${disc.title}`}/> : <DiscSVG className='coverart'/>} {disc.cover_art ? <img src={disc.cover_art.image} className='coverart' alt={`Cover del disco: ${disc.title}`}/> : <DiscSVG className='coverart'/>}
<div class='description'> <div class='description'>
<span>{disc.title}</span> <span>{disc.title} {disc.date && this.getReleaseYear(disc.date)}</span>
<span className='small'>{disc.artist[0].name}</span> <span className='small'>{disc.artist[0].name}</span>
</div> </div>
</Link> </Link>

16
src/styles/main.scss
View File

@@ -3,7 +3,8 @@
--white: hsl(0, 0%, 99%); --white: hsl(0, 0%, 99%);
--gray-1: hsl(0, 0%, 95%); --gray-1: hsl(0, 0%, 95%);
--gray-2: hsl(0, 0%, 85%); --gray-2: hsl(0, 0%, 85%);
--gray-3: hsl(0, 0%, 30%); --gray-3: hsl(0, 0%, 80%);
--gray-4: hsl(0, 0%, 30%);
--black: hsl(0, 0%, 20%); --black: hsl(0, 0%, 20%);
--accent: hsl(354, 81%, 56%); --accent: hsl(354, 81%, 56%);
@@ -152,7 +153,7 @@ ul.entity_list {
padding-left: 1rem; padding-left: 1rem;
.small { .small {
color: var(--gray-3); color: var(--gray-4);
font-size: .8rem; font-size: .8rem;
} }
} }
@@ -175,6 +176,17 @@ ul.entity_list {
margin: 1rem; margin: 1rem;
border: 1px solid var(--gray-2) border: 1px solid var(--gray-2)
} }
.release-date {
display: inline-block;
font-size: .7rem;
background-color: var(--gray-4);;
color: var(--white);
padding: .1rem .5rem;
border-radius: .25rem;
text-align: center;
line-height: 1;
}
} }
} }