From 45934658092e677505a1d0334e1f6db1bd88f7a3 Mon Sep 17 00:00:00 2001
From: Sudarshan <slbondge@gmail.com>
Date: Fri, 29 Mar 2024 16:31:44 +0530
Subject: [PATCH] Ensure card heights are consistent

When thumbnails have various height, ensure that displayed cards all have the
same height and buttons is fixed at the bottom of the card.
---
 zimui/src/components/TopicCard.vue | 26 +++++++++++++++++++++++---
 zimui/src/components/TopicHome.vue |  5 +++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/zimui/src/components/TopicCard.vue b/zimui/src/components/TopicCard.vue
index c18bde4..ff7ffc2 100644
--- a/zimui/src/components/TopicCard.vue
+++ b/zimui/src/components/TopicCard.vue
@@ -23,7 +23,7 @@ defineProps({
             There are {{ data.count_more }} more items in this section.
           </p>
         </div>
-        <p class="card-text">
+        <p class="card-text badge-wrapper">
           <span class="badge rounded-pill badge-primary">
             <FontAwesomeIcon icon="fa-regular fa-folder-open" />
             &nbsp;MORE
@@ -54,7 +54,7 @@ defineProps({
             {{ data.description }}
           </span>
         </div>
-        <p class="card-text">
+        <p class="card-text badge-wrapper">
           <span class="badge rounded-pill badge-primary">
             <FontAwesomeIcon icon="fa-regular fa-folder-open" />
             &nbsp;EXPLORE
@@ -85,7 +85,7 @@ defineProps({
             {{ data.description }}
           </span>
         </div>
-        <p class="card-text">
+        <p class="card-text badge-wrapper">
           <span class="badge rounded-pill badge-primary">
             <FontAwesomeIcon icon="fa-regular fa-file-lines" />
             &nbsp;OPEN
@@ -101,12 +101,19 @@ defineProps({
   background-color: #091415;
   border-radius: 1rem;
   color: white;
+  height: 100%;
+  overflow: hidden;
   top: 50%;
   transform: translateY(-50%);
 }
 
+.card-body{
+  padding: 15px 15px 30px 15px;
+}
+
 .card-img-top {
   border-radius: 1rem 1rem 0 0;
+  width: 100%; 
 }
 
 .badge {
@@ -119,12 +126,19 @@ defineProps({
   border-style: solid;
 }
 
+.badge-wrapper {
+  position: absolute;
+  bottom: 15px; 
+  left: 10px;
+}
+
 .more .card-content {
   height: calc(6rem - 2px);
 }
 
 .with-description .card-content {
   height: calc(9rem - 2px);
+  flex: 1 1 auto;
 }
 
 .card-content {
@@ -149,4 +163,10 @@ defineProps({
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
+.text-decoration-none{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 </style>
diff --git a/zimui/src/components/TopicHome.vue b/zimui/src/components/TopicHome.vue
index 54e136b..f56504f 100644
--- a/zimui/src/components/TopicHome.vue
+++ b/zimui/src/components/TopicHome.vue
@@ -191,15 +191,16 @@ const goToPreviousPage = () => {
         <div
           v-for="(content, contentIndex) in getNonTopicSections(topic.sections)"
           :key="contentIndex"
-          class="col-sm-6 col-md-6 col-lg-3 pt-3 pb-3"
+          class="col-sm-6 col-md-6 col-lg-3 mt-5 " 
         >
           <TopicCard
             :data="transformTopicSectionOrSubSectionToCardData(content)"
+            class="w-100"
           />
         </div>
       </div>
       <div class="row">
-        <footer class="pt-2 pb-3">
+        <footer class="mt-2 mb-1">
           <a href="./files/about">About this content</a>
         </footer>
       </div>