diff --git a/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx index ece73a6f9c..7e2a90fd16 100644 --- 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,7 +55,14 @@ 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 ? ... : null; + }; + return (
+
{res.raw_abstract ? res.raw_abstract : '...'}
+ {renderEllipsis()} {!readOnly && options && options.length > 0 && - layoutCardsStyle === 'list' && ( + isCardLayoutList && (