From 7b398aa75274c474867ac69af5df02338f3b1366 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Sat, 6 Jun 2020 07:57:37 -0400
Subject: [PATCH] Prefiero que el caption del disco sea mas simple

---
 src/components/Artist.jsx |  5 ++--
 src/styles/main.scss      | 53 ++++++++++++++-------------------------
 2 files changed, 21 insertions(+), 37 deletions(-)

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 = (
-            <ul className="discs-list loading">
+            <ul className="discs-list">
                 {[...Array(16)].map((p, index) => (<div key={index} className='cover-container pulsating'/>))}
             </ul>
         );
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;
     }
   }
 }