From 74c80608dd8387cdaad3e2b83fb4749c594935b1 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Tue, 19 Nov 2024 19:29:38 +0100
Subject: [PATCH] [WIP] Improve content tolerance

Fixes thumbnail overflow problems in some layouts
and makes styles more robust and better organized
overall.
---
 lib/cards/KCard.vue | 487 +++++++++++++++++++++++---------------------
 1 file changed, 251 insertions(+), 236 deletions(-)

diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
index fee4137ec..fbcf946a5 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -17,7 +17,9 @@
       :class="['card-area', ...cardAreaClasses ]"
       :style="{ backgroundColor: $themeTokens.surface }"
     >
-      <!--
+      <div class="upper-card-area">
+        <div class="around-title">
+          <!--
         Utilizing `visuallyhidden`, `aria-labelledby`,
         and `aria-hidden` to ensure:
         - More reliable output for some screen readers
@@ -25,124 +27,129 @@
         - Prevents undesired screen reader announcements
           when title is customized via the `title` slot
       -->
-      <span :id="`card-title-${_uid}`" class="visuallyhidden">
-        {{ title }}
-      </span>
-      <component
-        :is="headingElement"
-        class="heading"
-        :style="{ color: $themeTokens.text }"
-      >
-        <!--
-          `event=""` prevents router-link click event
-          (technique used by Vue community because
-          the usual ways don't work for router-link).
-          This is to
-            - (1) prevent double navigation (the wrapping
-                  <li> is supposed to take care of navigation)
-            - (2) together with the `draggable` disabled, 
-                  ensures that text selection works on
-                  the title text (see the feature for allowing
-                  selecting card's content in `onClick`)
-        -->
-        <router-link
-          v-if="to"
-          event=""
-          :to="to"
-          draggable="false"
-          class="title"
-          :aria-labelledby="`card-title-${_uid}`"
-          @focus.native="onTitleFocus"
-          @blur.native="onTitleBlur"
-        >
-          <span aria-hidden="true">
-            <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute.-->
-            <slot 
-              v-if="$scopedSlots.title"
-              name="title"
-              :titleText="title"
-            ></slot>
-            <KTextTruncator
-              v-else
-              :text="title"
-              :maxLines="titleMaxLines"
-            />
+          <span :id="`card-title-${_uid}`" class="visuallyhidden">
+            {{ title }}
           </span>
-        </router-link>
-        <!--
-          Set tabindex to 0 to make title focusable so we
-          can use the same focus ring logic like when title
-          is a router-link. Relatedly set data-focus so that
-          the trackInputModality can set modality to keyboard
-          to make the focus ring display correctly
-          -->
-        <span
-          v-else
-          tabindex="0"
-          data-focus="true"
-          class="title"
-          :aria-labelledby="`card-title-${_uid}`"
-          @focus="onTitleFocus"
-          @blur="onTitleBlur"
-        >
-          <span aria-hidden="true">
-            <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute. -->
-            <slot 
-              v-if="$scopedSlots.title"
-              name="title"
-              :titleText="title"
-            ></slot>
-            <KTextTruncator
+          <component
+            :is="headingElement"
+            class="heading"
+            :style="{ color: $themeTokens.text }"
+          >
+            <!--
+              `event=""` prevents router-link click event
+              (technique used by Vue community because
+              the usual ways don't work for router-link).
+              This is to
+                - (1) prevent double navigation (the wrapping
+                      <li> is supposed to take care of navigation)
+                - (2) together with the `draggable` disabled, 
+                      ensures that text selection works on
+                      the title text (see the feature for allowing
+                      selecting card's content in `onClick`)
+            -->
+            <router-link
+              v-if="to"
+              event=""
+              :to="to"
+              draggable="false"
+              class="title"
+              :aria-labelledby="`card-title-${_uid}`"
+              @focus.native="onTitleFocus"
+              @blur.native="onTitleBlur"
+            >
+              <span aria-hidden="true">
+                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute.-->
+                <slot 
+                  v-if="$scopedSlots.title"
+                  name="title"
+                  :titleText="title"
+                ></slot>
+                <KTextTruncator
+                  v-else
+                  :text="title"
+                  :maxLines="titleMaxLines"
+                />
+              </span>
+            </router-link>
+            <!--
+              Set tabindex to 0 to make title focusable so we
+              can use the same focus ring logic like when title
+              is a router-link. Relatedly set data-focus so that
+              the trackInputModality can set modality to keyboard
+              to make the focus ring display correctly
+              -->
+            <span
               v-else
-              :text="title"
-              :maxLines="titleMaxLines"
-            />
-          </span>
-        </span>
-      </component>
-
-      <div
-        v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
-        class="thumbnail"
-      >
-        <!-- 
-          Render KImg even if thumbnailSrc is not provided since in that case
-          KImg takes care of showing the gray placeholder area.
-        -->
-        <KImg
-          data-test="thumbnail-img"
-          :src="thumbnailSrc"
-          :scaleType="thumbnailScaleType"
-          :aspectRatio="thumbnailAspectRatio"
-          :isDecorative="true"
-          :appearanceOverrides="thumbnailStyles"
-          @error="onThumbnailError"
-        />
-        <span
-          v-if="!thumbnailSrc || thumbnailError"
-          class="thumbnail-placeholder"
+              tabindex="0"
+              data-focus="true"
+              class="title"
+              :aria-labelledby="`card-title-${_uid}`"
+              @focus="onTitleFocus"
+              @blur="onTitleBlur"
+            >
+              <span aria-hidden="true">
+                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute. -->
+                <slot 
+                  v-if="$scopedSlots.title"
+                  name="title"
+                  :titleText="title"
+                ></slot>
+                <KTextTruncator
+                  v-else
+                  :text="title"
+                  :maxLines="titleMaxLines"
+                />
+              </span>
+            </span>
+          </component>
+
+          <div
+            v-if="hasAboveTitleArea"
+            data-test="aboveTitle"
+            class="above-title"
+          >
+            <!-- @slot Places content to the area above the title. -->
+            <slot name="aboveTitle"></slot>
+          </div>
+
+          <div
+            v-if="hasBelowTitleArea"
+            data-test="belowTitle"
+            class="below-title"
+            :style="{ color: $themeTokens.annotation }"
+          >
+            <!-- @slot Places content to the area below the title. -->
+            <slot name="belowTitle"></slot>
+          </div>
+        </div>
+
+        <div
+          v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
+          class="thumbnail"
         >
-          <!-- @slot Places content to the thumbnail placeholder area. -->
-          <slot name="thumbnailPlaceholder"></slot>
-        </span>
-      </div>
-      <div
-        v-if="hasAboveTitleArea"
-        data-test="aboveTitle"
-        class="above-title"
-      >
-        <!-- @slot Places content to the area above the title. -->
-        <slot name="aboveTitle"></slot>
-      </div>
-      <div
-        v-if="hasBelowTitleArea"
-        data-test="belowTitle"
-        class="below-title"
-        :style="{ color: $themeTokens.annotation }"
-      >
-        <!-- @slot Places content to the area below the title. -->
-        <slot name="belowTitle"></slot>
+          <!-- 
+            Render KImg even if thumbnailSrc is not provided since in that case
+            KImg takes care of showing the gray placeholder area.
+          -->
+          <KImg
+            data-test="thumbnail-img"
+            :src="thumbnailSrc"
+            :scaleType="thumbnailScaleType"
+            :aspectRatio="thumbnailAspectRatio"
+            :isDecorative="true"
+            :appearanceOverrides="thumbnailStyles"
+            @error="onThumbnailError"
+          />
+          <span
+            v-if="!thumbnailSrc || thumbnailError"
+            class="thumbnail-placeholder"
+          >
+            <!-- @slot Places content to the thumbnail placeholder area. -->
+            <slot name="thumbnailPlaceholder"></slot>
+          </span>
+        </div>
       </div>
+
       <div
         v-if="hasFooterArea"
         data-test="footer"
@@ -573,10 +580,9 @@
   .card-area {
     @extend %dropshadow-2dp;
 
-    position: relative; /* basis for absolute positioning of thumbnail images */
     display: flex;
     flex-direction: column;
-    flex-wrap: nowrap;
+    justify-content: space-between; // push footer to the bottom of the card
     width: 100%;
     height: 100%;
     border-radius: 0.5em;
@@ -590,28 +596,47 @@
   }
 
   .heading {
-    order: 3;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .thumbnail {
-    position: relative; /* basis for absolute positioning of 'thumbnailPlaceholder' slot content */
-    order: 1;
+  .title {
+    display: inline-block; // allows title placeholder in the skeleton card
+    width: 100%; // allows title placeholder in the skeleton card
+    color: inherit;
+    text-decoration: none;
+    outline: none; // the focus ring is moved to the whole <li>
   }
 
-  .above-title {
-    order: 2;
-  }
+  // because the title and the areas above and below it
+  // are grouped together in all layoyts, abstract them
+  // into one whole here for easier ordering of this section
+  // in the layout-specific styles
+  .around-title {
+    display: flex;
+    flex-direction: column;
+
+    .heading {
+      order: 2;
+    }
+
+    .above-title {
+      order: 1;
+    }
 
-  .below-title {
-    order: 4;
+    .below-title {
+      order: 3;
+    }
   }
 
-  .footer {
-    order: 5;
+  /************* Thumbnail **************/
+
+  /* stylelint-disable no-duplicate-selectors */
+  .thumbnail {
+    position: relative;
   }
+  /* stylelint-enable no-duplicate-selectors */
 
   .thumbnail-placeholder {
     position: absolute;
@@ -626,58 +651,53 @@
     height: 100%;
   }
 
-  .title {
-    display: inline-block; // allows title placeholder in the skeleton card
-    width: 100%; // allows title placeholder in the skeleton card
-    color: inherit;
-    text-decoration: none;
-    outline: none; // the focus ring is moved to the whole <li>
-  }
+  // TODO
 
   /************* Manage spaces *************/
 
-  .heading,
-  .above-title,
-  .below-title,
-  .footer {
-    padding: 0;
-    margin-top: 0;
-    margin-right: $spacer;
-    margin-bottom: calc(#{$spacer} / 2);
-    margin-left: $spacer;
-  }
+  /* .heading,
+   .above-title,
+   .below-title,
+   .footer {
+     padding: 0;
+     margin-top: 0;
+     margin-right: $spacer;
+     margin-bottom: calc(#{$spacer} / 2);
+     margin-left: $spacer;
+   } */
 
   // when the 'aboveTitle' area is present,
   // apply top margin to it and also set smaller
   // margin between the area and the heading...
-  .with-above-title {
-    .above-title {
-      margin-top: $spacer;
-      margin-bottom: calc(#{$spacer} / 2);
-    }
-  }
+
+  /* .with-above-title {
+     .above-title {
+       margin-top: $spacer;
+       margin-bottom: calc(#{$spacer} / 2);
+     }
+   } */
 
   // ...and when the 'aboveTitle' area is not present,
   // instead apply the top margin to the heading
-  .without-above-title {
-    .heading {
-      margin-top: $spacer;
-    }
-  }
+
+  /* .without-above-title {
+     .heading {
+       margin-top: $spacer;
+     }
+   } */
 
   // if there's the 'belowTitle' area present,
   // override the heading's margin to smaller one
-  .with-below-title {
-    .heading {
-      margin-bottom: calc(#{$spacer} / 2);
-    }
-  }
 
-  /* stylelint-disable no-duplicate-selectors */
+  /* .with-below-title {
+     .heading {
+       margin-bottom: calc(#{$spacer} / 2);
+     }
+   } 
+
   .footer {
-    margin-top: auto; // push footer to the bottom
-  }
-  /* stylelint-enable no-duplicate-selectors */
+     width: calc(100% - 2 * #{$spacer});
+   } */
 
   /************* Layout-specific styles *************/
 
@@ -685,6 +705,19 @@
     .thumbnail {
       height: 180px;
     }
+
+    .upper-card-area {
+      display: flex;
+      flex-direction: column;
+
+      .thumbnail {
+        order: 1;
+      }
+
+      .around-title {
+        order: 2;
+      }
+    }
   }
 
   .vertical-with-small-thumbnail {
@@ -698,105 +731,87 @@
     }
   }
 
-  .horizontal-with-large-thumbnail {
-    $thumbnail-width: 40%;
+  .horizontal-with-small-thumbnail {
+    .upper-card-area {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
 
-    .thumbnail {
-      position: absolute;
-      width: $thumbnail-width;
-      height: 100%;
-    }
+      .thumbnail {
+        width: 30%;
+        margin: $spacer;
+      }
 
-    .heading,
-    .above-title,
-    .below-title,
-    .footer {
-      width: calc(100% - #{$thumbnail-width} - 2 * #{$spacer});
+      .around-title {
+        width: 70%;
+      }
     }
 
     &.thumbnail-align-left {
-      align-items: flex-end;
-
       .thumbnail {
-        left: 0;
+        order: 1;
+      }
+      .around-title {
+        order: 2;
       }
     }
 
     &.thumbnail-align-right {
-      align-items: flex-start;
-
       .thumbnail {
-        right: 0;
+        order: 2;
+      }
+      .around-title {
+        order: 1;
       }
     }
   }
 
-  .horizontal-with-small-thumbnail {
-    $thumbnail-width: null;
-
-    /*
-      Coordinates space taken by the thumbnail area and the content area
-      next to it more intelligently in browsers that support `clamp()` by:
-
-      - Instead of defining 'width', 'min-width', and 'max-width' separately,
-        `clamp()` is used with the goal to have the actual thumbnail width
-        saved in the single `$thumbnail-width` value.
-
-      - The `$thumbnail-width` value is then referenced when calculating
-        the remaining space for the content area, ensuring the precise
-        distribution of space.
-
-      Resolves some issues related to unprecise calculations, most importantly
-      this removes the area of empty space between the thumbnail and content areas
-      in some card's sizes, wasting space that can be used for card's textual content.
-    */
-    @mixin clamp-with-fallback($min, $preferred, $max) {
-      // fallback for browsers that don't support 'clamp()'
-      $thumbnail-width: $preferred;
-
-      width: $thumbnail-width;
-      min-width: $min;
-      max-width: $max;
-
-      // clamp(1px, 1%, 1px) only used for testing support
-      @supports (width: clamp(1px, 1%, 1px)) {
-        $thumbnail-width: clamp(#{$min}, #{$preferred}, #{$max});
+  // TODO
+  .horizontal-with-large-thumbnail {
+    /* stylelint-disable scss/at-extend-no-missing-placeholder */
+    @extend .horizontal-with-small-thumbnail;
+    /* stylelint-enable scss/at-extend-no-missing-placeholder */
 
-        width: $thumbnail-width;
-      }
+    &.card-area {
+      position: relative; /* for absolute positioning of the thumbnail  */
     }
 
-    .thumbnail {
-      @include clamp-with-fallback(100px, 35%, 120px);
-
-      position: absolute;
-      top: $spacer;
+    .upper-card-area {
+      .thumbnail {
+        position: absolute;
+        height: 100%;
+        margin: 0;
+      }
     }
 
-    .heading,
-    .above-title,
-    .below-title {
-      width: calc(100% - #{$thumbnail-width} - 3 * #{$spacer});
-    }
+    &.thumbnail-align-right {
+      .upper-card-area {
+        .thumbnail {
+          right: 0;
+        }
+      }
 
-    .footer {
-      width: calc(100% - 2 * #{$spacer});
+      .footer,
+      .around-title {
+        margin-right: auto;
+      }
     }
 
     &.thumbnail-align-left {
-      align-items: flex-end;
+      .upper-card-area {
+        .thumbnail {
+          left: 0;
+        }
+      }
 
-      .thumbnail {
-        left: $spacer;
+      .footer,
+      .around-title {
+        margin-left: auto;
       }
     }
 
-    &.thumbnail-align-right {
-      align-items: flex-start;
-
-      .thumbnail {
-        right: $spacer;
-      }
+    .footer {
+      width: calc(65% - 2 * #{$spacer});
     }
   }