Widget en entityitem

src/components/EntityList.jsx

@@ -5,6 +5,7 @@ import "./EntityList.scss"
 const EntityPlaceholder = (props) => {
   return (
       <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
+        <div class="entity-container">
           <Link to={props.link}>
             {props.cover && <div className='cover pulsating'/>}
             <div className='body'>
@@ -12,6 +13,7 @@ const EntityPlaceholder = (props) => {
               <span className='subtitle'>&nbsp;</span>
             </div>
           </Link>
+        </div>
       </li>
   )
 }
@@ -19,6 +21,7 @@ const EntityPlaceholder = (props) => {
 const EntityItem = (props) => {
   return (
       <li className={'entity-item ' + (props.selected ? 'selected' : '')} id={props.id}>
+        <div class="entity-container">
           <Link to={props.link}>
             {props.cover &&
               <div className='cover'>
@@ -30,6 +33,12 @@ const EntityItem = (props) => {
               <span className='subtitle'>{props.subtitle}</span>
             </div>
           </Link>
+          { props.widget &&
+            <div class="widget">
+              <button class='button'>Agregar a mi lista</button>
+            </div>
+          }
+        </div>
       </li>
   )
 }
@@ -45,7 +54,7 @@ export const EntityList = (props) => {
   }else{
     entities = props.items.map(item => <EntityItem id={item.id} cover={item.cover} link={item.link}
                                                    title={item.title} subtitle={item.subtitle}
-                                                   selected={item.selected}/>);
+                                                   selected={item.selected} widget={item.widget}/>);
  }
 
   const className = props.grid ? "grid" : "column";

src/components/EntityList.scss

@@ -29,17 +29,29 @@
 
 // Column mode
 .entity-list.column {
-  display: flex;
-  flex-direction: column;
 
-  .entity-item a {
+  .entity-item .entity-container {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 1em 1em;
-    .body {
+    justify-content: space-between;
+
+    a {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      align-items: center;
+
+      padding: 1em 1em;
+
+      flex-grow: 2;
+      .body {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .widget {
+      display: flex;
+      align-items: center;
+      padding-right: 1em;
     }
   }
 }
@@ -93,7 +105,7 @@
 
 // Highligth Column
 .entity-list.column{
- .entity-item {
+  .entity-item {
     border-bottom: solid var(--line-width) var(--gray-1);
     transition: background-color 300ms ease-in;
 
@@ -111,7 +123,7 @@
       }
       background-color: var(--gray-1);
     }
- }
+  }
 }
 
 // Highligth Grid

src/styles/main.scss

@@ -107,6 +107,7 @@ button.button {
   font-weight: 500;
   font-size: var(--font-5);
   color: var(--accent);
+  white-space: nowrap;
 
   cursor: pointer;
 

src/views/Release.jsx

@@ -22,7 +22,8 @@ const Recordings = (props) => {
                     {recording.length && <div>[{toDuration(recording.length)}]</div>}
                     {recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
                   </Fragment>),
-      'selected': props.selected === recording.id
+      'selected': props.selected === recording.id,
+      'widget': <button className='button'>Agregar a mi lista</button>
 
     }));
     recordingsComponent = <EntityList items={items}/>