Maintaining thumbnail ratio only at large card scales

Author: DXCanas

kolibri/plugins/learn/assets/src/views/content-card/index.vue

@@ -1,8 +1,8 @@
 <template>
 
-  <router-link :to="link" class="card" :style="cardHeight">
+  <router-link :to="link" class="card">
 
-    <div class="card-thumbnail" :style="backgroundImg">
+    <div class="card-thumbnail" :style="cardThumbnail">
       <content-icon v-if="!thumbnail" :kind="kind" :style="iconSize" class="card-thumbnail-backup"/>
       <div v-show="progress > 0" class="card-progress-icon-wrapper">
         <progress-icon :progress="progress"/>
@@ -85,28 +85,26 @@
       mastered() {
         return this.progress === 1;
       },
-      cardHeight() {
-        // set here so that parent component can set width and have height dynamically calculated
-        return {
-          height: `${this.elSize.width}px`,
-        };
+      thumbnailHeight() {
+        return this.elSize.width * (9 / 16);
       },
       iconSize() {
-        const cardHeight = this.elSize.width; // can use height or width because it's a square
         // maintain the thumbnail 16:9 ratio
-        const thumbnailHeight = this.elSize.width * (9 / 16);
         return {
-          'font-size': `${thumbnailHeight / 2}px`,
+          'font-size': `${this.thumbnailHeight / 2}px`,
         };
       },
       inProgress() {
         return this.progress > 0 && this.progress < 1;
       },
-      backgroundImg() {
+      cardThumbnail() {
+        const thumbnailStyles = {
+          height: `${this.thumbnailHeight}px`,
+        };
         if (this.thumbnail) {
-          return { backgroundImage: `url('${this.thumbnail}')` };
+          thumbnailStyles.backgroundImage = `url('${this.thumbnail}')`;
         }
-        return {};
+        return thumbnailStyles;
       },
       backgroundClass() {
         if (this.kind === 'exercise') {
@@ -138,8 +136,7 @@
 
   $card-width = 210px
   $card-thumbnail-ratio = (9 / 16)
-  $card-thumbnail-height = 100% * $card-thumbnail-ratio
-  $card-text-height = $card-width - $card-thumbnail-height
+  $card-text-height = $card-width - ($card-width * $card-thumbnail-ratio)
   $card-text-padding = ($card-width / (320 / 24))
   $card-elevation-resting = 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
   $card-elevation-raised = 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)
@@ -161,7 +158,6 @@
   .card-thumbnail
     position: relative
     width: 100%
-    height: $card-thumbnail-height
     background-size: cover
     background-position: center
     background-color: $core-grey