Top Nav is responsive and inherits from its theme
Horizon's top nav now uses <nav> and correcly implements the Bootstrap HTML standards to make a responsive experience. Partially-Implements: blueprint horizon-theme-css-reorg Partially-Implements: blueprint bootstrap-html-standards Change-Id: I73c5529ae477a17f10a17946ac7120969578a0ba
This commit is contained in:
Diana Whitten
parent
8ce0a7af30
commit
5b3af1f0d5
@ -297,7 +297,7 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
|
||||
}
|
||||
|
||||
@media (min-width: 0em) {
|
||||
$content-width: $body-min-width - $sidebar-width - (2 * $content-body-padding);
|
||||
$content-width: $main-content-min-width - $sidebar-width - (2 * $content-body-padding);
|
||||
$max-priority: floor($content-width / $font-size-base / $em-per-priority);
|
||||
|
||||
@for $i from 1 through $max-priority {
|
||||
@ -359,4 +359,4 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
|
||||
.pagination > li > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $webroot: "" !default;
|
||||
/* Horizon Custom Variables */
|
||||
|
||||
$code-font-family: Menlo, Monaco, Consolas, 'Courier New' !default;
|
||||
$body-min-width: 900px !default;
|
||||
$main-content-min-width: 900px !default;
|
||||
$sidebar-background-color: #f9f9f9 !default;
|
||||
$sidebar-width: 220px !default;
|
||||
$border-color: #dddddd !default;
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
.topbar {
|
||||
background: $gray-lighter;
|
||||
border-bottom: 1px solid $gray-light;
|
||||
padding-right: 15px;
|
||||
h1.brand {
|
||||
display: inline-block;
|
||||
width: 222px;
|
||||
margin: 0 0 0 10px;
|
||||
line-height: 1;
|
||||
a {
|
||||
background: url(../img/logo.png) left center no-repeat;
|
||||
display: block;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
}
|
||||
.switcher_bar {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0px;
|
||||
|
||||
.btn.btn-topnav{
|
||||
@include button-size(8px, $padding-base-horizontal, $font-size-base, $line-height-base, 0);
|
||||
@include button-variant($btn-default-color, $gray-lighter, $gray-lighter);
|
||||
&:hover, &:active {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.topbar-dropdown-menu {
|
||||
border-radius: 0;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
}
|
||||
&:before {
|
||||
top: -7px;
|
||||
left: 9px;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&:after {
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #ffffff;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
&.pull-right:before {
|
||||
left: auto;
|
||||
right: 9px;
|
||||
}
|
||||
&.pull-right:after {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.context-selection {
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.context-lists {
|
||||
display: table;
|
||||
width: 100%;
|
||||
ul {
|
||||
display: table-cell;
|
||||
padding: .5em 0;
|
||||
li {
|
||||
a {
|
||||
@extend .dropdown-menu > li > a;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0.4em 1em;
|
||||
background: whitesmoke;
|
||||
border-top: 1px solid $gray-light;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,6 @@
|
||||
// Dashboard Components
|
||||
@import "splash";
|
||||
@import "components/resource_browser";
|
||||
@import "components/topbar";
|
||||
@import "components/accordion_nav";
|
||||
@import "components/inline_edit";
|
||||
@import "components/charts";
|
||||
@ -63,7 +62,6 @@ body {
|
||||
background-position: -200px top;
|
||||
}
|
||||
color: $text-color;
|
||||
min-width: $body-min-width;
|
||||
}
|
||||
|
||||
small {
|
||||
@ -953,6 +951,8 @@ tr.terminated {
|
||||
}
|
||||
|
||||
#main_content {
|
||||
min-width: $main-content-min-width;
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid $nav-tabs-border-color;
|
||||
border-top: none;
|
||||
|
||||
@ -2,55 +2,69 @@
|
||||
{% load url from future %}
|
||||
{% load context_selection %}
|
||||
|
||||
<h1 class="brand"><a href="{% site_branding_link %}">{% site_branding %}</a></h1>
|
||||
<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>
|
||||
<a class="navbar-brand" href="{% site_branding_link %}">
|
||||
<img class="openstack-logo" src="{{ STATIC_URL }}dashboard/img/logo.png" alt="{% site_branding %}">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="switcher_bar">
|
||||
<div class="dropdown context-selection">
|
||||
<button class="btn btn-default btn-topnav dropdown-toggle">
|
||||
{% show_overview %}
|
||||
</button>
|
||||
<div class="dropdown-menu topbar-dropdown-menu">
|
||||
<div class="context-lists">
|
||||
{% show_domain_list %}
|
||||
{% show_project_list %}
|
||||
{% show_region_list %}
|
||||
</div>
|
||||
</div><!-- end of dropdown-menu -->
|
||||
</div><!-- end of context-selection -->
|
||||
</div><!-- end of context-box -->
|
||||
|
||||
<div id="user_info" class="pull-right">
|
||||
<div id="profile_editor_switcher" class="dropdown switcher_bar" tabindex='1'>
|
||||
<button class="btn btn-default btn-topnav dropdown-toggle">
|
||||
<span class="fa fa-user"></span>
|
||||
{{ request.user.username }}
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</button>
|
||||
<ul id="editor_list" class="dropdown-menu topbar-dropdown-menu pull-right">
|
||||
<li>
|
||||
<a href="{% url 'horizon:settings:user:index' %}">
|
||||
<span class="fa fa-cog"></span>
|
||||
{% trans "Settings" %}
|
||||
</a>
|
||||
</li>
|
||||
{% if HORIZON_CONFIG.help_url %}
|
||||
<li>
|
||||
<a href="{{ HORIZON_CONFIG.help_url }}" target="_blank">
|
||||
<span class="fa fa-question-circle"></span>
|
||||
{% trans "Help" %}
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown context-selection">
|
||||
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
|
||||
{% show_overview %}
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</a>
|
||||
{% show_domain_list %}
|
||||
{% show_project_list %}
|
||||
{% show_region_list %}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="{% url 'logout' %}">
|
||||
<span class="fa fa-sign-out"></span>
|
||||
{% trans "Sign Out" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
{% include "horizon/common/_region_selector.html" %}
|
||||
</div>
|
||||
{% include "horizon/common/_region_selector.html" %}
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
|
||||
<span class="fa fa-user"></span>
|
||||
{{ request.user.username }}
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</a>
|
||||
<ul id="editor_list" class="dropdown-menu">
|
||||
<li>
|
||||
<a href="{% url 'horizon:settings:user:index' %}">
|
||||
<span class="fa fa-cog"></span>
|
||||
{% trans "Settings" %}
|
||||
</a>
|
||||
</li>
|
||||
{% if HORIZON_CONFIG.help_url %}
|
||||
<li>
|
||||
<a href="{{ HORIZON_CONFIG.help_url }}" target="_blank">
|
||||
<span class="fa fa-question-circle"></span>
|
||||
{% trans "Help" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="{% url 'logout' %}">
|
||||
<span class="fa fa-sign-out"></span>
|
||||
{% trans "Sign Out" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<span class="fa fa-list-alt"></span>
|
||||
<span class="context-overview">
|
||||
{% if domain_supported %}
|
||||
<span>{{ domain_name }}</span>
|
||||
<strong>·</strong>
|
||||
{% endif %}
|
||||
<span>{{ project_name }}</span>
|
||||
{% if multi_region %}
|
||||
<strong>·</strong>
|
||||
<span>{{ region_name }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="fa fa-caret-down"></span>
|
||||
<span class="context-overview">
|
||||
{% if domain_supported %}
|
||||
<span>{{ domain_name }}</span>
|
||||
<strong>·</strong>
|
||||
{% endif %}
|
||||
<span>{{ project_name }}</span>
|
||||
{% if multi_region %}
|
||||
<strong>·</strong>
|
||||
<span>{{ region_name }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{% load url from future %}
|
||||
|
||||
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
|
||||
<ul>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">{% trans "Projects:" %}</li>
|
||||
{% for project in projects %}
|
||||
<li>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
@import 'components/navbar';
|
||||
@ -343,24 +343,24 @@ $container-lg: $container-large-desktop !default;
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 50px !default;
|
||||
$navbar-height: 36px !default;
|
||||
$navbar-margin-bottom: $line-height-computed !default;
|
||||
$navbar-border-radius: $border-radius-base !default;
|
||||
$navbar-border-radius: 0 !default;
|
||||
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
||||
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: #f8f8f8 !default;
|
||||
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
||||
$navbar-default-color: #333 !default;
|
||||
$navbar-default-bg: #eee !default;
|
||||
$navbar-default-border: #ccc !default;
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #777 !default;
|
||||
$navbar-default-link-hover-color: #333 !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #555 !default;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-color: $navbar-default-color !default;
|
||||
$navbar-default-link-hover-color: $navbar-default-color !default;
|
||||
$navbar-default-link-hover-bg: #d5d5d5 !default;
|
||||
$navbar-default-link-active-color: $navbar-default-color !default;
|
||||
$navbar-default-link-active-bg: $navbar-default-link-hover-bg !default;
|
||||
$navbar-default-link-disabled-color: $gray-light !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
// Navbar brand label
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
// These are helper variables for this file only.
|
||||
// They inherit from bootstrap/variables and should
|
||||
// scope to only this logic for overriding the native
|
||||
// bootstrap navbar.
|
||||
$navbar-dropdown-arrow-size: $font-size-small / 2;
|
||||
$navbar-dropdown-arrow-offset: $padding-small-horizontal;
|
||||
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
padding: 0 $padding-small-horizontal;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
max-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
// Pushes the menu slightly down from the navbar
|
||||
li > .dropdown-menu {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@media (min-width:$screen-sm) {
|
||||
// Sets default values for upper arrow on navbar dropdowns
|
||||
.dropdown-menu {
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Defaults the arrow to the left side
|
||||
.dropdown-menu {
|
||||
&:before {
|
||||
top: ($navbar-dropdown-arrow-size + 1) * -1;
|
||||
left: $navbar-dropdown-arrow-offset - 1;
|
||||
border-right: $navbar-dropdown-arrow-size + 1 solid transparent;
|
||||
border-bottom: $navbar-dropdown-arrow-size + 1 solid $dropdown-border;
|
||||
border-left: $navbar-dropdown-arrow-size + 1 solid transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: -$navbar-dropdown-arrow-size;
|
||||
left: $navbar-dropdown-arrow-offset;
|
||||
border-right: $navbar-dropdown-arrow-size solid transparent;
|
||||
border-bottom: $navbar-dropdown-arrow-size solid $body-bg;
|
||||
border-left: $navbar-dropdown-arrow-size solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Changes the arrow to the right side for .navbar-right items
|
||||
.navbar-right .dropdown-menu {
|
||||
|
||||
&:before, &:after {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: $navbar-dropdown-arrow-offset - 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: $navbar-dropdown-arrow-offset;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
.navbar-brand {
|
||||
|
||||
// The 114 is a legacy value to push the context-menu over
|
||||
padding-right: 114px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user