diff --git a/client/app/scripts/components/node-details/node-details-info.js b/client/app/scripts/components/node-details/node-details-info.js
index 33cfea695..7925e2e1b 100644
--- a/client/app/scripts/components/node-details/node-details-info.js
+++ b/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 (
- {prime && prime.map(field => {
+ {rows.map(field => {
return (
@@ -38,22 +42,7 @@ export default class NodeDetailsInfo extends React.Component {
);
})}
- {this.state.expanded && overflow && overflow.map(field => {
- return (
-
- );
- })}
- {showOverflow &&
Show more
}
- {showLess &&
Show less
}
+ {showExpand &&
{expandText}
}
);
}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 80202f17e..eff4c1ead 100644
--- a/client/app/styles/main.less
+++ b/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 {