Center placeholder content by default

MisRob · Sep 24, 2024 · cc9ca8a · cc9ca8a
1 parent 619ff8c
commit cc9ca8a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/docs/pages-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
@@ -14,12 +14,10 @@
       <slot name="thumbnailPlaceholder"></slot>
     </template>
     <template v-else #thumbnailPlaceholder>
-      <span :style="{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }">
-        <KIcon
-          :style="{ fontSize: '48px' }"
-          icon="readSolid"
-        />
-      </span>
+      <KIcon
+        :style="{ fontSize: '48px' }"
+        icon="readSolid"
+      />
     </template>
 
     <template v-if="$slots.aboveTitle" #aboveTitle>

diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -513,12 +513,10 @@
         <KCardGrid ...>
           <KCard ...>
             <template #thumbnailPlaceholder>
-              <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
-                <KIcon
-                  :style="{ fontSize: '48px' }"
-                  icon="readSolid"
-                />
-              </span>
+              <KIcon
+                :style="{ fontSize: '48px' }"
+                icon="readSolid"
+              />
             </template>
           </KCard>
         </KCardGrid>

diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
@@ -587,6 +587,10 @@
     bottom: 0;
     left: 0;
     z-index: 0; /* <img> in KImg with z-index 1 should cover the placeholder after loaded */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
   }
 
   .link {