change(card): Better approach for cards title: remove min-height and …

…add config option for nr of lines
eea · Nov 21, 2022 · 0138349 · 0138349
1 parent 8ef6bc9
commit 0138349
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 24 deletions.
diff --git a/src/blocks/Listing/item-templates/CardTemplates.jsx b/src/blocks/Listing/item-templates/CardTemplates.jsx
@@ -16,6 +16,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

diff --git a/src/blocks/Listing/item-templates/ItemTemplates.jsx b/src/blocks/Listing/item-templates/ItemTemplates.jsx
@@ -12,6 +12,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

diff --git a/src/blocks/Listing/item-templates/SearchItemTemplate.jsx b/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
@@ -20,6 +20,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
@@ -98,6 +98,7 @@ export const setCardModelSchema = (args) => {
   const itemModelSchema = schema.properties.itemModel.schema;
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     ...(formData?.itemModel?.hasDescription ? ['maxDescription'] : []),
@@ -116,6 +117,15 @@ export const setCardModelSchema = (args) => {
       title: 'Description',
       type: 'boolean',
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:
@@ -153,6 +163,7 @@ export const setItemModelSchema = (args) => {
 
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     'maxDescription',
@@ -175,6 +186,15 @@ export const setItemModelSchema = (args) => {
       type: 'boolean',
       default: true,
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:

diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less
@@ -6,6 +6,31 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
+each(range(5), {
+  .max-@{value}-lines {
+    --max-lines: @value;
+  }
+  .title-max-@{value}-lines {
+    --title-max-lines: @value;
+  }
+});
+
+.useMaxLines() {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines, 5);
+}
+
+.useTitleMaxLines() {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, 5);
+}
+
 .category {
   font-size: @categoryFontSize;
 }
@@ -38,24 +63,14 @@
   font-size: 12px;
 }
 
-each(range(5), {
-  .max-@{value}-lines {
-    --max-lines: @value;
-  }
-});
-
-.useMaxLines() {
-  display: -webkit-box;
-  overflow: hidden;
-
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines, 5);
-}
-
 .u-item {
   .listing-description {
     .useMaxLines();
   }
+
+  .listing-header {
+    .useTitleMaxLines();
+  }
 }
 
 // over specific due to blocks.less override
@@ -186,20 +201,12 @@ each(range(5), {
     content: '\200b';
   }
 
-  .header,
-  .description {
-    display: -webkit-box !important;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-  }
-
   .header {
-    min-height: 2.7rem;
-    -webkit-line-clamp: 2;
+    .useTitleMaxLines();
   }
 
   .description {
-    -webkit-line-clamp: var(--max-lines, 5);
+    .useMaxLines();
   }
 
   &.left-image-card {