Highlight topologies with no border

* removed background from sidebar items
This commit is contained in:
David Kaltschmidt
2016-02-08 12:21:43 +01:00
parent c3878eb649
commit 88fb9fe4de
2 changed files with 32 additions and 38 deletions

View File

@@ -72,7 +72,6 @@ export default class App extends React.Component {
render() {
const showingDetails = this.state.nodeDetails.size > 0;
const showingTerminal = this.state.controlPipe;
const footer = `Version ${this.state.version} on ${this.state.hostname}`;
// width of details panel blocking a view
const detailsWidth = showingDetails ? 450 : 0;
const topMargin = 100;
@@ -100,17 +99,23 @@ export default class App extends React.Component {
topologyId={this.state.currentTopologyId} />
<Sidebar>
<TopologyOptions options={this.state.currentTopologyOptions}
topologyId={this.state.currentTopologyId}
activeOptions={this.state.activeTopologyOptions} />
<Status errorUrl={this.state.errorUrl} topology={this.state.currentTopology}
topologiesLoaded={this.state.topologiesLoaded}
websocketClosed={this.state.websocketClosed} />
<TopologyOptions options={this.state.currentTopologyOptions}
topologyId={this.state.currentTopologyId}
activeOptions={this.state.activeTopologyOptions} />
</Sidebar>
<div className="footer">
{footer}&nbsp;&nbsp;
<a href="https://gitreports.com/issue/weaveworks/scope" target="_blank">Report an issue</a>
<span className="footer-label">Version</span>
{this.state.version}
<span className="footer-label">on</span>
{this.state.hostname}
&nbsp;&nbsp;
<a className="footer-label" href="https://gitreports.com/issue/weaveworks/scope" target="_blank">
Report an issue
</a>
</div>
</div>
);

View File

@@ -156,14 +156,20 @@ h2 {
right: 48px;
z-index: 20;
color: @text-tertiary-color;
font-size: 85%;
font-size: 0.7rem;
opacity: 0.8;
a {
color: @text-secondary-color;
.btn-opacity;
text-decoration: none;
font-weight: bold;
font-size: 90%;
}
&:hover {
color: @text-color;
}
&-label {
text-transform: uppercase;
margin: 0 0.25em;
}
}
@@ -181,7 +187,7 @@ h2 {
margin: 0px 8px;
&-label {
font-size: 13px;
font-size: .8rem;
text-transform: uppercase;
}
@@ -190,7 +196,7 @@ h2 {
.topologies-sub {
&-item {
&-label {
font-size: 11px;
font-size: .7rem;
text-transform: uppercase;
}
}
@@ -198,13 +204,13 @@ h2 {
.topologies-item-main,
.topologies-sub-item {
// border: 1px solid @background-darker-secondary-color;
color: @text-secondary-color;
.palable;
cursor: pointer;
padding: 4px 8px;
opacity: 0.7;
border-radius: 4px;
background-color: @background-lighter-color;
opacity: 0.8;
margin-bottom: 3px;
@@ -228,22 +234,6 @@ h2 {
}
.topology-options {
margin-top: -16px;
}
.status {
&-icon {
font-size: 16px;
position: relative;
top: 1px;
}
&-label {
margin-left: 0.5em;
}
}
.nodes-chart {
&-error {
@@ -901,17 +891,12 @@ h2 {
.sidebar {
position: fixed;
bottom: 16px;
left: 20px;
width: 18em;
font-size: 85%;
left: 24px;
font-size: .7rem;
&-item {
background-color: @background-darker-secondary-color;
border-radius: 2px;
padding: 4px 8px;
width: 100%;
margin-top: 2px;
color: @text-secondary-color;
margin-top: 4px;
&.status-loading {
animation: status-loading 2.0s infinite ease-in-out;
@@ -919,16 +904,20 @@ h2 {
&-action {
.btn-opacity;
float: right;
text-transform: uppercase;
font-weight: bold;
color: darken(@weave-orange, 25%);
cursor: pointer;
font-size: 90%;
margin-left: 0.5em;
}
}
}
.status {
text-transform: uppercase;
}
@keyframes blinking {
0%, 100% {
opacity: 1.0;