libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Adjusting headers to make them horizontally aligned to the content

Browse source
This commit is contained in:
Gabriel Cardoso 2014-03-10 20:59:57 -03:00
parent d8c13c9ac2
commit b6503748ca
4 changed files with 150 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
View file

@ -2,12 +2,16 @@ body {
background-color: #F9F9F9; background-color: #F9F9F9;
} }
.header .container {
position: relative;
}
.navbar-title { .navbar-title {
background-image: url('../img/logo.png'); background-image: url('../img/logo.png');
height: 25px; height: 25px;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 103px; width: 103px;
margin: 3px 20px 5px; margin: 3px 10px 5px;
text-indent: -99999px; text-indent: -99999px;
} }
@ -39,6 +43,11 @@ body {
border-top-color: rgba(255,255,255,0.05); border-top-color: rgba(255,255,255,0.05);
} }
.navbar-nav > li > .dropdown-menu {
left: 15px;
margin-top: 1px;
}
.navbar-pf .navbar-primary li.dropdown.context > a { .navbar-pf .navbar-primary li.dropdown.context > a {
padding-right: 12px; padding-right: 12px;
} }
@ -64,15 +73,20 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.navbar-pf .navbar-utility {
right: 15px;
top: -34px;
}
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle { .navbar-pf .navbar-utility li.dropdown > .dropdown-toggle {
border-left: none; border-left: none;
padding-top: 11px; padding-top: 11px;
padding-bottom: 11px; padding-bottom: 12px;
color: #fff !important; color: #fff !important;
} }
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .pficon-user { .navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .pficon-user {
top: 10px; top: 11px;
} }
.navbar-pf .navbar-utility > li > a:hover, .navbar-pf .navbar-utility > li > a:hover,

150
admin-ui/src/main/resources/META-INF/resources/admin/index_mock.html
View file

@ -69,85 +69,89 @@
<header class="navbar navbar-default navbar-pf navbar-main header"> <header class="navbar navbar-default navbar-pf navbar-main header">
<nav id="kc-navigation" class="navbar" role="navigation"> <nav id="kc-navigation" class="navbar" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1"> <div class="container">
<span class="sr-only">Toggle navigation</span> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<h1 class="navbar-title"><Strong>KeyCloak</Strong> Central Login</h1> </button>
<h1 class="navbar-title"><Strong>KeyCloak</Strong> Central Login</h1>
</div>
</div> </div>
<div class="collapse navbar-collapse navbar-collapse-1"> <div class="collapse navbar-collapse navbar-collapse-1">
<ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn"> <div class="container">
<li class="dropdown"> <ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> <li class="dropdown">
<span class="pficon pficon-user"></span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
{{auth.user.displayName}}<b class="caret"></b> <span class="pficon pficon-user"></span>
</a> {{auth.user.displayName}}<b class="caret"></b>
<ul class="dropdown-menu"> </a>
<li><a href="/auth/rest/realms/keycloak-admin/account?referrer=admin-console">Manage Account</a></li> <ul class="dropdown-menu">
<li class="separator"><a href="/auth/rest/admin/logout">Sign Out</a></li> <li><a href="/auth/rest/realms/keycloak-admin/account?referrer=admin-console">Manage Account</a></li>
</ul> <li class="separator"><a href="/auth/rest/admin/logout">Sign Out</a></li>
</li> </ul>
</ul> </li>
<ul class="nav navbar-nav navbar-primary persistent-secondary" data-ng-controller="RealmDropdownCtrl"> </ul>
<li class="dropdown context" data-ng-show="showNav()"> <ul class="nav navbar-nav navbar-primary persistent-secondary" data-ng-controller="RealmDropdownCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <li class="dropdown context" data-ng-show="showNav()">
Realm: {{current.realm.id}} <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b> Realm: {{current.realm.id}}
</a> <b class="caret"></b>
<ul class="dropdown-menu"> </a>
<li data-ng-repeat="realm in current.realms"> <ul class="dropdown-menu">
<a href="" ng-click="changeRealm(realm.id)" >{{realm.id}}</a> <li data-ng-repeat="realm in current.realms">
</li> <a href="" ng-click="changeRealm(realm.id)" >{{realm.id}}</a>
</ul> </li>
</li> </ul>
</li>
<!---------------------------------------> <!--------------------------------------->
<li class="active"> <li class="active">
<a href="#">Settings</a> <a href="#">Settings</a>
<ul class="nav navbar-nav navbar-persistent"> <ul class="nav navbar-nav navbar-persistent">
<li class="active"> <li class="active">
<a href="#">General</a> <a href="#">General</a>
</li> </li>
<li> <li>
<a href="#">Roles</a> <a href="#">Roles</a>
</li> </li>
<li> <li>
<a href="#">Default Roles</a> <a href="#">Default Roles</a>
</li> </li>
<li> <li>
<a href="#">Credentials</a> <a href="#">Credentials</a>
</li> </li>
<li> <li>
<a href="#">Token</a> <a href="#">Token</a>
</li> </li>
<li> <li>
<a href="#">Keys</a> <a href="#">Keys</a>
</li> </li>
<li> <li>
<a href="#">Email</a> <a href="#">Email</a>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#">User</a> <a href="#">User</a>
</li> </li>
<li> <li>
<a href="#">Applications</a> <a href="#">Applications</a>
</li> </li>
<li> <li>
<a href="#">OAuth Clients</a> <a href="#">OAuth Clients</a>
</li> </li>
<!---------------------------------------> <!--------------------------------------->
<li class="active pull-right" data-ng-show="auth.loggedIn"> <li class="active pull-right" data-ng-show="auth.loggedIn">
<a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'" <a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'"
data-ng-show="auth.loggedIn">Add Realm</a> data-ng-show="auth.loggedIn">Add Realm</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</nav> </nav>
</header> </header>

