From e6b78fe217e387e5fe711e0f3aab3957d9c6997b Mon Sep 17 00:00:00 2001
From: benjacanas <benjamin.canas@bitlogic.io>
Date: Mon, 11 Apr 2022 14:36:58 -0300
Subject: [PATCH 1/2] expanded grid title y ver mas

---
 src/components/expandGrid/ExpandGrid.js   | 13 +++++++++---
 src/components/expandGrid/expandGrid.scss | 25 +++++++++++++++++------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index c7810ad8..e9948d6e 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -1,3 +1,4 @@
+import { Link } from "gatsby"
 import React, { useEffect, useRef, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import MarkdownView from "react-showdown"
@@ -36,7 +37,7 @@ const ListItem = ({ index, onClick, data }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
             <div className="listItem-more">
-              <p>Ver mas</p>
+              <h4>{data.title}</h4>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -54,6 +55,7 @@ const ListItem = ({ index, onClick, data }) => {
 }
 
 const ExpandedListItem = ({ index, data, isFirst }) => {
+  console.log(data)
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -77,9 +79,15 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div className={"additional-content " + isFirst ? "animated-in" : ""}>
+            <div
+              className={"additional-content " + (isFirst ? "animated-in" : "")}
+            >
               <div>
+                <h4>{data.title}</h4>
                 <MarkdownView markdown={data.text} />
+                {data.landing_page && (
+                  <Link to={"/" + data.landing_page.slug}>Ver más</Link>
+                )}
               </div>
             </div>
           </div>
@@ -113,7 +121,6 @@ const AnimatedList = ({ items }) => {
       }
     }
   }
-
   return (
     <Flipper
       flipKey={itemsArray.focused}
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 78ad245f..7485965b 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 5em;
+  padding: 0 2em;
   width: 100%;
 }
 
@@ -40,7 +40,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: rgba(180, 180, 180, 0.24);
+  background-color: rgba(255, 255, 255, 0.158);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -116,16 +116,16 @@
 
 .listItem-more{
   position: absolute;
-  inset: 0 0 0 0;
+  inset: 0 0 20px 20px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-end;
+  justify-content: baseline;
   transition: opacity 200ms ease;
   opacity: 1;
+  color: black;
   p{
     padding: 0;
     margin: 0;
-    @include primaryBtn;
   }
   &-expanded{
     @extend .listItem-more;
@@ -137,6 +137,19 @@
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  p {
+    max-height: 10vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  a{
+    color: $secondary;
+    text-decoration: underline;
+    margin: auto 0 10px 10px;
+  } 
   h4 {
     text-align: left;
   }

From 8b771af8603e73f791160372ee2e5141b31deda6 Mon Sep 17 00:00:00 2001
From: benjacanas <benjamin.canas@bitlogic.io>
Date: Mon, 11 Apr 2022 14:40:16 -0300
Subject: [PATCH 2/2] console log

---
 src/components/expandGrid/ExpandGrid.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index e9948d6e..d892157a 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -55,7 +55,6 @@ const ListItem = ({ index, onClick, data }) => {
 }
 
 const ExpandedListItem = ({ index, data, isFirst }) => {
-  console.log(data)
   return (
     <Flipped
       flipId={createCardFlipId(index)}