adds right left alignment for both small and large thumbnail display

learningequality · Aug 1, 2024 · 675d121 · 675d121
1 parent cbd105e
commit 675d121
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
@@ -9,8 +9,14 @@
     :headingStyles="headingStyles"
   >
     <template v-if="$slots.title" #title>
-      <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
-      <slot name="title"></slot>
+      <div
+        data-test="title"
+        class="title"
+      >
+
+        <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
+        <slot name="title"></slot>
+      </div>
     </template>
     <template #default>
       <div class="thumbnail">
@@ -173,6 +179,10 @@
               headingStyles: {
                 ...headingCommonStyles,
                 width: `calc(60% - ${SPACER * 2}px)`,
+                marginRight:
+                  this.thumbnailAlign === ThumbnailAlign.RIGHT
+                    ? `calc(40% + ${SPACER}px)`
+                    : `${SPACER}px`,
               },
               thumbnailStyles: {
                 ...thumbnailCommonStyles,
@@ -188,6 +198,10 @@
               headingStyles: {
                 ...headingCommonStyles,
                 width: `calc(70% - ${SPACER * 3}px)`,
+                marginLeft:
+                  this.thumbnailAlign === ThumbnailAlign.LEFT
+                    ? `calc(30% + ${SPACER * 2}px)`
+                    : `${SPACER}px`,
               },
               thumbnailStyles: {
                 ...thumbnailCommonStyles,