76
admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
View file

@ -1,43 +1,47 @@
<nav id="kc-navigation" class="navbar" role="navigation"> <nav id="kc-navigation" class="navbar" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1"> <div class="container">
<span class="sr-only">Toggle navigation</span> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<h1 class="navbar-title">Keycloak</h1> </button>
<h1 class="navbar-title">Keycloak</h1>
</div>
</div> </div>
<div class="collapse navbar-collapse navbar-collapse-1"> <div class="collapse navbar-collapse navbar-collapse-1">
<ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn"> <div class="container">
<li class="dropdown"> <ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> <li class="dropdown">
<span class="pficon pficon-user"></span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
{{auth.user.displayName}}<b class="caret"></b> <span class="pficon pficon-user"></span>
</a> {{auth.user.displayName}}<b class="caret"></b>
<ul class="dropdown-menu"> </a>
<li><a href="/auth/rest/realms/{{auth.user.realm}}/account?referrer=admin-console">Manage Account</a></li> <ul class="dropdown-menu">
<li class="separator"><a href="/auth/rest/admin/logout">Sign Out</a></li> <li><a href="/auth/rest/realms/{{auth.user.realm}}/account?referrer=admin-console">Manage Account</a></li>
</ul> <li class="separator"><a href="/auth/rest/admin/logout">Sign Out</a></li>
</li> </ul>
</ul> </li>
<ul class="nav navbar-nav navbar-primary persistent-secondary" data-ng-controller="RealmDropdownCtrl"> </ul>
<li class="dropdown context" data-ng-show="showNav()"> <ul class="nav navbar-nav navbar-primary persistent-secondary" data-ng-controller="RealmDropdownCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <li class="dropdown context" data-ng-show="showNav()">
{{current.realm.realm}} <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b> {{current.realm.realm}}
</a> <b class="caret"></b>
<ul class="dropdown-menu"> </a>
<li data-ng-repeat="realm in current.realms"> <ul class="dropdown-menu">
<a href="" ng-click="changeRealm(realm.realm)">{{realm.realm}}</a> <li data-ng-repeat="realm in current.realms">
</li> <a href="" ng-click="changeRealm(realm.realm)">{{realm.realm}}</a>
</ul> </li>
</li> </ul>
<li class="active pull-right" data-ng-show="auth.loggedIn && access.createRealm"> </li>
<a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'" <li class="active pull-right" data-ng-show="auth.loggedIn && access.createRealm">
data-ng-show="auth.loggedIn">Add Realm</a> <a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'"
</li> data-ng-show="auth.loggedIn">Add Realm</a>
</ul> </li>
</ul>
</div>
</div> </div>
</nav> </nav>
<!-- TODO remove once this page is properly styled --> <!-- TODO remove once this page is properly styled -->

22
forms/common-themes/src/main/resources/theme/account/base/template.ftl
View file

@ -21,17 +21,19 @@
<header class="navbar navbar-default navbar-pf navbar-main header"> <header class="navbar navbar-default navbar-pf navbar-main header">
<div> <div>
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<div class="navbar-header"> <div class="container">
<div class="navbar-title"> <div class="navbar-header">
</div> <div class="navbar-title">
</div> </div>
</div>
<div class="navbar-collapse"> <div class="navbar-collapse">
<ul class="nav navbar-nav navbar-utility"> <ul class="nav navbar-nav navbar-utility">
<#if referrer?has_content && referrer.baseUrl?has_content><li><a href="${referrer.baseUrl}">Back to ${referrer.name}</a></li></#if> <#if referrer?has_content && referrer.baseUrl?has_content><li><a href="${referrer.baseUrl}">Back to ${referrer.name}</a></li></#if>
<li><a href="${url.logoutUrl}">Sign Out</a></li> <li><a href="${url.logoutUrl}">Sign Out</a></li>
</ul> </ul>
</div> </div>
</div>
</nav> </nav>
</div> </div>
</header> </header>