Refactored Show-expand, added styles

client/app/scripts/components/node-details/node-details-info.js

@@ -17,14 +17,18 @@ export default class NodeDetailsInfo extends React.Component {
   }
 
   render() {
-    const rows = (this.props.rows || []);
+    let rows = (this.props.rows || []);
     const prime = rows.filter(row => row.prime);
-    const overflow = rows.filter(row => !row.prime);
-    const showOverflow = overflow.length > 0 && !this.state.expanded;
-    const showLess = this.state.expanded;
+    let expandText = 'Show less';
+    let showExpand = this.state.expanded;
+    if (!this.state.expanded && prime.length < rows.length) {
+      expandText = 'Show more';
+      showExpand = true;
+      rows = prime;
+    }
     return (
       <div className="node-details-info">
-        {prime && prime.map(field => {
+        {rows.map(field => {
           return (
             <div className="node-details-info-field" key={field.id}>
               <div className="node-details-info-field-label truncate" title={field.label}>
@@ -38,22 +42,7 @@ export default class NodeDetailsInfo extends React.Component {
             </div>
           );
         })}
-        {this.state.expanded && overflow && overflow.map(field => {
-          return (
-            <div className="node-details-info-field" key={field.id}>
-              <div className="node-details-info-field-label truncate" title={field.label}>
-                {field.label}
-              </div>
-              <div className="node-details-info-field-value" title={field.value}>
-                <div className="truncate">
-                  {field.value}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-        {showOverflow && <div className="node-details-info-overflow-expand" onClick={this.handleClickMore}>Show more</div>}
-        {showLess && <div className="node-details-info-expand" onClick={this.handleClickMore}>Show less</div>}
+        {showExpand && <div className="node-details-info-expand" onClick={this.handleClickMore}>{expandText}</div>}
       </div>
     );
   }

client/app/styles/main.less

@@ -596,6 +596,7 @@ h2 {
         bottom: -2px;
         left: 0;
         right: 0;
+        font-weight: bold;
       }
 
       &-item {
@@ -637,6 +638,17 @@ h2 {
   &-info {
     margin: 16px 0;
 
+    &-expand {
+      .btn-opacity;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 80%;
+      cursor: pointer;
+      color: @text-secondary-color;
+      padding: 2px 0;
+      font-weight: bold;
+    }
+
     &-field {
       display: flex;
       align-items: baseline;
@@ -698,18 +710,13 @@ h2 {
     }
 
     &-more {
-      .palable;
+      .btn-opacity;
       padding: 2px 0;
       text-transform: uppercase;
       cursor: pointer;
       color: @text-secondary-color;
-      opacity: 0.7;
       font-size: 80%;
       font-weight: bold;
-
-      &:hover {
-        opacity: 1;
-      }
     }
 
     &-node {