diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index 2983ea4..3524e80 100644
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -3,11 +3,10 @@ import {getArtist, getArtistDiscs} from "../services/entity_service";
import {CoverWithCaption} from './CoverArt';
import {Paginate} from "./Paginate";
import queryString from "query-string";
-
import {useLocation} from 'react-router-dom';
-export const Discs = (props) => {
+const Discs = (props) => {
const discs = props.discs ? props.discs : null;
const paginate = props.paginate ? props.paginate : null;
@@ -30,7 +29,7 @@ export const Discs = (props) => {
);
} else {
discContent = (
-
+
{[...Array(16)].map((p, index) => ())}
);
diff --git a/src/styles/main.scss b/src/styles/main.scss
index cfb6225..25323fc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -112,6 +112,10 @@ figure {
width: 100%;
}
+svg {
+ display: block;
+}
+
/* Navbar */
.nav {
display: flex;
@@ -272,35 +276,16 @@ ul.entity_list {
}
.cover-caption {
- height: 250px;
- width: 250px;
-
figcaption {
- position: relative;
- display: none;
- z-index: 2;
- height: 0;
- background-color: var(--accent);
- color: var(--white);
- font-weight: 600;
- padding: 1em;
- opacity: 0;
+ display: inline-block;
overflow: hidden;
- }
-
- &:hover {
- figcaption {
- display: block;
- animation: slidein 300ms ease-in-out both;
-
- @keyframes slidein {
- to {
- height: 80px;
- transform: translateY(-80px);
- opacity: 100;
- }
- }
- }
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ border-bottom: 3px solid var(--accent);
+ margin-top: .5em;
+ line-height: 1;
+ font-weight: 500;
+ max-width: 250px;
}
}
@@ -376,7 +361,7 @@ ul.tabs {
.discs {
.discs-list {
$grid-width: 250px;
- $grid-gap: 30px;
+ $grid-gap: 45px;
display: grid;
grid-auto-rows: $grid-width;
@@ -385,23 +370,23 @@ ul.tabs {
align-content: start;
@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);
}
}
- @media (min-width: $grid-width * 4 + $grid-gap * 4) {
+ @media (min-width: $grid-width * 4 + $grid-gap * 3) {
justify-content: space-between;
}
- &.loading {
- height: ($grid-width + $grid-gap) * 4;
- }
-
.cover-container {
width: 250px;
height: 250px;
+
+ cursor: pointer;
}
+
+ margin-bottom: 3em;
}
}
}