From 37b1bb1cbee970178e5f79043f3e5d1f0bd4781e Mon Sep 17 00:00:00 2001 From: Radomir Dopieralski Date: Tue, 29 Jul 2014 10:08:50 +0200 Subject: [PATCH] Bootstrap 3 and SCSS Since Horizon has moved to SCSS and Bootstrap 3, we have to update our styles to match them. Change-Id: I1f34f35c24ed7b9e73006343a7ae13d87e4f3d8d --- .../flavors/templates/flavors/details.html | 4 +- .../flavors/templates/flavors/index.html | 4 +- tuskar_ui/infrastructure/nodes/forms.py | 18 +- .../templates/nodes/_nodes_formset_field.html | 12 +- .../templates/nodes/_nodes_formset_form.html | 16 +- .../nodes/templates/nodes/_overview.html | 8 +- .../nodes/templates/nodes/details.html | 8 +- .../nodes/templates/nodes/index.html | 4 +- .../templates/overcloud/_detail_overview.html | 26 +- .../overcloud/_undeploy_in_progress.html | 14 +- .../overcloud/templates/overcloud/detail.html | 6 +- .../templates/overcloud/overcloud_role.html | 4 +- .../templates/plans/create_configuration.html | 4 +- .../templates/plans/create_overview.html | 4 +- .../infrastructure/js/tuskar.menu_formset.js | 2 +- .../static/infrastructure/less/bootstrap.less | 36 --- .../infrastructure/less/horizon_upgrades.less | 228 ------------------ .../infrastructure/less/individual_pages.less | 84 ------- .../infrastructure/less/infrastructure.less | 96 -------- .../static/infrastructure/less/tables.less | 69 ------ .../_breadcrumbs.scss} | 0 .../{less/buttons.less => scss/_buttons.scss} | 0 .../capacities.less => scss/_capacities.scss} | 0 .../_flavor_usages.scss} | 0 .../formsets.less => scss/_formsets.scss} | 4 +- .../scss/_individual_pages.scss | 158 ++++++++++++ .../_numberpicker.scss} | 0 .../infrastructure/scss/infrastructure.scss | 16 ++ .../templates/formset_table/menu_formset.html | 13 +- .../templates/horizon/common/_form_field.html | 14 +- .../horizon/common/_horizontal_field.html | 4 +- .../infrastructure/_fullscreen_workflow.html | 4 +- .../templates/infrastructure/base.html | 2 +- .../templates/infrastructure/base_detail.html | 8 +- .../templatetags/form_helpers.py | 38 +++ 35 files changed, 301 insertions(+), 607 deletions(-) delete mode 100644 tuskar_ui/infrastructure/static/infrastructure/less/bootstrap.less delete mode 100644 tuskar_ui/infrastructure/static/infrastructure/less/horizon_upgrades.less delete mode 100644 tuskar_ui/infrastructure/static/infrastructure/less/individual_pages.less delete mode 100644 tuskar_ui/infrastructure/static/infrastructure/less/infrastructure.less delete mode 100644 tuskar_ui/infrastructure/static/infrastructure/less/tables.less rename tuskar_ui/infrastructure/static/infrastructure/{less/breadcrumbs.less => scss/_breadcrumbs.scss} (100%) rename tuskar_ui/infrastructure/static/infrastructure/{less/buttons.less => scss/_buttons.scss} (100%) rename tuskar_ui/infrastructure/static/infrastructure/{less/capacities.less => scss/_capacities.scss} (100%) rename tuskar_ui/infrastructure/static/infrastructure/{less/flavor_usages.less => scss/_flavor_usages.scss} (100%) rename tuskar_ui/infrastructure/static/infrastructure/{less/formsets.less => scss/_formsets.scss} (75%) create mode 100644 tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss rename tuskar_ui/infrastructure/static/infrastructure/{less/numberpicker.less => scss/_numberpicker.scss} (100%) create mode 100644 tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss create mode 100644 tuskar_ui/infrastructure/templatetags/form_helpers.py diff --git a/tuskar_ui/infrastructure/flavors/templates/flavors/details.html b/tuskar_ui/infrastructure/flavors/templates/flavors/details.html index a6331c18e..de418a89f 100644 --- a/tuskar_ui/infrastructure/flavors/templates/flavors/details.html +++ b/tuskar_ui/infrastructure/flavors/templates/flavors/details.html @@ -7,8 +7,8 @@ {% endblock page_header %} {% block main %} -
-
+
+

{% trans "Hardware Info" %}

{% trans "Architecture" %}
diff --git a/tuskar_ui/infrastructure/flavors/templates/flavors/index.html b/tuskar_ui/infrastructure/flavors/templates/flavors/index.html index 663a62371..cd7153c23 100644 --- a/tuskar_ui/infrastructure/flavors/templates/flavors/index.html +++ b/tuskar_ui/infrastructure/flavors/templates/flavors/index.html @@ -8,8 +8,8 @@ {% endblock page_header %} {% block main %} -
-
+
+
{{ tab_group.render }}
diff --git a/tuskar_ui/infrastructure/nodes/forms.py b/tuskar_ui/infrastructure/nodes/forms.py index c54e7f03c..d61df8f7d 100644 --- a/tuskar_ui/infrastructure/nodes/forms.py +++ b/tuskar_ui/infrastructure/nodes/forms.py @@ -42,7 +42,7 @@ class NodeForm(django.forms.Form): choices=DRIVER_CHOICES, required=True, widget=django.forms.Select(attrs={ - 'class': 'input input-medium switchable', + 'class': 'form-control switchable', 'data-slug': 'driver', }), ) @@ -51,7 +51,7 @@ class NodeForm(django.forms.Form): label=_("IPMI Address"), required=False, widget=django.forms.TextInput(attrs={ - 'class': 'switched', + 'class': 'form-control switched', 'data-switch-on': 'driver', 'data-driver-ipmi': 'ipmi', }), @@ -60,7 +60,7 @@ class NodeForm(django.forms.Form): label=_("IPMI User"), required=False, widget=django.forms.TextInput(attrs={ - 'class': 'input input-medium switched', + 'class': 'form-control switched', 'data-switch-on': 'driver', 'data-driver-ipmi': 'ipmi', }), @@ -69,7 +69,7 @@ class NodeForm(django.forms.Form): label=_("IPMI Password"), required=False, widget=django.forms.PasswordInput(render_value=False, attrs={ - 'class': 'input input-medium switched', + 'class': 'form-control switched', 'data-switch-on': 'driver', 'data-driver-ipmi': 'ipmi', }), @@ -77,7 +77,7 @@ class NodeForm(django.forms.Form): mac_addresses = tuskar_ui.forms.MultiMACField( label=_("NIC MAC Addresses"), widget=django.forms.Textarea(attrs={ - 'class': 'input input-medium', + 'class': 'form-control', 'rows': '2', }), ) @@ -87,7 +87,7 @@ class NodeForm(django.forms.Form): required=True, choices=ARCHITECTURE_CHOICES, widget=django.forms.Select( - attrs={'class': 'input input-medium'}), + attrs={'class': 'form-control'}), ) cpus = django.forms.IntegerField( label=_("CPUs"), @@ -95,7 +95,7 @@ class NodeForm(django.forms.Form): min_value=1, initial=1, widget=tuskar_ui.forms.NumberInput( - attrs={'class': 'input input-medium'}), + attrs={'class': 'form-control'}), ) memory_mb = django.forms.IntegerField( label=_("Memory"), @@ -103,7 +103,7 @@ class NodeForm(django.forms.Form): min_value=1, initial=1, widget=tuskar_ui.forms.NumberInput( - attrs={'class': 'input input-medium'}), + attrs={'class': 'form-control'}), ) local_gb = django.forms.IntegerField( label=_("Local Disk"), @@ -111,7 +111,7 @@ class NodeForm(django.forms.Form): min_value=1, initial=1, widget=tuskar_ui.forms.NumberInput( - attrs={'class': 'input input-medium'}), + attrs={'class': 'form-control'}), ) def get_name(self): diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_field.html b/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_field.html index 672036245..01a48f7c4 100644 --- a/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_field.html +++ b/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_field.html @@ -1,10 +1,12 @@ -
- -
{{ field }}
-
{{ extra_text|default:'' }}
+{% load form_helpers %} + +
+ +
{{ field|add_bootstrap_class }}
+
{{ extra_text|default:'' }}
{% if field.errors %} -
+
{% for error in field.errors %} {{ error }} {% endfor %} diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_form.html b/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_form.html index eafce35e6..289f4e671 100644 --- a/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_form.html +++ b/tuskar_ui/infrastructure/nodes/templates/nodes/_nodes_formset_form.html @@ -1,30 +1,30 @@ -
-
+

Node Detail

{% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.node_tags %}
-
+
Power Management
{% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.driver required=True %} {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ipmi_address %} {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ipmi_username %} {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.ipmi_password %}
-
+
Networking
{% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.mac_addresses required=True %}
-
-
+
+
Hardware
-
-
+
{% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.architecture required=True %} {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.cpus extra_text=_('units') required=True %} {% include 'infrastructure/nodes/_nodes_formset_field.html' with field=form.memory_mb extra_text=_('MB') required=True %} diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html b/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html index 2e288a14c..724a0fdce 100644 --- a/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html +++ b/tuskar_ui/infrastructure/nodes/templates/nodes/_overview.html @@ -2,8 +2,8 @@ {% load url from future%} -
-
+
+

{% trans 'Hardware Inventory' %}

@@ -21,7 +21,7 @@
-
+

{% trans 'Free Nodes' %}

@@ -39,7 +39,7 @@
-
+

{% trans 'Power Status' %}

diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/details.html b/tuskar_ui/infrastructure/nodes/templates/nodes/details.html index 280549538..deee69f28 100644 --- a/tuskar_ui/infrastructure/nodes/templates/nodes/details.html +++ b/tuskar_ui/infrastructure/nodes/templates/nodes/details.html @@ -89,7 +89,7 @@ + class="col-xs-2 example"/>
@@ -155,7 +155,7 @@
{% for meter_label, url_part, y_max in meter_conf %} -
+
{% include "infrastructure/_performance_chart.html" with label=meter_label y_max=y_max url=node_perf_url|add:"?"|add:url_part only %}
{% endfor %} diff --git a/tuskar_ui/infrastructure/nodes/templates/nodes/index.html b/tuskar_ui/infrastructure/nodes/templates/nodes/index.html index 734505cb1..16b271f94 100644 --- a/tuskar_ui/infrastructure/nodes/templates/nodes/index.html +++ b/tuskar_ui/infrastructure/nodes/templates/nodes/index.html @@ -8,8 +8,8 @@ {% endblock page_header %} {% block main %} -
-
+
+
{% trans 'Register Nodes' %} diff --git a/tuskar_ui/infrastructure/overcloud/templates/overcloud/_detail_overview.html b/tuskar_ui/infrastructure/overcloud/templates/overcloud/_detail_overview.html index f8b0b1bd8..4aa448d22 100644 --- a/tuskar_ui/infrastructure/overcloud/templates/overcloud/_detail_overview.html +++ b/tuskar_ui/infrastructure/overcloud/templates/overcloud/_detail_overview.html @@ -4,8 +4,8 @@ {% if stack.is_deploying or stack.is_failed %} {% if stack.is_deploying %}
-
-
+
+
Deploying...
@@ -13,15 +13,15 @@
{% else %}
-
-
+
+
Deployment failed
{% endif %} -
+
{% if last_failed_events %} {% trans "Last failed events:" %} {% for event in last_failed_events %} @@ -46,8 +46,8 @@ {% endif %} {% if not dashboard_urls and not stack.is_deploying and not stack.is_failed %} -
-
+
+
{% blocktrans %} Your cloud is now deployed; however, it needs to be initialized. To do so, copy the appropriate script into a file, make it executable, and run it. {% endblocktrans %} @@ -183,8 +183,8 @@ nova flavor-create m1.tiny 1 512 2 1
{% endif %} -
-
+
+

{% trans "Deployment Roles" %}

@@ -228,9 +228,9 @@ nova flavor-create m1.tiny 1 512 2 1
{% if role.capacity %} -
-

{{ role.capacity }}%

-
+
+

{{ role.capacity }}%

+
@@ -243,7 +243,7 @@ nova flavor-create m1.tiny 1 512 2 1
-
+

{% trans "Deployment Role Distribution" %}

