From b89f71445abb7fd1835a9f8c5818eb71e54f2ec4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:03:26 +0300
Subject: [PATCH] cleans thumbnial configuration condition

---
 docs/pages/playground.vue | 229 ++++++--------------------------------
 lib/KCard/index.vue       |  16 +--
 2 files changed, 41 insertions(+), 204 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 5af5f4f6c..26a0fb2f1 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -65,21 +65,29 @@
       </KCard>
     </ul>
 
-    <ul class="vertical-cards">
 
+    <ul class="vertical-cards">
       <KCard
         class="card"
         :to="{ name: '/' }"
         :headingLevel="2"
         layout="vertical"
-        thumbnailDisplay="none"
+        thumbnailDisplay="small"
+        :preserveFooter="true"
+        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
-        <template #title>
-          <KTextTruncator
-            text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
-            :maxLines="2"
-          />
+
+        <template #thumbnailPlaceholder>
+          <div>
+            <div style="text-align: center;">
+              <KIcon icon="readSolid" class="icon-placeholder" />
+            </div>
+          </div>
         </template>
+        <template #belowTitle>
+          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
+        </template>
+
         <template #footer>
           <div>
             <div class="footer-top-header">
@@ -119,8 +127,6 @@
         </template>
       </KCard>
     </ul>
-
-
     <ul class="vertical-cards">
 
       <KCard
@@ -184,32 +190,15 @@
         :to="{ name: '/' }"
         :headingLevel="2"
         layout="vertical"
-        thumbnailDisplay="small"
-        title="This is a sample resource title"
+        thumbnailDisplay="none"
       >
-        <template #aboveTitle>
-          <KGrid>
-            <KGridItem
-              :layout12="{ span: 8 }"
-              :layout8="{ span: 6 }"
-            >
-              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
-              <span
-                :style="{ 'color': $themePalette.grey.v_400,
-                          'font-size': '12px' }"
-              >Rutrum pellentesque utrum...</span>
-            </KGridItem>
-
-            <KGridItem
-              :layout12="{ span: 4 }"
-              :layout8="{ span: 2 }"
-            >
-              <div style="float:right">
-                <KIcon icon="infoOutline" class="icon-size" />
-              </div>
-            </KGridItem>
-          </KGrid>
+        <template #title>
+          <KTextTruncator
+            text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
+            :maxLines="2"
+          />
         </template>
+
         <template #belowTitle>
           <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
         </template>
@@ -254,6 +243,7 @@
       </KCard>
     </ul>
 
+
     <ul class="vertical-cards">
 
       <KCard
@@ -261,22 +251,8 @@
         :to="{ name: '/' }"
         :headingLevel="2"
         layout="vertical"
-        thumbnailDisplay="large"
-        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
-      />
-    </ul>
-
-    <!-- <h3>Horizontal layout with large thumbnail</h3>
-    <ul class="horizontal-cards">
-      <KCard
-        class="card"
-        :to="{ name: '/' }"
-        :headingLevel="2"
-        layout="horizontal" 
-        thumbnailAlign="left"
-        thumbnailDisplay="large"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
-        title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
+        thumbnailDisplay="none"
+        title="This is a sample resource title"
       >
         <template #aboveTitle>
           <KGrid>
@@ -343,157 +319,19 @@
           </div>
         </template>
       </KCard>
+    </ul>
 
-      <KCard
-        class="card"
-        :to="{ name: '/' }"
-        :headingLevel="2"
-        layout="horizontal"
-        thumbnailAlign="right"
-        thumbnailDisplay="large"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
-      >
-        <template #title>
-          <KTextTruncator
-            text="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
-            :maxLines="3"
-          />
-        </template>
-        <template #footer>
-          <div>
-            <div class="footer-top-header">
-              <span>
-                <KIcon icon="createShaded" class="icon-size" />
-                Practice
-              </span>
-              <span
-                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
-              >
-                Short Activity
-              </span>
-            </div>
-
-            <KGrid>
-              <KGridItem
-                :layout12="{ span: 8 }"
-                :layout8="{ span: 6 }"
-              >
-                <progress
-                  value="20"
-                  max="100"
-                  style="height:0.5em;width:100%"
-                ></progress>
-              </KGridItem>
-              <KGridItem
-                :layout12="{ span: 4 }"
-                :layout8="{ span: 2 }"
-              >
-                <div class="" style="float:right;">
-                  <KIcon icon="schedule" class="icon-size" />
-                  <KIcon icon="download" class="icon-size" />
-                </div>
-              </KGridItem>
-            </KGrid>
-          </div>
-        </template>
-      </KCard>
-
-      <KCard
-        class="card"
-        :to="{ name: '/' }"
-        :headingLevel="2"
-        layout="horizontal"
-        thumbnailDisplay="large"
-        thumbnailAlign="right"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
-        title="This is a sample resource title"
-      >
-        <template #belowTitle>
-          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
-        </template>
-
-        <template #footer>
-          <div>
-            <div class="footer-top-header">
-              <span>
-                <KIcon icon="createShaded" class="icon-size" />
-                Practice
-              </span>
-              <span
-                :style="{ 'background-color': $themePalette.grey.v_100,'padding': '2px' }"
-              >
-                Short Activity
-              </span>
-            </div>
-
-            <KGrid>
-              <KGridItem
-                :layout12="{ span: 8 }"
-                :layout8="{ span: 6 }"
-              >
-                <progress
-                  value="20"
-                  max="100"
-                  style="height:0.5em;width:100%"
-                ></progress>
-              </KGridItem>
-              <KGridItem
-                :layout12="{ span: 4 }"
-                :layout8="{ span: 2 }"
-              >
-                <div class="" style="float:right;">
-                  <KIcon icon="schedule" class="icon-size" />
-                  <KIcon icon="download" class="icon-size" />
-                </div>
-              </KGridItem>
-            </KGrid>
-          </div>
-        </template>
-      </KCard>
+    <ul class="vertical-cards">
 
       <KCard
         class="card"
         :to="{ name: '/' }"
         :headingLevel="2"
-        layout="horizontal"
-        thumbnailDisplay="large"
-        thumbnailAlign="right"
+        layout="vertical"
+        thumbnailDisplay="none"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
-      >
-        <template #thumbnailPlaceholder>
-          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
-            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
-          </span>
-        </template>
-        <template #aboveTitle>
-          <KGrid>
-
-            <KGridItem
-              :layout12="{ span: 8 }"
-              :layout8="{ span: 6 }"
-            >
-              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
-              <span
-                :style="{ 'color': $themePalette.grey.v_400,
-                          'font-size': '12px' }"
-              >Rutrum pellentesque utrum...</span>
-            </KGridItem>
-
-            <KGridItem
-              :layout12="{ span: 4 }"
-              :layout8="{ span: 2 }"
-            >
-              <div style="float:right">
-                <KIcon icon="infoOutline" class="icon-size" />
-              </div>
-            </KGridItem>
-          </KGrid>
-        </template>
-        <template #belowTitle>
-          <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
-        </template>
-      </KCard>
-    </ul> -->
+      />
+    </ul>
 
     <h3>Horizontal layout with no thumbnail</h3>
 
@@ -646,7 +484,7 @@
       <KCard
         class="card"
         :to="{ name: '/' }"
-        :headingLevel="1"
+        :headingLevel="2"
         layout="horizontal"
         thumbnailDisplay="none"
         thumbnailAlign="left"
@@ -748,5 +586,8 @@
     margin-left: 300px;
     font-size: 20px;
   }
+  .icon-placeholder {
+    font-size: 50px;
+  }
 
 </style>
\ No newline at end of file
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index d399bea89..f45b0fe87 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -13,11 +13,10 @@
       <slot name="title"></slot>
     </template>
     <template #default>
-      <div :class="isThumbnailPresent ? 'thumbnail' : null">
-        <!-- 
-          Render KImg even if thumbnailSrc is not provided since in that case
-          KImg takes care of showing the gray placeholder area.
-        -->
+      <div
+        v-if="thumbnailDisplay !== 'none'"
+        class="thumbnail"
+      >
         <KImg
           v-if="thumbnailSrc"
           :src="thumbnailSrc"
@@ -35,7 +34,7 @@
           as progressive loading experience.
         -->
         <span
-          v-if="$slots.thumbnailPlaceholder && !thumbnailSrc"
+          v-if="$slots.thumbnailPlaceholder"
           class="thumbnail-placeholder"
         >
           <!-- @slot Places content to the thumbnail placeholder area. -->
@@ -351,9 +350,6 @@
         }
         return {};
       },
-      isThumbnailPresent() {
-        return this.thumbnailSrc || this.$slots.thumbnailPlaceholder;
-      },
     },
   };
 
@@ -411,7 +407,7 @@
   }
 
   .thumbnail-placeholder {
-    position: relative;
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;