openstack/deb-horizon
Code Issues Proposed changes

Set proper z-index value on messages and navbar

Browse Source 
The navbar should have been using the built in navbar-fixed-top class
as it is a fixed top navbar.  After added the correct class, the
correct z-index value was added via Bootstrap, then the messages
container simply needed to add a z-index that would appropriately
place it above dropdowns.

The user menu was simply a symptom of the overall problem, where all
the dropdowns in the navbar needed to behave the same way.

The z-index variables of the theme were used, therefore the
incorrect stacking of the messages over the spinner and the modal
were fixed at the same time.

It was noted that the right padding of the messages was using the
incorrect padding variable.  This was corrected.

Closes-bug: #1408640
Co-Authored-By: Diana Whitten <hurgleburgler@gmail.com>
Change-Id: I1d59049d43e74c2a897673307593993f4291da39
This commit is contained in:
LIU Yulong 2015-01-08 21:00:44 +08:00 committed by Diana Whitten
parent e6a6adda4d
commit 5fb2ce80c6
5 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openstack_dashboard/static/dashboard/scss/_layout.scss
View File

@ -12,10 +12,10 @@ $navbar-border-size: 1px !default;
$navbar-true-height: $navbar-height + $navbar-border-size !default;
#main_content {
height: 100%; /* fallback if needed --> its scrolls, but it works */
height: calc(100% - #{$navbar-true-height});
height: 100%;
display: table;
min-width: $main-content-min-width;
padding-top: $navbar-true-height;
}
#content_body,

6
openstack_dashboard/static/dashboard/scss/components/_messages.scss
View File

@ -1,8 +1,8 @@
.messages {
position: fixed;
z-index: 9999;
top: $padding-large-vertical*2;
right: $padding-large-vertical*2;
z-index: $zindex-dropdown + 1;
padding-top: $padding-small-vertical;
right: $padding-large-horizontal;
// TODO (hurgleburlger) RESPONSIVE
// We will readdress this when we address the responsiveness of Horizon

2
openstack_dashboard/templates/header/_header.html
View File

@ -1,7 +1,7 @@
{% load i18n %}
{% spaceless %}
<nav class="navbar navbar-default">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

8
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

@ -15,7 +15,6 @@
}
#content_body {
padding-top: $navbar-height;
transition: padding-left $sidebar-animation;
display: block;
padding-left: $sidebar-width + $content-body-padding;
@ -32,13 +31,6 @@
}
// The top nav is fixed, even when the page scrolls
.topbar {
width: 100%;
position: fixed;
z-index: 4;
}
// Border radius is unattractive here
.navbar {
border-radius: 0;

2
openstack_dashboard/themes/material/templates/header/_header.html
View File

@ -2,7 +2,7 @@
{% load context_selection %}
{% load compress %}
<nav class="navbar-inverse">
<nav class="navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">