Fix geosolutions-it#2610: clipped card's long description using lodas…

…h trancate method
Mloweedgar · Apr 24, 2018 · c2b0d35 · c2b0d35
1 parent a35dea9
commit c2b0d35
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/web/client/components/catalog/RecordItem.css b/web/client/components/catalog/RecordItem.css
@@ -27,11 +27,6 @@
     overflow: hidden;
 }
 
-.record-item-description {
-    width: 350px;
-    white-space: nowrap;
-}
-
 .record-item .preview{
     float: left;
     width: 150px;

diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx
@@ -135,6 +135,10 @@ class RecordItem extends React.Component {
         }
     };
 
+    truncateDescription(description,size){
+        return _.truncate(description, {'length': size, 'separator': /,? +/})
+    }
+
     render() {
         let record = this.props.record;
         return (
@@ -143,7 +147,7 @@ class RecordItem extends React.Component {
                 <div>
                     <h4 className="truncateText">{record && this.getTitle(record.title)}</h4>
                     <h4 className="truncateText"><small>{record && record.identifier}</small></h4>
-                    <p className="truncateText record-item-description" style={{display: 'block'}}>{this.renderDescription(record)}</p>
+                    <p className="truncateText record-item-description">{this.truncateDescription(this.renderDescription(record), 70)}</p>
                 </div>
                   {this.renderButtons(record)}
             </Panel>