Skip to content

Commit cbafd81

Browse files
author
Johannes Stelzer
committed
Make the appliction-header look better
1 parent d577991 commit cbafd81

File tree

2 files changed

+103
-19
lines changed

2 files changed

+103
-19
lines changed

‎spring-boot-admin-server-ui/app/css/main.css‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ body {
55
font-family: "Varela Round",sans-serif;
66
}
77

8-
98
.content {
109
margin-top: 50px;
1110
margin-bottom: 50px;
@@ -75,11 +74,17 @@ pre {
7574
-o-transition: all 0.15s;
7675
-ms-transition: all 0.15s;
7776
}
77+
7878
.header--navbar .navbar-inner .navbar-link:hover a {
7979
color: #eeeeee;
8080
background-color: #6db33f;
8181
}
8282

83+
.navbar-inner .container-fluid {
84+
max-width: 1024px;
85+
margin: 0 auto;
86+
}
87+
8388
a.spring-logo {
8489
background: url("../img/spring-logo.png") -1px -1px no-repeat;
8590
}
@@ -175,7 +180,6 @@ span.refresh {
175180
border: 1px solid #34302D;
176181
}
177182

178-
179183
.sortable {
180184
cursor: pointer;
181185
}
@@ -343,3 +347,79 @@ dl.health-status td {
343347
.timeline .event:hover:before {
344348
background: #ccc;
345349
}
350+
351+
/** Application-Header **/
352+
.header--application .navbar-inner,
353+
.header--application-urls .navbar-inner {
354+
font-family: Montserrat,sans-serif;
355+
position: absolute;
356+
z-index: 999;
357+
background-image: none;
358+
filter: none;
359+
background-color: #666;
360+
border: none;
361+
border-bottom: 1px solid #34302D;
362+
box-shadow: none;
363+
position: relative;
364+
border-radius: 0;
365+
padding: 0;
366+
}
367+
368+
.header--application .application--name {
369+
font-family: "Montserrat",sans-serif;
370+
font-size: 24px;
371+
line-height: 24px;
372+
color: #ebf1e7;
373+
display: inline-block;
374+
margin-top: 10px;
375+
margin-bottom: 10px;
376+
}
377+
378+
.header--application .navbar-inner .navbar-link a {
379+
color: #eeeeee;
380+
text-transform: uppercase;
381+
text-shadow: none;
382+
font-size: 14px;
383+
line-height: 14px;
384+
padding: 16px 10px;
385+
transition: all 0.15s;
386+
-webkit-transition: all 0.15s;
387+
-moz-transition: all 0.15s;
388+
-o-transition: all 0.15s;
389+
-ms-transition: all 0.15s;
390+
}
391+
392+
.header--application .navbar-inner .navbar-link:hover a ,
393+
.header--application .navbar-inner .navbar-link.active a {
394+
color: #ebf1e7;
395+
background-color: #666;
396+
box-shadow: none;
397+
}
398+
399+
.header--application .navbar-inner .navbar-link a>span {
400+
transition: color 0.15s;
401+
-webkit-transition: color 0.15s;
402+
-moz-transition: color 0.15s;
403+
-o-transition: color 0.15s;
404+
-ms-transition: color 0.15s;
405+
}
406+
407+
.header--application .navbar-inner .navbar-link:hover a>span,
408+
.header--application .navbar-inner .navbar-link.active a>span {
409+
border-top: 2px solid #6db33f;
410+
border-bottom: 2px solid #6db33f;
411+
}
412+
413+
.header--application-urls .navbar-inner {
414+
background-color: #dedede;
415+
}
416+
417+
.header--application-urls .navbar-inner li>a,
418+
.header--application-urls .navbar-inner li>a:hover {
419+
text-shadow: none;
420+
color: #34302D;
421+
}
422+
423+
.header--application-urls .navbar-inner li>a:hover {
424+
text-decoration:underline;
425+
}

‎spring-boot-admin-server-ui/app/views/apps.html‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
1-
<div class="navbar" style="margin-bottom: 0px;">
1+
<div class="navbar header--application" style="margin-bottom: 0px;">
22
<div class="navbar-inner">
3-
<span class="brand">{{ application.name }}</span>
4-
<ul class="nav pull-right">
5-
<li class="navbar-link" ng-class="{active: $state.includes('apps.details')}"> <a ui-sref="apps.details.metrics({id: application.id})">Details</a></li>
6-
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.env({id: application.id})" >Environment</a></li>
7-
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
8-
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})">JMX</a></li>
9-
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})">Threads</a></li>
10-
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})">Trace</a></li>
11-
<li ng-show="application.capabilities.activiti" class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.activiti({id: application.id})">Activiti</a></li>
12-
</ul>
3+
<div class="container-fluid">
4+
<div class="application--name">{{ application.name }}</div>
5+
<ul class="nav pull-right">
6+
<li class="navbar-link" ng-class="{active: $state.includes('apps.details')}"> <a ui-sref="apps.details.metrics({id: application.id})"><span>Details</span></a></li>
7+
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.env({id: application.id})" ><span>Environment<span></a></li>
8+
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" ><span>Logging</span></a></li>
9+
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})"><span>JMX</span></a></li>
10+
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})"><span>Threads</span></a></li>
11+
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})"><span>Trace</span></a></li>
12+
<li ng-show="application.capabilities.activiti" class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.activiti({id: application.id})"><span>Activiti</span></a></li>
13+
</ul>
14+
</div>
1315
</div>
1416
</div>
15-
<div class="navbar">
17+
<div class="navbar header--application-urls">
1618
<div class="navbar-inner">
17-
<ul class="nav" style="width: 100%;">
18-
<li style="width: 33%; text-align: center;"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
19-
<li style="width: 33%; text-align: center;"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
20-
<li style="width: 33%; text-align: center;"><a href="{{ application.managementUrl }}" title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
21-
</ul>
19+
<div class="container-fluid">
20+
<ul class="nav" style="width: 100%;">
21+
<li style="width: 33%; text-align: center;"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
22+
<li style="width: 33%; text-align: center;"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
23+
<li style="width: 33%; text-align: center;"><a href="{{ application.managementUrl }}" title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
24+
</ul>
25+
</div>
2226
</div>
2327
</div>
2428
<div ui-view></div>

0 commit comments

Comments
 (0)