Basic Tabs now inherit from a Bootstrap Theme
Tabs were pretty basic. For the most, tabs were using the standard styles nicely, except when embedded inside of a modal. There was a lot of adding padding and removing padding to the tab-content and modal container. This has been cleaned up. Also, the 'asterisk' that is used to show when a tab has required information for a workflow was changed to an icon font. Many unused styles were removed from horizon.scss. Partially-Implements: blueprint horizon-theme-css-reorg Partially-Implements: blueprint bootstrap-html-standards Change-Id: I929de0ae31a3c2cca9e332956eed755c4e279f3d
This commit is contained in:
Diana Whitten
parent
e71602479d
commit
b4295a7df7
@ -129,6 +129,7 @@ full use of the Bootstrap theme architecture.
|
||||
|
||||
* Tables_
|
||||
* Login_
|
||||
* Tabs_
|
||||
|
||||
Step 1
|
||||
------
|
||||
@ -147,10 +148,8 @@ more useful ones include:
|
||||
tools will provide the ``variables.less`` file, which will need to be
|
||||
converted to ``_variables.scss``
|
||||
|
||||
.. _Top Navbar:
|
||||
|
||||
The Top Navbar
|
||||
--------------
|
||||
Top Navbar
|
||||
----------
|
||||
|
||||
The top navbar in Horizon now uses a native Bootstrap ``navbar``. There are a
|
||||
number of variables that can be used to customize this element. Please see the
|
||||
@ -165,17 +164,13 @@ The top navbar is now responsive on smaller screens. When the window size hits
|
||||
your ``$screen-sm`` value, the topbar will compress into a design that is
|
||||
better suited for small screens.
|
||||
|
||||
.. _Side Nav:
|
||||
|
||||
The Side Nav
|
||||
------------
|
||||
Side Nav
|
||||
--------
|
||||
|
||||
The side navigation component has been refactored to use the native Stacked
|
||||
Pills element from Bootstrap. See **Pills** section of your variables file
|
||||
for specific variables to customize.
|
||||
|
||||
.. _Pie Charts:
|
||||
|
||||
Pie Charts
|
||||
----------
|
||||
|
||||
@ -186,8 +181,6 @@ Since there is no native element in Bootstrap specifically for pie charts,
|
||||
the look and feel of the charts are inheriting from other elements of the
|
||||
theme. Please see ``_pie_charts.scss`` for specifics.
|
||||
|
||||
.. _Tables:
|
||||
|
||||
Tables
|
||||
------
|
||||
|
||||
@ -217,6 +210,13 @@ The modal login experience, as used when switching regions, uses a standard
|
||||
Bootstrap dialog. See the **Modals** section of your variables file for
|
||||
specific variables to customize.
|
||||
|
||||
Tabs
|
||||
----
|
||||
|
||||
The standard tabs make use of the native Bootstrap tab markup.
|
||||
|
||||
See **Tabs** section of your variables file for variables to customize.
|
||||
|
||||
Bootswatch and Material Design
|
||||
------------------------------
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{% load horizon i18n %}
|
||||
|
||||
<div class='clearfix'>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
{% for component in components %}
|
||||
{% if user|has_permissions:component %}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% with workflow.get_entry_point as entry_point %}
|
||||
|
||||
<div class="workflow {{ layout|join:' ' }}" data-backdrop="{{ modal_backdrop }}">
|
||||
<form {{ workflow.attr_string|safe }} action="{{ workflow.get_absolute_url }}" {% if add_to_field %}data-add-to-field="{{ add_to_field }}"{% endif %} method="POST"{% if workflow.multipart %} enctype="multipart/form-data"{% endif %}>{% csrf_token %}
|
||||
{% if REDIRECT_URL %}<input type="hidden" name="{{ workflow.redirect_param_name }}" value="{{ REDIRECT_URL }}"/>{% endif %}
|
||||
@ -11,12 +13,15 @@
|
||||
<h3 class="modal-title">{{ workflow.name }}</h3>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="modal-body clearfix">
|
||||
<div class="modal-body">
|
||||
{% block modal-body %}
|
||||
<ul class="nav nav-tabs{% if workflow.wizard %} wizard-tabs{% endif %}" role="tablist">
|
||||
{% for step in workflow.steps %}
|
||||
<li class="{% if entry_point == step.slug %}active{% endif %}{% if step.has_errors %} error{% endif %}{% if step.has_required_fields %} required{% endif %}">
|
||||
<a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">{{ step }}</a>
|
||||
<a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">
|
||||
{{ step }}
|
||||
{% if step.has_required_fields %}<span class="hz-icon-required fa fa-asterisk"></span>{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@ -54,7 +59,9 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endwith %}
|
||||
|
||||
{% block modal-js %}
|
||||
{% if workflow.wizard %}
|
||||
<script type="text/javascript">
|
||||
|
||||
@ -114,7 +114,7 @@ class TemplateTagTests(test.TestCase):
|
||||
def test_horizon_main_nav(self):
|
||||
text = "{% horizon_main_nav %}"
|
||||
expected = """
|
||||
<div class='clearfix'>
|
||||
<div>
|
||||
<ul class=\"nav nav-tabs\" role=\"tablist\">
|
||||
<li>
|
||||
<a href=\"/cats/\" tabindex='1'>Cats</a>
|
||||
|
||||
@ -91,4 +91,11 @@
|
||||
color: $workflow-color-label-error;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs .hz-icon-required {
|
||||
font-size: 50%;
|
||||
vertical-align: top;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -161,50 +161,6 @@ a.current_item:hover h4 {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.usage_block {
|
||||
background: #e8f8ff;
|
||||
color: #84b6c5;
|
||||
border: 1px solid #afe3fb;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
width: 29%;
|
||||
margin-right: 5%;
|
||||
min-height: 125px;
|
||||
}
|
||||
|
||||
.usage_block.last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
.usage_block h3 {
|
||||
background: #cef0ff;
|
||||
color: #4fa5bf;
|
||||
font-weight: normal;
|
||||
padding: 0 0 0 10px;
|
||||
border-bottom: 1px solid #c6e7f5;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
.usage_block ul {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.usage_block .quantity {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.usage_block li {
|
||||
font-size: 11px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.usage_block .unit{
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0 0 1px;
|
||||
}
|
||||
|
||||
.main_nav {
|
||||
list-style: none;
|
||||
width: 222px;
|
||||
@ -593,72 +549,8 @@ tr.terminated {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
#instance_tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
#instance_tabs li a {
|
||||
background: #f2f2f2;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#instance_tabs li.active a {
|
||||
background: #fff;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
#main_content {
|
||||
min-width: $main-content-min-width;
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid $nav-tabs-border-color;
|
||||
border-top: none;
|
||||
> li {
|
||||
margin-bottom: -1px;
|
||||
margin-top: 0;
|
||||
> a {
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
padding: 5px 14px;
|
||||
&:hover {
|
||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $nav-tabs-border-color $nav-tabs-border-color #fff;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.workflow .modal-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.tab-content {
|
||||
border-left: 0 none;
|
||||
border-right: 0 none;
|
||||
border-bottom: 0 none;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.javascript_disabled_alert {
|
||||
@ -679,65 +571,8 @@ tr.terminated {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.nav-tabs a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-tabs li.error a {
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
.nav-tabs li.error a:after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
.nav-tabs li.required a:after,
|
||||
form .form-group.required > label:after,
|
||||
form .form-field.required > label:after {
|
||||
content: "*";
|
||||
font-weight: bold;
|
||||
line-height: 0;
|
||||
padding-left: 4px;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
/* Region selector in header */
|
||||
|
||||
#region_selector {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
#region_selector a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#region_selector ul{
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
padding-right: 21px;
|
||||
width: 125px;
|
||||
}
|
||||
#region_selector ul:hover a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#region_selector li a {
|
||||
padding: 3px 3px 3px 5px;
|
||||
display: none;
|
||||
background: #e1e1e1;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
#region_selector li:first-child p{
|
||||
background: #ededed url(../img/drop_arrow.png) no-repeat 106px 9px !important;
|
||||
display: block;
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -54,6 +54,7 @@ $icon-swap: (
|
||||
share-square-o: 'share',
|
||||
link: 'link-variant',
|
||||
exchange: 'swap-horizontal',
|
||||
asterisk: 'star',
|
||||
);
|
||||
|
||||
@each $fa-icon, $mdi-icon in $icon-swap {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user