378623217d
A recent branding effort exposed several aspects of the header templates that need to be more composable to enable richer customizations. The Horizon _header.html template has many components within it: region pickers, user menus, logos. All of these things are highly desirable to customize, but because it is all contained in the same template, a brander will have to override the entire template. This is not ideal as it increase the cost of maintenance. The splash section of the login page, the context selector, the logo section of the header, the user menu and the region selector are now composable to a much more granular level. The top navigation menus can now be used outside of existing within a list. The templates now allow use as normal, standalone dropdown items. Also, the current primary color used for 'material' was highly unpleasant with OpenStack Red. Another color on the material design palette was chosen, very close to the previous blue. See https://www.google.com/design/spec/style/color.html#color-color-palette To showcase this new composability, 'material' now shows how to customize the logo and logo-splash beyond just replacing the png, but now allowing the use of any type of image. In this case, the OpenStack logos have been upgraded with their svg counterparts. It was also noted that the context selection menu was using the wrong variable to set the color of its links. This was corrected. Closes-Bug: #1518584 Change-Id: Ib544176b9836e17fc913170664646e1d10eda831
31 lines
1.0 KiB
HTML
31 lines
1.0 KiB
HTML
{% load i18n %}
|
|
|
|
{% spaceless %}
|
|
<nav class="navbar navbar-default">
|
|
<div class="container-fluid">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
|
|
<span class="sr-only">{% trans "Toggle navigation" %}</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
{% include "header/_brand.html" %}
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
{% include "header/_context_selection.html" %}
|
|
</ul>
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
{% include "header/_user_menu.html" %}
|
|
{% include "header/_region_selection.html" %}
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
{% endspaceless %}
|