github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 18:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #134 from weaveworks/details-wrapping

Browse Source 
details wrapping
This commit is contained in:
David
2015-05-29 15:32:07 +02:00
parent 47c1e3353f 2720b17ab1
commit d82edf4b81
4 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/scripts/components/details.js
View File

@@ -11,8 +11,10 @@ const Details = React.createClass({
return (
<div id="details">
<Paper zDepth={3}>
<div className="details-tools">
<span className="fa fa-close" onClick={this.handleClickClose} />
<div className="details-tools-wrapper">
<div className="details-tools">
<span className="fa fa-close" onClick={this.handleClickClose} />
</div>
</div>
<NodeDetails details={this.props.details} />
</Paper>

4
client/app/scripts/components/node-details-table.js
View File

@@ -17,8 +17,8 @@ const NodeDetailsTable = React.createClass({
<div className="node-details-table-row-key">{row.key}</div>
{isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
{isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major">{row.value_major}</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major truncate">{row.value_major}</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate">{row.value_minor}</div>}
</div>
);
})}

4
client/app/scripts/components/node-details.js
View File

@@ -23,10 +23,10 @@ const NodeDetails = React.createClass({
return (
<div className="node-details">
<div className="node-details-header" style={style}>
<h2 className="node-details-header-label">
<h2 className="node-details-header-label truncate">
{node.label_major}
</h2>
<div className="node-details-header-label-minor">{node.label_minor}</div>
<div className="node-details-header-label-minor truncate">{node.label_minor}</div>
</div>
<div className="node-details-content">

23
client/app/styles/main.less
View File

@@ -31,6 +31,12 @@ html, body {
.wrap {
}
/* add this class to truncate text with ellipsis, container needs width */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Space out content a bit */
body {
@@ -185,11 +191,16 @@ body {
right: 36px;
top: 24px;
bottom: 48px;
width: 32em;
width: 420px;
.details-tools-wrapper {
position: relative;
}
.details-tools {
float: right;
padding: 16px 24px;
position: absolute;
top: 16px;
right: 24px;
color: @white;
span {
@@ -217,8 +228,10 @@ body {
&-label {
color: white;
margin-bottom: 0;
width: 348px;
&-minor {
width: 348px;
font-size: 120%;
color: @white;
}
@@ -251,14 +264,12 @@ body {
clear: left;
&-key {
width: 9em;
width: 11em;
float: left;
}
&-value-major {
margin-right: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
}
&-value-scalar {