add card min height

Author: DanneelsSophie

src/cards/gist-card.js

@@ -10,6 +10,7 @@ import {
   flexLayout,
   iconWithLabel,
   createLanguageNode,
+  getAppropriateHeight,
 } from "../common/utils.js";
 import Card from "../common/Card.js";
 import { icons } from "../common/icons.js";
@@ -78,9 +79,9 @@ const renderGistCard = (gistData, options = {}) => {
     .join("");
 
   const lineHeight = descriptionLines > 3 ? 12 : 10;
-  const height = card_height
-    ? card_height
-    : (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const minHeight =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const height = getAppropriateHeight(card_height, minHeight);
 
   const totalStars = kFormatter(starsCount);
   const totalForks = kFormatter(forksCount);

src/cards/repo-card.js

@@ -12,6 +12,7 @@ import {
   wrapTextMultiline,
   iconWithLabel,
   createLanguageNode,
+  getAppropriateHeight,
 } from "../common/utils.js";
 import { repoCardLocales } from "../translations.js";
 
@@ -88,9 +89,9 @@ const renderRepoCard = (repo, options = {}) => {
     .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
     .join("");
 
-  const height = card_height
-    ? card_height
-    : (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const minHeight =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const height = getAppropriateHeight(card_height, minHeight);
 
   const i18n = new I18n({
     locale,

src/cards/stats-card.js

@@ -6,6 +6,7 @@ import {
   CustomError,
   clampValue,
   flexLayout,
+  getAppropriateHeight,
   getCardColors,
   kFormatter,
   measureText,
@@ -392,12 +393,11 @@ const renderStatsCard = (stats, options = {}) => {
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = card_height
-    ? card_height
-    : Math.max(
-        45 + (statItems.length + 1) * lheight,
-        hide_rank ? 0 : statItems.length ? 150 : 180,
-      );
+  const minHeight = Math.max(
+    45 + (statItems.length + 1) * lheight,
+    hide_rank ? 0 : statItems.length ? 150 : 180,
+  );
+  const height = getAppropriateHeight(card_height, minHeight);
 
   // the lower the user's percentile the better
   const progress = 100 - rank.percentile;

src/cards/top-languages-card.js

@@ -6,6 +6,7 @@ import {
   chunkArray,
   clampValue,
   flexLayout,
+  getAppropriateHeight,
   getCardColors,
   lowercaseTrim,
   measureText,
@@ -806,7 +807,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     customTitle: custom_title,
     defaultTitle: i18n.t("langcard.title"),
     width,
-    height: card_height ? card_height : height,
+    height: getAppropriateHeight(card_height, height),
     border_radius,
     colors,
   });

src/cards/wakatime-card.js

@@ -5,6 +5,7 @@ import { I18n } from "../common/I18n.js";
 import {
   clampValue,
   flexLayout,
+  getAppropriateHeight,
   getCardColors,
   lowercaseTrim,
 } from "../common/utils.js";
@@ -260,9 +261,11 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = card_height
-    ? card_height
-    : Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
+  const minHeight = Math.max(
+    45 + (filteredLanguages.length + 1) * lheight,
+    150,
+  );
+  let height = getAppropriateHeight(card_height, minHeight);
 
   const cssStyles = getStyles({
     titleColor,

src/common/utils.js

@@ -552,6 +552,16 @@ const parseEmojis = (str) => {
   });
 };
 
+/**
+ * Get the appropriate height
+ *
+ * @param {number | undefined} height height wanted
+ * @param {number} minHeight minimum height.
+ * @returns {number} appropriate height.
+ */
+const getAppropriateHeight = (height, minHeight) =>
+  height && height > minHeight ? height : minHeight;
+
 /**
  * Get diff in minutes between two dates.
  *
@@ -592,4 +602,5 @@ export {
   chunkArray,
   parseEmojis,
   dateDiff,
+  getAppropriateHeight,
 };

tests/renderGistCard.test.js

@@ -223,13 +223,13 @@ describe("test renderGistCard", () => {
         ...data,
       },
       {
-        card_height: 50,
+        card_height: 280,
       },
     );
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("50");
+    ).toBe("280");
   });
 
   it("should render without rounding", () => {

tests/renderRepoCard.test.js

@@ -326,13 +326,13 @@ describe("Test renderRepoCard", () => {
         isTemplate: true,
       },
       {
-        card_height: 75,
+        card_height: 340,
       },
     );
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("75");
+    ).toBe("340");
   });
 
   it("should render without rounding", () => {

tests/renderStatsCard.test.js

@@ -374,12 +374,12 @@ describe("Test renderStatsCard", () => {
 
   it("should render custom height correctly", () => {
     document.body.innerHTML = renderStatsCard(stats, {
-      card_height: 50,
+      card_height: 823,
     });
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("50");
+    ).toBe("823");
   });
 
   it("should render translations", () => {

tests/renderTopLanguagesCard.test.js

@@ -853,12 +853,12 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(
       {},
       {
-        card_height: 56,
+        card_height: 324,
       },
     );
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("56");
+    ).toBe("324");
   });
 });