#1482: Use the available height for the abstract text in a card (#1524)

(cherry picked from commit 4d9a72d)
GeoNode · Aug 8, 2023 · b0277cd · b0277cd
1 parent 4705abf
commit b0277cd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useState, useRef } from 'react';
 import Message from '@mapstore/framework/components/I18N/Message';
 import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
@@ -36,6 +36,7 @@ const ResourceCard = forwardRef(({
         pathname: `/detail/${res.resource_type}/${res.pk}`
     })
 }, ref) => {
+    const abstractRef = useRef();
     const res = data;
     const types = getTypesInfo();
     const { icon } = types[res.subtype] || types[res.resource_type] || {};
@@ -54,15 +55,22 @@ const ResourceCard = forwardRef(({
     function handleClick() {
         onClick(data);
     }
-    const imgClassName = layoutCardsStyle === 'list' ? 'card-img-left' : 'card-img-top';
+    const isCardLayoutList = layoutCardsStyle === 'list';
+    const imgClassName = isCardLayoutList ? 'card-img-left' : 'card-img-top';
+
+    const renderEllipsis = () => {
+        const isOverflowing = isCardLayoutList && abstractRef?.current?.clientHeight < abstractRef?.current?.scrollHeight;
+        return isOverflowing ? <span className="ellipsis">...</span> : null;
+    };
+
     return (
         <div
             ref={ref}
             onClick={handleClick}
             className={`gn-resource-card${active ? ' active' : ''}${
                 readOnly ? ' read-only' : ''
             } gn-card-type-${layoutCardsStyle} ${
-                layoutCardsStyle === 'list' ? 'rounded-0' : ''
+                isCardLayoutList ? 'rounded-0' : ''
             }${className ? ` ${className}` : ''}`}
         >
             {!readOnly && (
@@ -74,7 +82,7 @@ const ResourceCard = forwardRef(({
             {!readOnly &&
                 options &&
                 options.length > 0 &&
-                layoutCardsStyle === 'grid' && (
+                !isCardLayoutList && (
                 <ActionButtons
                     buildHrefByTemplate={buildHrefByTemplate}
                     resource={res}
@@ -130,13 +138,14 @@ const ResourceCard = forwardRef(({
                                 <ResourceStatus resource={res} />
                             </div>
                         </div>
-                        <p className="card-text gn-card-description">
+                        <p ref={abstractRef} className={`card-text gn-card-description ${layoutCardsStyle}`}>
                             {res.raw_abstract ? res.raw_abstract : '...'}
                         </p>
+                        {renderEllipsis()}
                         {!readOnly &&
                             options &&
                             options.length > 0 &&
-                            layoutCardsStyle === 'list' && (
+                            isCardLayoutList && (
                             <ActionButtons
                                 buildHrefByTemplate={buildHrefByTemplate}
                                 resource={res}

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less b/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less
@@ -186,6 +186,14 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        &.list {
+            white-space: unset;
+            max-height: 2.2rem;
+            &+.ellipsis {
+                position: absolute;
+                bottom: 0.625rem;
+            }
+        }
         .gn-spinner {
             margin-right: 0.4rem;
         }