Restyled sidebar to resemble UX guidelines
Partially-Implements: blueprint navigation-styling Closes-Bug: #1365680 Change-Id: I37e603ee5ba310ba5f18b69df4c1cd6fa529c1d9
This commit is contained in:
Jiri Tomasek
parent
7896990631
commit
b8b1aa2acc
@ -79,7 +79,7 @@ horizon.addInitFunction(function() {
|
||||
});
|
||||
|
||||
// panel selection
|
||||
$('.nav_accordion > dd > ul > li > a').click(function() {
|
||||
$('.nav_accordion > dd > div > ul > li > a').click(function() {
|
||||
horizon.modals.modal_spinner(gettext("Loading"));
|
||||
});
|
||||
|
||||
|
||||
@ -26,8 +26,12 @@
|
||||
{% include 'horizon/common/_sidebar.html' %}
|
||||
{% endblock %}
|
||||
<div id='content_body'>
|
||||
{% block page_header %}{% endblock %}
|
||||
{% block main %}{% endblock %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{% block page_header %}{% endblock %}
|
||||
{% block main %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,40 +1,42 @@
|
||||
{% load horizon i18n %}
|
||||
{% load url from future %}
|
||||
|
||||
<div>
|
||||
<dl class="nav_accordion">
|
||||
{% for dashboard, panel_info in components %}
|
||||
{% if user|has_permissions:dashboard %}
|
||||
{% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %}
|
||||
<dt {% if current.slug == dashboard.slug %}class="active"{% endif %}>
|
||||
<div>{{ dashboard.name }}</div>
|
||||
</dt>
|
||||
{% if current.slug == dashboard.slug %}
|
||||
<dd>
|
||||
{% else %}
|
||||
<dd style="display:none;">
|
||||
{% endif %}
|
||||
{% for heading, panels in panel_info.iteritems %}
|
||||
{% with panels|has_permissions_on_list:user as filtered_panels %}
|
||||
{% if filtered_panels %}
|
||||
{% if heading %}
|
||||
<div><h4><div>{{ heading }}</div></h4>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for panel in filtered_panels %}
|
||||
<li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} tabindex="{{ forloop.counter }}" >{{ panel.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if heading %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</dd>
|
||||
<dl class="nav_accordion">
|
||||
{% for dashboard, panel_info in components %}
|
||||
{% if user|has_permissions:dashboard %}
|
||||
{% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %}
|
||||
<dt {% if current.slug == dashboard.slug %}class="active"{% endif %}>
|
||||
{{ dashboard.name }}
|
||||
<span class="glyphicon pull-right"></span>
|
||||
</dt>
|
||||
{% if current.slug == dashboard.slug %}
|
||||
<dd>
|
||||
{% else %}
|
||||
<dd style="display:none;">
|
||||
{% endif %}
|
||||
{% for heading, panels in panel_info.iteritems %}
|
||||
{% with panels|has_permissions_on_list:user as filtered_panels %}
|
||||
{% if filtered_panels %}
|
||||
{% if heading %}
|
||||
<div>
|
||||
<h4>
|
||||
{{ heading }}
|
||||
<span class="glyphicon pull-right"></span>
|
||||
</h4>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for panel in filtered_panels %}
|
||||
<li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} tabindex="{{ forloop.counter }}" >{{ panel.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if heading %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</dd>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</dl>
|
||||
|
||||
BIN
openstack_dashboard/static/dashboard/img/sidebar_bg.png
Normal file
BIN
openstack_dashboard/static/dashboard/img/sidebar_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 B |
@ -1,100 +1,103 @@
|
||||
$accordionBorderColor: #e5e5e5;
|
||||
$accordionBorderColor: #aeb0b2;
|
||||
|
||||
@mixin sidebar_toggle_icon {
|
||||
& > span {
|
||||
transition: all .3s ease 0s;
|
||||
@extend .glyphicon-chevron-down;
|
||||
&:before {
|
||||
font-size: .6em;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.active > span {
|
||||
-ms-transform: rotate(180deg); /* IE 9 */
|
||||
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav_accordion {
|
||||
color: #6e6e6e;
|
||||
margin: 0px 0px;
|
||||
dt, dd {
|
||||
padding: 10px 0 10px 0;
|
||||
line-height: 18px;
|
||||
h4 {
|
||||
border: 1px solid #bbbbbb;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
background-color: #f0f0f0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 96% center;
|
||||
background-image: url("../img/right_droparrow.png");
|
||||
padding: 10px 0 10px 0;
|
||||
line-height: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: .5em 0 .3em 0;
|
||||
margin: 0 1.2em .5em 1.2em;
|
||||
border-bottom: 3px solid #c0c1c2;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: #6e6e6e;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizelegibility;
|
||||
max-width: 217px;
|
||||
padding-right: 16px;
|
||||
cursor: pointer;
|
||||
div {
|
||||
color: #6e6e6e;
|
||||
font-size: 14px;
|
||||
margin: 0 0 0 14px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 177px; } }
|
||||
h4.active {
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
background-image: url("../img/drop_arrow.png"); }
|
||||
a {
|
||||
color: #6e6e6e;
|
||||
font-size: 16px;
|
||||
margin: 0 0 0 14px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
text-decoration: none; }
|
||||
@include sidebar_toggle_icon();
|
||||
transition: all .3s ease 0s;
|
||||
&:hover{
|
||||
border-color: darken(#c0c1c2, 10%)
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none outside none;
|
||||
margin: 10px 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 222px; }
|
||||
}
|
||||
li {
|
||||
&:not(:first-child) a {
|
||||
margin-top: .2em;
|
||||
}
|
||||
&:not(:last-child) a {
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
a {
|
||||
width: 209px;
|
||||
padding: 10px;
|
||||
color: #6e6e6e;
|
||||
padding: .7em 1.2em;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
font-size: 13px; }
|
||||
a.active {
|
||||
background: white;
|
||||
border-top: 2px solid $accordionBorderColor;
|
||||
border-left: 4px solid #d93c27;
|
||||
border-bottom: 2px solid $accordionBorderColor;
|
||||
margin-left: 19px;
|
||||
border-radius: 5px 0 0 5px; }
|
||||
a:last-child {
|
||||
margin-bottom: 8px; } } }
|
||||
font-size: 1.2em;
|
||||
text-align: right;
|
||||
transition: all .3s ease 0s;
|
||||
&.active, &:hover {
|
||||
color: #d93c27;
|
||||
}
|
||||
&.active {
|
||||
background: white;
|
||||
border-top: 1px solid $accordionBorderColor;
|
||||
border-left: 4px solid #d93c27;
|
||||
border-bottom: 1px solid $accordionBorderColor;
|
||||
-webkit-box-shadow: -3px 2px 6px -3px #C7C7C7;
|
||||
box-shadow: -3px 3px 6px -3px #C7C7C7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dd {
|
||||
padding: 0;
|
||||
margin-left: 9px;
|
||||
font-size: 12px; }
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
div {
|
||||
&:first-child h4 {
|
||||
margin-top: .5em;
|
||||
}
|
||||
&:last-child h4:not(.active) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
dt {
|
||||
border-top: 1px solid #bbbbbb;
|
||||
background-color: $accordionBorderColor;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 96% center;
|
||||
background-image: url("../img/right_droparrow.png");
|
||||
padding-right: 16px;
|
||||
&:first-child { border-top: 1px solid #bbbbbb; }
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
padding: .5em 1.2em;
|
||||
max-width: 231px;
|
||||
cursor: pointer;
|
||||
div {
|
||||
color: #6e6e6e;
|
||||
font-size: 14px;
|
||||
margin: 0 0 0 14px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 201px; } }
|
||||
dt.active {
|
||||
background-image: url("../img/drop_arrow.png"); }
|
||||
dt:first-child {
|
||||
border-top: 0; }
|
||||
dt a {
|
||||
text-decoration: none; } }
|
||||
@include sidebar_toggle_icon();
|
||||
transition: all .3s ease 0s;
|
||||
&.active {
|
||||
background-color: #e3e4e6;
|
||||
}
|
||||
&:hover{
|
||||
background-color: darken(#e3e4e6, 3%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,3 +52,5 @@ $rbrowser-header-background-color: $gray-lighter;
|
||||
$rbrowser-footer-background-color: #f1f1f1;
|
||||
// Note: the content-wrapper background colors are determined by
|
||||
// .table-striped-datatable styles.
|
||||
|
||||
$sidebar-width: 220px;
|
||||
|
||||
@ -43,6 +43,11 @@
|
||||
|
||||
body {
|
||||
background-color: $body-bg;
|
||||
&:not(#splash) {
|
||||
background-image: url('../img/sidebar_bg.png');
|
||||
background-repeat: repeat-y;
|
||||
background-position: -200px top;
|
||||
}
|
||||
color: $text-color;
|
||||
min-width: 900px;
|
||||
}
|
||||
@ -142,12 +147,14 @@ h2 {
|
||||
|
||||
.sidebar {
|
||||
background-color: $sidebar-background-color;
|
||||
border-width: 0 6px 5px 0;
|
||||
border-color: $border-color;
|
||||
border-style: solid;
|
||||
border-radius: 0 0 5px 0;
|
||||
float: left;
|
||||
min-width: 236px;
|
||||
padding-top: 20px;
|
||||
margin-left: -$sidebar-width;
|
||||
left: $sidebar-width;
|
||||
width: $sidebar-width;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
-webkit-box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc;
|
||||
box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc;
|
||||
}
|
||||
|
||||
.sidebar h4 {
|
||||
@ -1063,8 +1070,8 @@ tr.terminated {
|
||||
}
|
||||
|
||||
#content_body {
|
||||
padding-left: 255px;
|
||||
padding-right: 25px;
|
||||
padding-left: $sidebar-width + 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.tab_wrapper {
|
||||
@ -1238,10 +1245,6 @@ div .flavor_table {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#main_content .row {
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
#main_content .row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user