Adjusted flow for header elements
The header components now flow in accordance to the approved UI. The search bar extneds to the entire remaining width of the screen, and small adjustments have been made to the title to offer more space in smaller form factors. It was necessary to move the branding into header.html, in order to permit proper column sizing (nesting them created weird padding issues). Note that this UI doesn't work too well on a mobile screen - that experience should probably receive its own treatment. http://git.openstack.org/cgit/openstack/openstack-ux/plain/mocks/Ironic%20Standalone%20-%2007%20March%202016.pdf Change-Id: I1b1f8f9bb4f9f9e79b86260be3a554274d8c44ed
This commit is contained in:
Michael Krotscheck
parent
7e75d9c5aa
commit
fd75e8c0a9
|
|
@ -8,3 +8,14 @@
|
|||
right: $grid-gutter-width / 2;
|
||||
bottom: $padding-base-horizontal;
|
||||
}
|
||||
|
||||
// Navbar form that respects the column-grid
|
||||
.navbar-form-grid {
|
||||
margin-left: -$navbar-padding-horizontal;
|
||||
margin-right: -$navbar-padding-horizontal;
|
||||
padding: 8px $navbar-padding-horizontal;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
$shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,6 +107,9 @@ angular.module('ironic', ['ui.router', 'ui.bootstrap', 'ironic.util', 'ironic.ap
|
|||
.state('root.config', {
|
||||
url: '/config',
|
||||
views: {
|
||||
header: {
|
||||
templateUrl: 'view/ironic/config_header.html'
|
||||
},
|
||||
main: {
|
||||
templateUrl: 'view/ironic/config.html',
|
||||
controller: 'ConfigurationController as ctrl'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="row">
|
||||
<div class="navbar-header col-lg-3 col-xs-2">
|
||||
<a class="navbar-brand text-nowrap"
|
||||
href="#/ironic"
|
||||
active-path="^\/ironic$">
|
||||
<i class="of of-openstack"></i>
|
||||
<span class="hidden-sm hidden-md hidden-xs">OpenStack</span>
|
||||
Bare Metal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,39 +1,50 @@
|
|||
<ul class="nav navbar-nav navbar-left">
|
||||
<li uib-dropdown is-open="status.isopen">
|
||||
<a href="#"
|
||||
uib-dropdown-toggle
|
||||
data-toggle="dropdown">
|
||||
{{headerCtrl.currentConfiguration.name}}
|
||||
<span class="caret"></span>
|
||||
<div class="row">
|
||||
<div class="navbar-header col-lg-3 col-xs-2">
|
||||
<a class="navbar-brand text-nowrap"
|
||||
href="#"
|
||||
active-path="^\/ironic$">
|
||||
<i class="of of-openstack"></i>
|
||||
<span class="hidden-sm hidden-md hidden-xs">OpenStack</span>
|
||||
Bare Metal
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Switch to...</li>
|
||||
<li ng-repeat="cloud in headerCtrl.configurations">
|
||||
<a href="#"
|
||||
ng-click="headerCtrl.switchCloud(cloud)">
|
||||
<i class="fa fa-cloud"></i>
|
||||
{{cloud.name}}
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#/config" class="text-muted">
|
||||
<i class="fa fa-gear"></i>
|
||||
Manage
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
placeholder="Search"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" disabled>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav col-xs-2">
|
||||
<li uib-dropdown is-open="status.isopen">
|
||||
<a href="#"
|
||||
uib-dropdown-toggle
|
||||
data-toggle="dropdown"
|
||||
class="text-nowrap">
|
||||
{{headerCtrl.currentConfiguration.name}}
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Switch to...</li>
|
||||
<li ng-repeat="cloud in headerCtrl.configurations">
|
||||
<a href="#"
|
||||
ng-click="headerCtrl.switchCloud(cloud)">
|
||||
<i class="fa fa-cloud"></i>
|
||||
{{cloud.name}}
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#/config" class="text-muted">
|
||||
<i class="fa fa-gear"></i>
|
||||
Manage
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav navbar-form-grid col-lg-7 col-xs-8">
|
||||
<div class="col-xs-9 col-sm-10">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
placeholder="Search"
|
||||
disabled/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default col-xs-3 col-sm-2" disabled>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand"
|
||||
href="#/ironic"
|
||||
active-path="^\/ironic$">
|
||||
<i class="of of-openstack"></i>
|
||||
OpenStack Bare Metal
|
||||
</a>
|
||||
</div>
|
||||
<div ui-view="header"></div>
|
||||
</div>
|
||||
<div class="container-fluid" ui-view="header"></div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid" ui-view="main"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue