Skip to content

Commit 13231aa

Browse files
robashcomrobashcom
committed
Dashboard footer revision #1
Tightened layout Renamed some styles Made markup more semantic (like replacing <b> with <p>) Change-Id: I32752217be24868ee9cec55c84099574f1a2a23d Reviewed-on: http://review.couchbase.org/106587 Reviewed-by: Rob Ashcom <[email protected]> Tested-by: Rob Ashcom <[email protected]>
1 parent 2784673 commit 13231aa

File tree

3 files changed

+49
-66
lines changed

3 files changed

+49
-66
lines changed

‎priv/public/ui/app/css/cbui-components.css‎

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1540,81 +1540,73 @@ input[type="checkbox"].fake-select + label:before {
15401540
}
15411541

15421542
/* dashboard widgets displaying node counts for each of four statuses ----- */
1543-
.dashboard-nodes {
1543+
.dashboard-servers {
1544+
font-size: .8125rem;
1545+
color: #333;
1546+
display: flex;
1547+
align-items: center;
1548+
justify-content: center;
1549+
flex-wrap: nowrap;
1550+
margin-bottom: .5rem;
1551+
}
1552+
.dashboard-node {
15441553
display: flex;
15451554
align-items: center;
15461555
justify-content: flex-start;
15471556
margin-right: 2rem;
15481557
}
1549-
.dashboard-nodes:last-child {
1558+
.dashboard-node:last-child {
15501559
margin-right: 0;
15511560
}
1552-
.dashboard-nodes .icon {
1553-
margin-right: .5rem;
1554-
}
1555-
.dashboard-nodes h3 {
1556-
margin-right: .25rem;
1561+
.dashboard-node .icon {
1562+
margin-right: .5rem;
1563+
font-size: 1rem;
15571564
}
1558-
.dashboard-nodes .icon {
1559-
font-size: 1.25rem;
1565+
.dashboard-node p:nth-child(2) {
1566+
margin: 0 .25rem 0 0;
1567+
font-size: .875rem;
15601568
}
1561-
.dashboard-nodes p {
1569+
.dashboard-node p:nth-child(3) {
15621570
margin: 0;
1563-
font-size: .75rem;
1564-
color: #333;
1565-
line-height: .85rem;
15661571
}
15671572

1568-
/* dashboard service widgets displaying status & details for each service + XDCR */
1573+
/* dashboard service widgets with status & details for each service + XDCR -- */
15691574
.service-widget-row {
15701575
display: flex;
15711576
align-items: center;
15721577
justify-content: space-between;
15731578
width: 800px;
15741579
margin: .25rem auto .5rem auto;
1580+
font-size: .8125rem;
1581+
color: #333;
15751582
}
15761583
.service-widget {
15771584
display: flex;
15781585
align-items: center;
15791586
justify-content: flex-start;
1580-
padding: 0 0 0 .25rem;
1587+
padding: 0 0 0 .5rem;
15811588
margin-right: 1.5rem;
15821589
cursor: pointer;
1590+
line-height: 1.1;
15831591
}
1584-
.service-widget > a,
1585-
.service-widget > .error {
1592+
.service-widget a,
1593+
.service-widget .error {
15861594
font-size: .75rem;
15871595
}
1588-
.service-widget > a {
1596+
.service-widget a {
15891597
display:block;
15901598
color: #333;
15911599
white-space: nowrap;
15921600
}
1593-
.service-widget > a:hover {
1601+
.service-widget a:hover {
15941602
color: #000;
15951603
text-decoration: underline;
15961604
}
1597-
.service-widget b {
1598-
margin-right: .5rem;
1599-
}
1600-
1601-
/* DYNAMIC STATUSES - SERVERS/BUCKETS/SERVICES -------------------------- */
1602-
/* old-style background colors ------------------------------------------
1603-
.dynamic_inactive {
1604-
background-color: #a1a1a1;
1605-
}
1606-
.dynamic_healthy {
1607-
background-color: #80c677;
1608-
}
1609-
.dynamic_inactiveFailed,
1610-
.dynamic_warmup {
1611-
background-color: #f6a623;
1605+
.service-widget p {
1606+
margin: 0 .5rem 0 0;
16121607
}
1613-
.dynamic_unhealthy {
1614-
background-color: #e07f82;
1615-
} */
16161608

1617-
/* new-style border colors ---------------------------------------------- */
1609+
/* state-indicating border colors ------------------------------------------- */
16181610
.service-widget.dynamic_inactive,
16191611
.dynamic_inactive {
16201612
border-left: 8px solid #a1a1a1; /* gray-3 */
@@ -1710,15 +1702,6 @@ input[type="checkbox"].fake-select + label:before {
17101702
padding: 1rem;
17111703
margin-bottom: 1.5rem;
17121704
}
1713-
/* dashboard version is a lighter-colored flex container ----------------- */
1714-
.content-box-dashboard {
1715-
font-size: .75rem;
1716-
display: flex;
1717-
align-items: center;
1718-
justify-content: center;
1719-
flex-wrap: nowrap;
1720-
margin-bottom: .5rem;
1721-
}
17221705
.content-box p {
17231706
margin-bottom: .5rem;
17241707
}

‎priv/public/ui/app/css/cbui-layout.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,15 @@ section {
6868
}
6969
footer {
7070
text-align: center;
71-
padding: .25rem 0;
71+
padding: .5rem 0;
7272
width: 100%;
7373
color: #555;
7474
background-color: #fff;
7575
font-size: .688rem;
7676
position: fixed;
7777
bottom: 0;
7878
left: 0;
79-
box-shadow: 0px -1px 2px 1px rgba(0,0,0,0.15);
79+
box-shadow: 0px -2px 3px 0 rgba(0,0,0,0.15);
8080
}
8181
/* basic flex component for horizontal layout --------------------------- */
8282
.row {

‎priv/public/ui/app/mn_admin/mn_overview/mn_overview.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -76,25 +76,25 @@
7676
-->
7777
</div>
7878
<footer>
79-
<div class="content-box-dashboard resp-xsml">
80-
<div class="dashboard-nodes" title="active nodes">
79+
<div class="dashboard-servers resp-xsml">
80+
<div class="dashboard-node" title="active nodes">
8181
<span class="icon fa-server green-2"></span>
82-
<h3>{{overviewCtl.nodes.all.active.length || '0'}}</h3>
82+
<p class="semi-bold">{{overviewCtl.nodes.all.active.length || '0'}}</p>
8383
<p class="resp-hide-xsml">active nodes</p>
8484
</div>
85-
<div class="dashboard-nodes" title="failed-over nodes">
85+
<div class="dashboard-node" title="failed-over nodes">
8686
<span class="icon fa-server orange-2"></span>
87-
<h3>{{overviewCtl.nodes.all.failedOver.length || '0'}}</h3>
87+
<p class="semi-bold">{{overviewCtl.nodes.all.failedOver.length || '0'}}</p>
8888
<p class="resp-hide-xsml">failed-over nodes</p>
8989
</div>
90-
<div class="dashboard-nodes" title="nodes pending rebalance">
90+
<div class="dashboard-node" title="nodes pending rebalance">
9191
<span class="icon fa-server orange-2"></span>
92-
<h3>{{overviewCtl.nodes.all.pending.length || '0'}}</h3>
92+
<p class="semi-bold">{{overviewCtl.nodes.all.pending.length || '0'}}</p>
9393
<p class="resp-hide-xsml">nodes pending rebalance</p>
9494
</div>
95-
<div class="dashboard-nodes" title="inactive nodes">
95+
<div class="dashboard-node" title="inactive nodes">
9696
<span class="icon fa-server red-3"></span>
97-
<h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
97+
<p class="semi-bold">{{overviewCtl.nodes.all.down.length || '0'}}</p>
9898
<p class="resp-hide-xsml">inactive nodes</p>
9999
</div>
100100
</div>
@@ -104,22 +104,22 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
104104
class="service-widget"
105105
ui-sref="app.admin.buckets"
106106
ng-class="['dynamic_' + overviewCtl.nodes.kv.statusClass]">
107-
<b class="text-small">Data</b>
107+
<p>Data</p>
108108
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
109109
{{overviewCtl.nodes.kv.length || '0'}}
110110
node{{overviewCtl.getEndings(overviewCtl.nodes.kv.length)}}
111111
</a>-->
112112
<div
113113
class="error"
114-
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodesByStatuses">
114+
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodespyStatuses">
115115
{{count + ' node' + overviewCtl.getEndings(count) + ' ' + nodeStatuses}}
116116
</div>
117117
</div>
118118
<div
119119
class="service-widget"
120120
ui-sref="app.admin.gsi"
121121
ng-class="['dynamic_' + overviewCtl.nodes.index.statusClass]">
122-
<b class="text-small">Index</b>
122+
<p>Index</p>
123123
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
124124
{{overviewCtl.nodes.index.length || '0'}}
125125
node{{overviewCtl.getEndings(overviewCtl.nodes.index.length)}}
@@ -134,7 +134,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
134134
class="service-widget"
135135
ui-sref="app.admin.query.workbench"
136136
ng-class="['dynamic_' + overviewCtl.nodes.n1ql.statusClass]">
137-
<b class="text-small">Query</b>
137+
<p>Query</p>
138138
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
139139
{{overviewCtl.nodes.n1ql.length || '0'}}
140140
node{{overviewCtl.getEndings(overviewCtl.nodes.n1ql.length)}}
@@ -149,7 +149,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
149149
class="service-widget"
150150
ui-sref="app.admin.search.fts_list"
151151
ng-class="['dynamic_' + overviewCtl.nodes.fts.statusClass]">
152-
<b class="text-small">Search</b>
152+
<p>Search</p>
153153
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
154154
{{overviewCtl.nodes.fts.length || '0'}}
155155
node{{overviewCtl.getEndings(overviewCtl.nodes.fts.length)}}
@@ -165,7 +165,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
165165
class="service-widget"
166166
ui-sref="app.admin.cbas.workbench"
167167
ng-class="['dynamic_' + overviewCtl.nodes.cbas.statusClass]">
168-
<b class="text-small">Analytics</b>
168+
<p>Analytics</p>
169169
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
170170
{{overviewCtl.nodes.cbas.length || '0'}}
171171
node{{overviewCtl.getEndings(overviewCtl.nodes.cbas.length)}}
@@ -181,7 +181,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
181181
class="service-widget"
182182
ui-sref="app.admin.eventing.summary"
183183
ng-class="['dynamic_' + overviewCtl.nodes.eventing.statusClass]">
184-
<b class="text-small">Eventing</b>
184+
<p>Eventing</p>
185185
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
186186
{{overviewCtl.nodes.eventing.length || '0'}}
187187
node{{overviewCtl.getEndings(overviewCtl.nodes.eventing.length)}}
@@ -197,7 +197,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
197197
ui-sref="app.admin.replications"
198198
class="service-widget"
199199
ng-class="['dynamic_' + (adminCtl.tasks.tasksXDCR.length ? 'healthy' : 'inactive')]">
200-
<b class="text-small">XDCR</b>
200+
<p>XDCR</p>
201201
<a>
202202
{{overviewCtl.xdcrReferences.filtered.length}}
203203
remote{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}

0 commit comments

Comments
 (0)