diff --git a/tuskar_ui/infrastructure/overcloud/templates/overcloud/_undeploy_in_progress.html b/tuskar_ui/infrastructure/overcloud/templates/overcloud/_undeploy_in_progress.html index a231f4fdd..af98ebb1d 100644 --- a/tuskar_ui/infrastructure/overcloud/templates/overcloud/_undeploy_in_progress.html +++ b/tuskar_ui/infrastructure/overcloud/templates/overcloud/_undeploy_in_progress.html @@ -1,13 +1,13 @@ {% load i18n %} -
-
+
+
{% if stack.is_deleting %}
-
-
+
+
Undeploying...
@@ -15,15 +15,15 @@
{% else %}
-
-
+
+
Undeploying failed
{% endif %} -
+
{% if last_failed_events %} {% trans "Last failed events:" %} {% for event in last_failed_events %} diff --git a/tuskar_ui/infrastructure/overcloud/templates/overcloud/detail.html b/tuskar_ui/infrastructure/overcloud/templates/overcloud/detail.html index dfc780896..086fa7f51 100644 --- a/tuskar_ui/infrastructure/overcloud/templates/overcloud/detail.html +++ b/tuskar_ui/infrastructure/overcloud/templates/overcloud/detail.html @@ -16,9 +16,9 @@ {% endblock page_header %} {% block main %} -
-
-
+
+
+
diff --git a/tuskar_ui/infrastructure/overcloud/templates/overcloud/overcloud_role.html b/tuskar_ui/infrastructure/overcloud/templates/overcloud/overcloud_role.html index 4e449507d..9d5333ee9 100644 --- a/tuskar_ui/infrastructure/overcloud/templates/overcloud/overcloud_role.html +++ b/tuskar_ui/infrastructure/overcloud/templates/overcloud/overcloud_role.html @@ -8,8 +8,8 @@ {% endblock page_header %} {% block main %} -
-
+
+

{% blocktrans count counter=nodes|length %}{{ counter }} instance{% plural %}{{ counter }} instances{% endblocktrans %}

{% trans 'Flavor' %}
diff --git a/tuskar_ui/infrastructure/plans/templates/plans/create_configuration.html b/tuskar_ui/infrastructure/plans/templates/plans/create_configuration.html index bd6ebc4d9..93cbe0a92 100644 --- a/tuskar_ui/infrastructure/plans/templates/plans/create_configuration.html +++ b/tuskar_ui/infrastructure/plans/templates/plans/create_configuration.html @@ -2,8 +2,8 @@

{{ step.get_help_text }}

-
-
+
+
{% include 'horizon/common/_form_fields.html' with form=form %}
diff --git a/tuskar_ui/infrastructure/plans/templates/plans/create_overview.html b/tuskar_ui/infrastructure/plans/templates/plans/create_overview.html index bb8e889b8..cdc9d75d4 100644 --- a/tuskar_ui/infrastructure/plans/templates/plans/create_overview.html +++ b/tuskar_ui/infrastructure/plans/templates/plans/create_overview.html @@ -4,8 +4,8 @@
{{ step.get_help_text }}
-
-
+
+

{% trans "Roles" %}

diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js index ae3071d4c..c1ee014e5 100644 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js +++ b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js @@ -32,7 +32,7 @@ tuskar.menu_formset = (function () { function add_delete_link($nav_item) { var $form = $content.find($nav_item.find('a').attr('href')); - $nav_item.prepend(''); + $nav_item.prepend(''); $nav_item.find('span.delete-icon:first').click(function () { var count; $form.remove(); diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/bootstrap.less b/tuskar_ui/infrastructure/static/infrastructure/less/bootstrap.less deleted file mode 100644 index 4e4acece8..000000000 --- a/tuskar_ui/infrastructure/static/infrastructure/less/bootstrap.less +++ /dev/null @@ -1,36 +0,0 @@ -/* Bootstrap buttons overrides/additions */ - -// Make a button look and behave like a link - available in later -// bootstrap versions -.btn { - &.btn-link, - &.btn-link:active, - &.btn-link[disabled], - &.btn-link:not(.btn-danger) { - background-color: transparent; - background-image: none; - .box-shadow(none); // mixin override does not work - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - &.btn-link { - border-color: transparent; - cursor: pointer; - color: @linkColor; - .border-radius(0); - } - &.btn-link:hover, - &.btn-link:focus, - &.btn-link:hover:not(.btn-danger), - &.btn-link:focus:not(.btn-danger) { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; - } - &.btn-link[disabled]:hover, - &.btn-link[disabled]:focus { - color: @linkColor; - text-decoration: none; - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/horizon_upgrades.less b/tuskar_ui/infrastructure/static/infrastructure/less/horizon_upgrades.less deleted file mode 100644 index 19f9a4485..000000000 --- a/tuskar_ui/infrastructure/static/infrastructure/less/horizon_upgrades.less +++ /dev/null @@ -1,228 +0,0 @@ -// general -h2 { - font-weight: 200; - font-size: 24px; - color: rgb(80, 80, 80); - line-height: 130%; -} - -h3 { - font-weight: lighter; - font-size: 20px; - color: rgb(80,80,80); - margin-bottom: 3px; - margin: 0 0 3px 0; -} - -h4 { - font-weight: lighter; - font-size: 18px; - color: rgb(120,120,120); - margin-bottom: 3px; -} - -h5 { - font-weight: lighter; - font-size: 16px; - color: rgb(120,120,120); - margin-bottom: 3px; -} - -// topbar -.topbar { - background: rgb(239, 239, 239); - padding: 0.5em 2em; - font-size: 90%; - height: 24px; - border-bottom: 1px solid rgb(220, 220, 220); -} - -h1.brand a { - height: 24px; - width: 107px; - margin: 0 1em 0 0; - background-size: auto 24px; -} - -.topbar .switcher_bar h3 { - line-height: 18px; - font-size: 11px !important; -} - -#tenant_switcher { - display: none; -} - -#user_info { - margin: 0; - padding: 0; - line-height: 24px; - font-size: 11px !important; - - & > a { - font-size: 11px !important; - } -} - -// sidebar -.sidebar { - margin: 2.5em 2em; - border: 0 none; - background: none; -} - -.nav_accordion { - background: none; - - // dashboards - dt { - font-size: 90%; - color: rgb(170, 170, 170); - background-color: transparent; - border: 0 none; - border-bottom: 3px solid rgb(230, 230, 230); - padding: 0.2em 2em 0.2em 0; - - &:not(:first-child) { - margin-top: 1em; - } - - &.active { - color: rgb(120, 120, 120); - border-bottom: 3px solid rgb(130, 130, 130); - } - - div { - font-size: inherit; - color: inherit; - font-weight: normal; - margin: 0; - } - } - - // panel groups - dd { - margin: 0; - - h4 { - margin: 0; - border: 1px solid rgb(210, 210, 210); - background-color: rgb(240, 240, 240); - color: rgb(140, 140, 140); - max-width: none; - - div { - margin: 0 0 0 14px; - } - - &.active { - border: 1px solid rgb(210, 210, 210); - background-color: rgb(230, 230, 230); - color: rgb(90, 90, 90); - } - } - - // items - ul { - width: auto; - margin: 0 0 0 14px; - - li a { - width: auto; - margin: 0; - border-bottom: 1px solid rgb(190, 190, 190); - border-left: 5px solid rgb(230, 230, 230); - color: rgb(90, 90, 90); - opacity: 0.8; - - &:last-child { - margin: 0; - } - - &.active { - color: rgb(215, 65, 50); - border-top: 0 none; - border-left: 5px solid rgb(215, 65, 50); - background-color: rgb(245, 245, 245); - margin: 0; - border-radius: 0; - opacity: 1; - } - - &:hover { - background-color: rgb(245, 245, 245); - opacity: 1; - } - } - } - } -} - -// content body -#content_body { - padding-left: 300px; - padding-right: 35px; - padding-top: 2em; - padding-bottom: 3.5em; -} - -.page-header { - margin-bottom: 0; - padding: 0; -} - -// content nav -#main_content { - .nav-tabs { - margin: 0 0 30px; - border: 0 none; - - li a { - font-weight: 500; - position: relative; - top: -1px; - padding: 10px 15px; - border-radius: 0 0 4px 4px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border-top-width: 0; - border-color: transparent; - color: #43A1D6; - } - - li.active a { - border: 1px solid rgb(220, 220, 220); - background: #43A1D6; - color: white; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - - &:after { - color: inherit; - } - } - - li:not(.active) a:hover { - border: 1px solid rgb(240, 240, 240); - border-top-width: 0; - background: rgb(244, 244, 244); - } - } - - .tab-content { - padding: 0; - border: 0 none; - } - - // content area - #content_body > .row-fluid { - margin: 0; - } - - .widget:not(:last-child) { - margin: 0 0 2em 0; - } -} - -// general -a[data-target] { - cursor: pointer; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/individual_pages.less b/tuskar_ui/infrastructure/static/infrastructure/less/individual_pages.less deleted file mode 100644 index d91d7784a..000000000 --- a/tuskar_ui/infrastructure/static/infrastructure/less/individual_pages.less +++ /dev/null @@ -1,84 +0,0 @@ -#nodes-formset-datatable .datatable tbody { - input { - padding: 2px 1px; - } - input.number_input_slim { - width: 3em; - } - td { - padding: 2px; - text-align: center; - a.close { - margin-right: 4px; - } - } -} - -// Register nodes formset -.register-nodes-formset { - a.add-node-link { - display: block; - } - - .nav-tabs > .active > a { - color: @white; - background-color: @linkColor; - } - - ul.nav-tabs > li span.delete-icon { - display: none; - } - - ul.nav-tabs > li.active span.delete-icon { - display: block; - margin: 4px 19px 4px 0; - cursor: pointer; - } - - ul.nav-tabs > li { - position: relative; - } - - ul.nav-tabs > li.active { - width: 107%; - } - - ul.nav-tabs > li.active:after { - display: block; - content: ''; - position: absolute; - top: 1px; - right: -7px; - border-top: 16px solid transparent; - border-bottom: 16px solid transparent; - border-left: 8px solid @linkColor; - } - - .register-nav-head { - margin-top: 19px; - margin-bottom: 5px; - } - - .form h5 { - margin: 0.5em 0 0.75em 0; - } - - .form label.checkbox { - font-weight: normal; - } - - fieldset .form-field { - input, textarea, select { - width: 150px; - margin-left: 5px; - } - } -} - - -#detail__overview { - ul { - list-style: disc; - margin: 0 0 9px 25px; - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/infrastructure.less b/tuskar_ui/infrastructure/static/infrastructure/less/infrastructure.less deleted file mode 100644 index a781c0515..000000000 --- a/tuskar_ui/infrastructure/static/infrastructure/less/infrastructure.less +++ /dev/null @@ -1,96 +0,0 @@ -/* Additional CSS for infrastructure. */ -@import "../../bootstrap/less/variables.less"; -@import "numberpicker.less"; -@import "bootstrap.less"; -@import "breadcrumbs.less"; -@import "buttons.less"; -@import "capacities.less"; -@import "flavor_usages.less"; -@import "formsets.less"; -@import "index_pages.less"; -@import "individual_pages.less"; -@import "tables.less"; -@import "horizon_upgrades.less"; - -// disable text select on element -.unselectable { - user-select: none; - -o-user-select:none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; -} - -.actions { - // not nice, but actions should be placed above the line - // will fix the style for now, better solution needed - margin: -33px 0 0 0; -} - -// hide the project switcher from the top bar -#tenant_switcher { - visibility: hidden; -} - -// Node detail view - -.node-details { - .powerstate { - background-image: url(../images/power.png); - background-repeat: no-repeat; - height: 20px; - padding: 4px 30px; - } - - .node-detail { - width: 50%; - } - - .node-deployment { - float: right; - width: 50%; - } - - .dropdown-menu li { - margin: 5px 10px; - } - - .node h4 { - margin-top: 8px; - margin-bottom: 5px; - } - - #node-charts { - margin-left: -20px; - } - - .chart svg { - height: 120px; - width: 144px; - - path.undefined { - stroke-width: 1px; - stroke: #ff7f0e; - } - - .y_ticks text { - display: none; - } - } -} - -// Node overview - -.nodes { - .widget-info { - span { - font-size: 200%; - } - } - - .d3_pie_chart_distribution { - .legend { - position: fixed; - } - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/tables.less b/tuskar_ui/infrastructure/static/infrastructure/less/tables.less deleted file mode 100644 index 01b674b2e..000000000 --- a/tuskar_ui/infrastructure/static/infrastructure/less/tables.less +++ /dev/null @@ -1,69 +0,0 @@ -// tables -table.table { - th.table_header { - padding: 10px 0; - background: none; - } - - th { - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - } - - tfoot { - color: rgb(180,180,180); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - - tr td { - padding: 7px 12px; - height: auto; - } - } - - .table_actions { - width: 100%; - text-align: right; - } - - .table_title { - display: none; - } - - .table_search { - float: left; - } - - tr td { - padding: 0px 10px; - line-height: 1; - height: 53px; - vertical-align: middle; - - &.anchor { - padding: 0; - - a { - padding: 4px 10px; - } - } - } - - .table_search input { - padding-left: 10px; - } - - .table-bordered tr.table_caption + tr th:first-child { - border-top-left-radius: 2px; - } - - .table-bordered tr.table_caption + tr th:last-child { - border-top-right-radius: 2px; - } - - .table-bordered tfoot tr td:first-child { - border-bottom-left-radius: 2px; - } - - .table-bordered tfoot tr td:last-child { - border-bottom-right-radius: 2px; - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/breadcrumbs.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_breadcrumbs.scss similarity index 100% rename from tuskar_ui/infrastructure/static/infrastructure/less/breadcrumbs.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_breadcrumbs.scss diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/buttons.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss similarity index 100% rename from tuskar_ui/infrastructure/static/infrastructure/less/buttons.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/capacities.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_capacities.scss similarity index 100% rename from tuskar_ui/infrastructure/static/infrastructure/less/capacities.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_capacities.scss diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/flavor_usages.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_flavor_usages.scss similarity index 100% rename from tuskar_ui/infrastructure/static/infrastructure/less/flavor_usages.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_flavor_usages.scss diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/formsets.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss similarity index 75% rename from tuskar_ui/infrastructure/static/infrastructure/less/formsets.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss index ef40e1e25..e692cbb16 100644 --- a/tuskar_ui/infrastructure/static/infrastructure/less/formsets.less +++ b/tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss @@ -15,11 +15,11 @@ } th span.required:after { - // Copied from horizon.less, because there is no way to reuse their class. + // Copied from horizon, because there is no way to reuse their class. content: "*"; font-weight: bold; line-height: 0; padding-left: 4px; - color: #3290c0; + color: #428bca; } } diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss new file mode 100644 index 000000000..ae44856b5 --- /dev/null +++ b/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss @@ -0,0 +1,158 @@ +#nodes-formset-datatable .datatable tbody { + input { + padding: 2px 1px; + } + input.number_input_slim { + width: 3em; + } + td { + padding: 2px; + text-align: center; + a.close { + margin-right: 4px; + } + } +} + +$link-color: #428bca; + +// Register nodes formset +.register-nodes-formset { + a.add-node-link { + display: block; + float: right; + } + + .nav-pills > .active > a { + color: #fff; + background-color: $link-color; + } + + ul.nav-pills > li span.delete-icon { + display: none; + } + + ul.nav-pills > li.active span.delete-icon { + display: block; + cursor: default; + color: #fff; + z-index: 1000; + position: absolute; + right: 16px; + top: 10px; + } + + ul.nav-pills > li { + position: relative; + } + + ul.nav-pills > li.active { + width: 107%; + } + + ul.nav-pills > li.active:after { + display: block; + content: ''; + position: absolute; + top: 1px; + right: -7px; + border-top: 18px solid transparent; + border-bottom: 18px solid transparent; + border-left: 8px solid $link-color; + } + + .register-nav-head { + margin-top: 19px; + margin-bottom: 5px; + + h4 { + margin: 0; + } + } + + .form h5 { + margin: 0.5em 0 0.75em 0; + } + + .form label.checkbox { + font-weight: normal; + } + + fieldset .form-field { + input, textarea, select { + width: 150px; + margin-left: 5px; + } + } +} + + +#detail__overview { + ul { + list-style: disc; + margin: 0 0 9px 25px; + } +} + +// Node detail view + +.node-details { + .powerstate { + background-image: url(../images/power.png); + background-repeat: no-repeat; + height: 20px; + padding: 4px 30px; + } + + .node-detail { + width: 50%; + } + + .node-deployment { + float: right; + width: 50%; + } + + .dropdown-menu li { + margin: 5px 10px; + } + + .node h4 { + margin-top: 8px; + margin-bottom: 5px; + } + + #node-charts { + margin-left: -20px; + } + + .chart svg { + height: 120px; + width: 144px; + + path.undefined { + stroke-width: 1px; + stroke: #ff7f0e; + } + + .y_ticks text { + display: none; + } + } +} + +// Node overview + +.nodes { + .widget-info { + span { + font-size: 200%; + } + } + + .d3_pie_chart_distribution { + .legend { + position: fixed; + } + } +} diff --git a/tuskar_ui/infrastructure/static/infrastructure/less/numberpicker.less b/tuskar_ui/infrastructure/static/infrastructure/scss/_numberpicker.scss similarity index 100% rename from tuskar_ui/infrastructure/static/infrastructure/less/numberpicker.less rename to tuskar_ui/infrastructure/static/infrastructure/scss/_numberpicker.scss diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss new file mode 100644 index 000000000..45c6165c9 --- /dev/null +++ b/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss @@ -0,0 +1,16 @@ +/* Additional CSS for infrastructure. */ +@import "/horizon/scss/_variables"; + +@import "_numberpicker"; +@import "_breadcrumbs"; +@import "_buttons"; +@import "_capacities"; +@import "_flavor_usages"; +@import "_formsets"; +@import "_index_pages"; +@import "_individual_pages"; + +// hide the project switcher from the top bar +#tenant_switcher { + visibility: hidden; +} diff --git a/tuskar_ui/infrastructure/templates/formset_table/menu_formset.html b/tuskar_ui/infrastructure/templates/formset_table/menu_formset.html index 325ae6aac..915bb5f25 100644 --- a/tuskar_ui/infrastructure/templates/formset_table/menu_formset.html +++ b/tuskar_ui/infrastructure/templates/formset_table/menu_formset.html @@ -3,14 +3,15 @@ {% for error in formset.non_form_errors %}
{{ error }}
{% endfor %} -
-
+
+
- {% trans "Add Node" %} + + {% trans "Add Node" %} +

Nodes to register

-
-
+
{% for form in formset %} {% include form_template with form=form active=forloop.first %} diff --git a/tuskar_ui/infrastructure/templates/horizon/common/_form_field.html b/tuskar_ui/infrastructure/templates/horizon/common/_form_field.html index 10988806b..d372d9eda 100644 --- a/tuskar_ui/infrastructure/templates/horizon/common/_form_field.html +++ b/tuskar_ui/infrastructure/templates/horizon/common/_form_field.html @@ -1,12 +1,2 @@ -
- {{ field.label_tag }} - {% if field.errors %} - {% for error in field.errors %} - {{ error }} - {% endfor %} - {% endif %} - {{ field.help_text }} -
- {{ field }} -
-
+{% load bootstrap_form_field %} +{{ field|bootstrap_form_field }} diff --git a/tuskar_ui/infrastructure/templates/horizon/common/_horizontal_field.html b/tuskar_ui/infrastructure/templates/horizon/common/_horizontal_field.html index 9bf19bdb7..f8f1ce86c 100644 --- a/tuskar_ui/infrastructure/templates/horizon/common/_horizontal_field.html +++ b/tuskar_ui/infrastructure/templates/horizon/common/_horizontal_field.html @@ -1,7 +1,9 @@ +{% load form_helpers %} +
- {{ field }} + {{ field|add_bootstrap_class }} {% for error in field.errors %} {{ error }} {% empty %} diff --git a/tuskar_ui/infrastructure/templates/infrastructure/_fullscreen_workflow.html b/tuskar_ui/infrastructure/templates/infrastructure/_fullscreen_workflow.html index 9ac2025f1..f7870a1b8 100644 --- a/tuskar_ui/infrastructure/templates/infrastructure/_fullscreen_workflow.html +++ b/tuskar_ui/infrastructure/templates/infrastructure/_fullscreen_workflow.html @@ -1,7 +1,7 @@ {% load i18n %} {% with workflow.get_entry_point as entry_point %} -
-
+
+ {% csrf_token %} {% if REDIRECT_URL %}{% endif %}
diff --git a/tuskar_ui/infrastructure/templates/infrastructure/base.html b/tuskar_ui/infrastructure/templates/infrastructure/base.html index bf46451fe..38edc0412 100644 --- a/tuskar_ui/infrastructure/templates/infrastructure/base.html +++ b/tuskar_ui/infrastructure/templates/infrastructure/base.html @@ -5,7 +5,7 @@ {% load compress %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/tuskar_ui/infrastructure/templates/infrastructure/base_detail.html b/tuskar_ui/infrastructure/templates/infrastructure/base_detail.html index f7274ea72..591c5362e 100644 --- a/tuskar_ui/infrastructure/templates/infrastructure/base_detail.html +++ b/tuskar_ui/infrastructure/templates/infrastructure/base_detail.html @@ -2,8 +2,8 @@ {% block main %} -
-
+
+
{% block breadcrumbs %}{% endblock %}
@@ -14,8 +14,8 @@
-
-
+
+
{% block overall_usage %}{% endblock %}
diff --git a/tuskar_ui/infrastructure/templatetags/form_helpers.py b/tuskar_ui/infrastructure/templatetags/form_helpers.py new file mode 100644 index 000000000..4dbfff0ac --- /dev/null +++ b/tuskar_ui/infrastructure/templatetags/form_helpers.py @@ -0,0 +1,38 @@ +# -*- coding: utf8 -*- +# +# Licensed under the Apache License, Version 2.0 (the "License"); you may +# not use this file except in compliance with the License. You may obtain +# a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +# License for the specific language governing permissions and limitations +# under the License. + +import django.forms +import django.template + + +register = django.template.Library() + + +@register.filter +def add_bootstrap_class(field): + """Add a "form-control" CSS class to the field's widget. + + This is so that Bootstrap styles it properly. + """ + if not isinstance(field, ( + django.forms.CheckboxInput, + django.forms.CheckboxSelectMultiple, + django.forms.RadioSelect, + django.forms.FileInput, + str, + )): + field_classes = set(field.field.widget.attrs.get('class', '').split()) + field_classes.add('form-control') + field.field.widget.attrs['class'] = ' '.join(field_classes) + return field