mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +00:00
Highlight topologies with no border
* removed background from sidebar items
This commit is contained in:
@@ -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}
|
||||
<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}
|
||||
|
||||
<a className="footer-label" href="https://gitreports.com/issue/weaveworks/scope" target="_blank">
|
||||
Report an issue
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user