From 197fafbc477e61c17d7662272c21dd99d6f9f310 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Tue, 19 Nov 2024 19:29:38 +0100 Subject: [PATCH] [WIP] Improve content tolerance and styles robustness --- lib/cards/KCard.vue | 460 +++++++++++++++++++++++--------------------- 1 file changed, 241 insertions(+), 219 deletions(-) diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue index fee4137ec..71976b444 100644 --- a/lib/cards/KCard.vue +++ b/lib/cards/KCard.vue @@ -17,7 +17,9 @@ :class="['card-area', ...cardAreaClasses ]" :style="{ backgroundColor: $themeTokens.surface }" > - - - {{ title }} - - - - - - - - - - -
- - - + + + + +
+ + +
+ +
+ + +
+
+ +
- - - -
-
- - -
-
- - + + + + + + +
+
} - .above-title { + /************* Ordering **************/ + + .around-title { + display: flex; + flex-direction: column; order: 2; + + .heading { + order: 2; + } + + .above-title { + order: 1; + } + + .below-title { + order: 3; + } } - .below-title { - order: 4; + .thumbnail { + order: 1; } .footer { - order: 5; + order: 3; + } + + /************* Thumbnail **************/ + + /* stylelint-disable no-duplicate-selectors */ + .thumbnail { + position: relative; } + /* stylelint-enable no-duplicate-selectors */ .thumbnail-placeholder { position: absolute; @@ -626,17 +658,11 @@ 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
  • - } + // TODO /************* Manage spaces *************/ - .heading, + /* .heading, .above-title, .below-title, .footer { @@ -645,39 +671,36 @@ 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 { + + /* .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 { + + /* .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 { + + /* .with-below-title { .heading { margin-bottom: calc(#{$spacer} / 2); } - } - - /* stylelint-disable no-duplicate-selectors */ - .footer { - margin-top: auto; // push footer to the bottom - } - /* stylelint-enable no-duplicate-selectors */ + } */ /************* Layout-specific styles *************/ @@ -685,6 +708,18 @@ .thumbnail { height: 180px; } + + .upper-card-area { + display: flex; + flex-direction: column; + + .thumbnail { + order: 1; + } + .around-title { + order: 2; + } + } } .vertical-with-small-thumbnail { @@ -698,105 +733,92 @@ } } - .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: 35%; + } - .heading, - .above-title, - .below-title, - .footer { - width: calc(100% - #{$thumbnail-width} - 2 * #{$spacer}); + .around-title { + width: 65%; + } } &.thumbnail-align-left { - align-items: flex-end; - - .thumbnail { - left: 0; + .upper-card-area { + .thumbnail { + order: 1; + } + .around-title { + order: 2; + } } } &.thumbnail-align-right { - align-items: flex-start; - - .thumbnail { - right: 0; + .upper-card-area { + .thumbnail { + 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}); - - width: $thumbnail-width; - } + .footer { + width: calc(100% - 2 * #{$spacer}); } + } - .thumbnail { - @include clamp-with-fallback(100px, 35%, 120px); + .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 */ - position: absolute; - top: $spacer; + &.card-area { + position: relative; /* for absolute positioning of the thumbnail */ } - .heading, - .above-title, - .below-title { - width: calc(100% - #{$thumbnail-width} - 3 * #{$spacer}); + .upper-card-area { + .thumbnail { + position: absolute; + height: 100%; + } } - .footer { - width: calc(100% - 2 * #{$spacer}); + &.thumbnail-align-right { + .upper-card-area { + .thumbnail { + right: 0; + } + } + + .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}); } }