Skip to content

S
spring-boot-admin
Commit cbafd81c by Johannes Stelzer
Options

Make the appliction-header look better

parent d577991a
Showing with 103 additions and 19 deletions
spring-boot-admin-server-ui/app/css/main.css
......@@ -5,7 +5,6 @@ body {
font-family: "Varela Round",sans-serif;
}
.content {
margin-top: 50px;
margin-bottom: 50px;
......@@ -75,11 +74,17 @@ pre {
-o-transition: all 0.15s;
-ms-transition: all 0.15s;
}
.header--navbar .navbar-inner .navbar-link:hover a {
color: #eeeeee;
background-color: #6db33f;
}
.navbar-inner .container-fluid {
max-width: 1024px;
margin: 0 auto;
}
a.spring-logo {
background: url("../img/spring-logo.png") -1px -1px no-repeat;
}
......@@ -175,7 +180,6 @@ span.refresh {
border: 1px solid #34302D;
}
.sortable {
cursor: pointer;
}
......@@ -343,3 +347,79 @@ dl.health-status td {
.timeline .event:hover:before {
background: #ccc;
}
/** Application-Header **/
.header--application .navbar-inner,
.header--application-urls .navbar-inner {
font-family: Montserrat,sans-serif;
position: absolute;
z-index: 999;
background-image: none;
filter: none;
background-color: #666;
border: none;
border-bottom: 1px solid #34302D;
box-shadow: none;
position: relative;
border-radius: 0;
padding: 0;
}
.header--application .application--name {
font-family: "Montserrat",sans-serif;
font-size: 24px;
line-height: 24px;
color: #ebf1e7;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
.header--application .navbar-inner .navbar-link a {
color: #eeeeee;
text-transform: uppercase;
text-shadow: none;
font-size: 14px;
line-height: 14px;
padding: 16px 10px;
transition: all 0.15s;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
-o-transition: all 0.15s;
-ms-transition: all 0.15s;
}
.header--application .navbar-inner .navbar-link:hover a ,
.header--application .navbar-inner .navbar-link.active a {
color: #ebf1e7;
background-color: #666;
box-shadow: none;
}
.header--application .navbar-inner .navbar-link a>span {
transition: color 0.15s;
-webkit-transition: color 0.15s;
-moz-transition: color 0.15s;
-o-transition: color 0.15s;
-ms-transition: color 0.15s;
}
.header--application .navbar-inner .navbar-link:hover a>span,
.header--application .navbar-inner .navbar-link.active a>span {
border-top: 2px solid #6db33f;
border-bottom: 2px solid #6db33f;
}
.header--application-urls .navbar-inner {
background-color: #dedede;
}
.header--application-urls .navbar-inner li>a,
.header--application-urls .navbar-inner li>a:hover {
text-shadow: none;
color: #34302D;
}
.header--application-urls .navbar-inner li>a:hover {
text-decoration:underline;
}
spring-boot-admin-server-ui/app/views/apps.html
<div class="navbar" style="margin-bottom: 0px;">
<div class="navbar header--application" style="margin-bottom: 0px;">
<div class="navbar-inner">
<span class="brand">{{ application.name }}</span>
<ul class="nav pull-right">
<li class="navbar-link" ng-class="{active: $state.includes('apps.details')}"> <a ui-sref="apps.details.metrics({id: application.id})">Details</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.env({id: application.id})" >Environment</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})">JMX</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})">Threads</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})">Trace</a></li>
<li ng-show="application.capabilities.activiti" class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.activiti({id: application.id})">Activiti</a></li>
</ul>
<div class="container-fluid">
<div class="application--name">{{ application.name }}</div>
<ul class="nav pull-right">
<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>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.env({id: application.id})" ><span>Environment<span></a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" ><span>Logging</span></a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})"><span>JMX</span></a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})"><span>Threads</span></a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})"><span>Trace</span></a></li>
<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>
</ul>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar header--application-urls">
<div class="navbar-inner">
<ul class="nav" style="width: 100%;">
<li style="width: 33%; text-align: center;"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
<li style="width: 33%; text-align: center;"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
<li style="width: 33%; text-align: center;"><a href="{{ application.managementUrl }}" title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
</ul>
<div class="container-fluid">
<ul class="nav" style="width: 100%;">
<li style="width: 33%; text-align: center;"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
<li style="width: 33%; text-align: center;"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
<li style="width: 33%; text-align: center;"><a href="{{ application.managementUrl }}" title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
</ul>
</div>
</div>
</div>
<div ui-view></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment