From a8932f2c746054b937685bd4be5823c5d72cf0ae Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Fri, 19 Jun 2020 17:12:02 -0400
Subject: [PATCH] Issue #7: Solucionado problema de flexbox

Se decidio cambiar el space-between y dejarlo por default,
remplazandolo por una serie de margenes dado una media query por lo que
queda configurado para mostrar 1, 2, 3 o 4 entidades por lista
---
 src/components/EntityList.scss | 11 ++++++++++-
 src/views/Disc.jsx             |  6 +++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/EntityList.scss b/src/components/EntityList.scss
index 7b88bfb..a9b16e5 100644
--- a/src/components/EntityList.scss
+++ b/src/components/EntityList.scss
@@ -65,10 +65,19 @@ ul.entity-list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
 
   .entity-item {
     padding-bottom: .75em;
+
+    .entity-container{ width: 250px; }
+
+    @for $i from 1 through 4 {
+      @media (min-width: calc((250px * #{$i}) + (30px * #{$i}))) {
+        margin-right: calc(((100% / #{$i}) - 250px) / 2);
+        margin-left: calc(((100% / #{$i}) - 250px) / 2);
+      }
+    }
+
     a {
       .body {
         display: flex;
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index 6f284f6..000157d 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -24,10 +24,10 @@ const Versions = (props) => {
     props.onPageChanged(page);
   }
 
-  let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
+  let versionsComponent = <EntityList placeholder={true} size={10} grid={true} cover={true}/>;
   if(versions) {
     const items = versions.map((version) => {
-      const cover = (<CoverArt release={version} size={2}/>);
+      const cover = (<CoverArt release={version} size={3}/>);
       const subtitle =  (
         <Grid>
           <RowCol><span>{version.date}</span></RowCol>
@@ -47,7 +47,7 @@ const Versions = (props) => {
     const list = [{
       'items': items
     }];
-    versionsComponent = <EntityList list={list}/>
+    versionsComponent = <EntityList list={list} grid={true}/>
   }
 
   let paginateContent;