openstack/horizon
Code Issues Proposed changes

Branding: Nav icon spacing should use css

Browse Source 
The padding around the Top Nav Bar's Dropdown Icons have been done
with actual text spaces, instead of relying on padding that is set
via css. This makes it very difficult to customize the padding
around these elements at a global level.

Some contextual classes have been added for ease of branding-level
customization.

Change-Id: I6768135351637db8a950a4b44366880817ce2df3
Closes-bug: #1537608
This commit is contained in:
Diana Whitten 2016-01-24 21:10:56 -07:00
parent c6f75a224d
commit 4b5886d276
6 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
horizon/templates/horizon/common/_region_selector.html
View File

@ -1,6 +1,6 @@
{% if regions.support %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ regions.current.name }}
<span class="region-title">{{ regions.current.name }}</span>
<span class="fa fa-caret-down"></span>
</a>
<ul id="region_list" class="dropdown-menu dropdown-menu-right">

2
openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
View File

@ -45,5 +45,7 @@
.context-delimiter {
font-size: $padding-small-vertical;
vertical-align: middle;
padding-right: $padding-small-vertical;
padding-left: $padding-small-vertical;
}

14
openstack_dashboard/static/dashboard/scss/components/_navbar.scss
View File

@ -17,4 +17,18 @@
.navbar {
margin-bottom: 1px;
}
.dropdown-toggle > .fa {
padding-left: $padding-small-vertical;
padding-right: $padding-small-vertical;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}

6
openstack_dashboard/templates/context_selection/_overview.html
View File

@ -1,12 +1,12 @@
<span class="fa fa-list-alt"></span>
<span class="context-overview">
{% if domain_supported %}
<span class="context-domain"> {{ domain_name }} </span>
<span class="context-domain">{{ domain_name }}</span>
<span class="fa fa-circle context-delimiter"></span>
{% endif %}
<span class="context-project"> {{ project_name }} </span>
<span class="context-project">{{ project_name }}</span>
{% if multi_region %}
<span class="fa fa-circle context-delimiter"></span>
<span class="context-region"> {{ region_name }} </span>
<span class="context-region">{{ region_name }}</span>
{% endif %}
</span>

2
openstack_dashboard/templates/context_selection/_region_list.html
View File

@ -6,7 +6,7 @@
{% for region in regions %}
<li>
<a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
{{ region }}
<span class="region-name">{{ region }}</span>
{% if region == region_name %}
<span class="fa fa-check"></span>
{% endif %}

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

@ -7,7 +7,7 @@
{% endif %}
<a data-toggle="dropdown" href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<span class="fa fa-user"></span>
{{ request.user.username }}
<span class="user-name">{{ request.user.username }}</span>
<span class="fa fa-caret-down"></span>
</a>
<ul id="editor_list" class="dropdown-menu dropdown-menu-right">