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

Prefiero que el caption del disco sea mas simple

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-06 07:57:37 -04:00
parent 46dfb9d38c
commit 7b398aa752
2 changed files with 21 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Artist.jsx
View File

@@ -3,11 +3,10 @@ import {getArtist, getArtistDiscs} from "../services/entity_service";
import {CoverWithCaption} from './CoverArt'; import {CoverWithCaption} from './CoverArt';
import {Paginate} from "./Paginate"; import {Paginate} from "./Paginate";
import queryString from "query-string"; import queryString from "query-string";
import {useLocation} from 'react-router-dom'; import {useLocation} from 'react-router-dom';
export const Discs = (props) => { const Discs = (props) => {
const discs = props.discs ? props.discs : null; const discs = props.discs ? props.discs : null;
const paginate = props.paginate ? props.paginate : null; const paginate = props.paginate ? props.paginate : null;
@@ -30,7 +29,7 @@ export const Discs = (props) => {
); );
} else { } else {
discContent = ( discContent = (
<ul className="discs-list loading"> <ul className="discs-list">
{[...Array(16)].map((p, index) => (<div key={index} className='cover-container pulsating'/>))} {[...Array(16)].map((p, index) => (<div key={index} className='cover-container pulsating'/>))}
</ul> </ul>
); );

53
src/styles/main.scss
View File

@@ -112,6 +112,10 @@ figure {
width: 100%; width: 100%;
} }
svg {
display: block;
}
/* Navbar */ /* Navbar */
.nav { .nav {
display: flex; display: flex;
@@ -272,35 +276,16 @@ ul.entity_list {
} }
.cover-caption { .cover-caption {
height: 250px;
width: 250px;
figcaption { figcaption {
position: relative; display: inline-block;
display: none;
z-index: 2;
height: 0;
background-color: var(--accent);
color: var(--white);
font-weight: 600;
padding: 1em;
opacity: 0;
overflow: hidden; overflow: hidden;
} white-space: nowrap;
text-overflow: ellipsis;
&:hover { border-bottom: 3px solid var(--accent);
figcaption { margin-top: .5em;
display: block; line-height: 1;
animation: slidein 300ms ease-in-out both; font-weight: 500;
max-width: 250px;
@keyframes slidein {
to {
height: 80px;
transform: translateY(-80px);
opacity: 100;
}
}
}
} }
} }
@@ -376,7 +361,7 @@ ul.tabs {
.discs { .discs {
.discs-list { .discs-list {
$grid-width: 250px; $grid-width: 250px;
$grid-gap: 30px; $grid-gap: 45px;
display: grid; display: grid;
grid-auto-rows: $grid-width; grid-auto-rows: $grid-width;
@@ -385,23 +370,23 @@ ul.tabs {
align-content: start; align-content: start;
@for $x from 1 to 5 { @for $x from 1 to 5 {
@media (min-width: $grid-width * $x + $grid-gap * $x) { @media (min-width: $grid-width * $x + $grid-gap * 3) {
grid-template-columns: repeat($x, auto); grid-template-columns: repeat($x, auto);
} }
} }
@media (min-width: $grid-width * 4 + $grid-gap * 4) { @media (min-width: $grid-width * 4 + $grid-gap * 3) {
justify-content: space-between; justify-content: space-between;
} }
&.loading {
height: ($grid-width + $grid-gap) * 4;
}
.cover-container { .cover-container {
width: 250px; width: 250px;
height: 250px; height: 250px;
cursor: pointer;
} }
margin-bottom: 3em;
} }
} }
} }