From 4e9b5c2daadcaecd48554e3298983961e648e26e Mon Sep 17 00:00:00 2001
From: Jiri Tomasek <jtomasek@redhat.com>
Date: Wed, 19 Nov 2014 17:38:24 +0100
Subject: [PATCH] Modal fixes - 2 columns, padding, header, membership

Adds padding to tab-content which takes care of proper
spacing between tabs and tab-content.
refactors tabs styling - match modal and non-modal tabs
Changes modal header h3 margin to save space.
Cleans up Membership widget styling
Unifies 2 column layout in modals using bootstrap columns
Changes create and update image modal template as an example.
The rest of the views is changed in subsequent patch

Closes-Bug: #1354505
Change-Id: Idca2a2dbdea8cdacc37061faa52004b1020b1bf0
---
 horizon/templates/horizon/_nav_list.html      |   2 +-
 .../horizon/client_side/_membership.html      |   8 +-
 .../templates/horizon/client_side/_modal.html |   2 +-
 horizon/templates/horizon/common/_modal.html  |   4 +-
 .../templates/horizon/common/_modal_form.html |  14 +-
 .../templates/horizon/common/_workflow.html   |   4 +-
 .../horizon/common/_workflow_step.html        |  20 +--
 .../common/_workflow_step_update_members.html |  49 ++---
 horizon/test/tests/templatetags.py            |   2 +-
 .../templates/images/images/_create.html      |  41 ++---
 .../templates/images/images/_update.html      |  13 +-
 .../static/dashboard/scss/horizon.scss        | 169 +++++++-----------
 .../dashboard/scss/horizon_workflow.scss      |  22 +--
 13 files changed, 145 insertions(+), 205 deletions(-)

diff --git a/horizon/templates/horizon/_nav_list.html b/horizon/templates/horizon/_nav_list.html
index f300be27a9..25e195130f 100644
--- a/horizon/templates/horizon/_nav_list.html
+++ b/horizon/templates/horizon/_nav_list.html
@@ -1,7 +1,7 @@
 {% load horizon i18n %}
 
 <div class='clearfix'>
-  <ul class="nav nav-tabs">
+  <ul class="nav nav-tabs" role="tablist">
     {% for component in components %}
       {% if user|has_permissions:component %}
         <li{% if current.slug == component.slug %} class="active"{% endif %}>
diff --git a/horizon/templates/horizon/client_side/_membership.html b/horizon/templates/horizon/client_side/_membership.html
index 81b1b485a2..6bf95e7b4b 100644
--- a/horizon/templates/horizon/client_side/_membership.html
+++ b/horizon/templates/horizon/client_side/_membership.html
@@ -4,19 +4,19 @@
 {% block id %}membership_template{% endblock %}
 
 {% block template %}{% spaceless %}{% jstemplate %}
-<ul class="nav nav-pills btn-group">
+<ul class="nav nav-pills btn-group btn-group-sm">
   <li class="member" data-[[step_slug]]-id="[[data_id]]">
     <span class="display_name">[[display_name]]</span>
   </li>
   <li class="active"><a class="btn btn-primary" href="#add_remove">[[text]]</a></li>
   <li class="dropdown role_options">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+    <a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#">
       <span class="roles_display">[[roles_label]]</span>
-      <b class="caret"></b>
+      <span class="caret"></span>
     </a>
     <ul class="dropdown-menu role_dropdown clearfix">
       [[#roles]]
-      <li data-role-id="[[role_id]]"><i class="icon-ok"></i>  [[role_name]]</li>
+      <li data-role-id="[[role_id]]"><i class="fa fa-check"></i>  [[role_name]]</li>
       [[/roles]]
     </ul>
   </li>
diff --git a/horizon/templates/horizon/client_side/_modal.html b/horizon/templates/horizon/client_side/_modal.html
index cc08451748..ca57da1663 100644
--- a/horizon/templates/horizon/client_side/_modal.html
+++ b/horizon/templates/horizon/client_side/_modal.html
@@ -9,7 +9,7 @@
     <div class="modal-content">
       <div class='modal-header'>
         <a class='close' data-dismiss='modal'>&times;</a>
-        <h3>[[title]]</h3>
+        <h3 class="modal-title">[[title]]</h3>
       </div>
       <div class='modal-body'>
         [[body]]
diff --git a/horizon/templates/horizon/common/_modal.html b/horizon/templates/horizon/common/_modal.html
index 2435921a03..9484a61321 100644
--- a/horizon/templates/horizon/common/_modal.html
+++ b/horizon/templates/horizon/common/_modal.html
@@ -5,7 +5,7 @@
     {% block header %}
       <div class="modal-header">
         {% if hide %}<a href="#" class="close" data-dismiss="modal">&times;</a>{% endif %}
-        <h3>{% block modal-header %}{{ modal_header }}{% endblock %}</h3>
+        <h3 class="modal-title">{% block modal-header %}{{ modal_header }}{% endblock %}</h3>
       </div>
     {% endblock %}
     {% block content %}
@@ -18,4 +18,4 @@
   </div>
 </div>
 {% block modal-js %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/horizon/templates/horizon/common/_modal_form.html b/horizon/templates/horizon/common/_modal_form.html
index 306ad87343..65e7ee9942 100644
--- a/horizon/templates/horizon/common/_modal_form.html
+++ b/horizon/templates/horizon/common/_modal_form.html
@@ -26,13 +26,15 @@
       </div>
       {% endif %}
       {% block modal-body %}
-        <div class="left">
-          <fieldset>
+        <div class="row">
+          <div class="col-sm-6">
+            <fieldset>
             {% include "horizon/common/_form_fields.html" %}
-          </fieldset>
-        </div>
-        <div class="right">
-          {% block modal-body-right %}{% endblock %}
+            </fieldset>
+          </div>
+          <div class="col-sm-6">
+            {% block modal-body-right %}{% endblock %}
+          </div>
         </div>
       {% endblock %}
     </div>
diff --git a/horizon/templates/horizon/common/_workflow.html b/horizon/templates/horizon/common/_workflow.html
index b64b7e2d43..16a17244d3 100644
--- a/horizon/templates/horizon/common/_workflow.html
+++ b/horizon/templates/horizon/common/_workflow.html
@@ -8,12 +8,12 @@
         <div class="modal-header">
         {% block modal-header %}
           {% if modal %}<a href="#" class="close" data-dismiss="modal">&times;</a>{% endif %}
-          <h3>{{ workflow.name }}</h3>
+          <h3 class="modal-title">{{ workflow.name }}</h3>
         {% endblock %}
         </div>
         <div class="modal-body clearfix">
         {% block modal-body %}
-        <ul class="nav nav-tabs{% if workflow.wizard %} wizard-tabs{% endif %}">
+        <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>
diff --git a/horizon/templates/horizon/common/_workflow_step.html b/horizon/templates/horizon/common/_workflow_step.html
index 17b6deff41..8abaeed660 100644
--- a/horizon/templates/horizon/common/_workflow_step.html
+++ b/horizon/templates/horizon/common/_workflow_step.html
@@ -1,13 +1,9 @@
 <noscript><h3>{{ step }}</h3></noscript>
-<table class="table-fixed">
-  <tbody>
-    <tr>
-      <td class="actions">
-          {% include "horizon/common/_form_fields.html" %}
-      </td>
-      <td class="help_text">
-          {{ step.get_help_text }}
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="row">
+  <div class="col-sm-6">
+    {% include "horizon/common/_form_fields.html" %}
+  </div>
+  <div class="col-sm-6">
+    {{ step.get_help_text }}
+  </div>
+</div>
diff --git a/horizon/templates/horizon/common/_workflow_step_update_members.html b/horizon/templates/horizon/common/_workflow_step_update_members.html
index 1cb99b6090..0507419599 100644
--- a/horizon/templates/horizon/common/_workflow_step_update_members.html
+++ b/horizon/templates/horizon/common/_workflow_step_update_members.html
@@ -5,37 +5,42 @@
 <div class="membership {{ step.slug }}_membership dropdown_fix" data-show-roles="{{ step.show_roles }}">
   <div class="header">
     <div class="help_text">{{ step.help_text }}</div>
-    <div class="left">
-      <div class="fake_table fake_table_header fake_{{ step.slug }}_table">
-        <span class="members_title">{{ step.available_list_title }}</span>
-        <div class="form-group has-feedback">
-          <input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
-          <span class="fa fa-search search-icon form-control-feedback"></span>
+
+    <div class="row">
+      <div class="col-xs-6">
+        <div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
+          <span class="members_title">{{ step.available_list_title }}</span>
+          <div class="form-group has-feedback">
+            <input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
+            <span class="fa fa-search search-icon form-control-feedback"></span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="right">
-      <div class="fake_table fake_table_header fake_{{ step.slug }}_table">
-        <span class="members_title">{{ step.members_list_title }}</span>
-        <div class="form-group has-feedback">
-          <input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
-          <span class="fa fa-search search-icon form-control-feedback"></span>
+      <div class="col-xs-6">
+        <div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
+          <span class="members_title">{{ step.members_list_title }}</span>
+          <div class="form-group has-feedback">
+            <input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
+            <span class="fa fa-search search-icon form-control-feedback"></span>
+          </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="left filterable {{ step.slug }}_filterable">
-    <div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
-      <ul class="available_members available_{{ step.slug }}"></ul>
-      <ul class="no_results" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
+  <div class="row">
+    <div class="col-xs-6 filterable {{ step.slug }}_filterable">
+      <div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
+        <ul class="available_members available_{{ step.slug }}"></ul>
+        <ul class="no_results" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
+      </div>
     </div>
-  </div>
 
-  <div class="right filterable {{ step.slug }}_filterable">
-    <div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
-      <ul class="members {{ step.slug }}_members"></ul>
-      <ul class="no_results" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
+    <div class="col-xs-6 filterable {{ step.slug }}_filterable">
+      <div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
+        <ul class="members {{ step.slug }}_members"></ul>
+        <ul class="no_results" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
+      </div>
     </div>
   </div>
 </div>
diff --git a/horizon/test/tests/templatetags.py b/horizon/test/tests/templatetags.py
index 2c8e6b26cb..580eaa1ee4 100644
--- a/horizon/test/tests/templatetags.py
+++ b/horizon/test/tests/templatetags.py
@@ -115,7 +115,7 @@ class TemplateTagTests(test.TestCase):
         text = "{% horizon_main_nav %}"
         expected = """
                 <div class='clearfix'>
-                    <ul class=\"nav nav-tabs\">
+                    <ul class=\"nav nav-tabs\" role=\"tablist\">
                         <li>
                             <a href=\"/cats/\" tabindex='1'>Cats</a>
                         </li>
diff --git a/openstack_dashboard/dashboards/project/images/templates/images/images/_create.html b/openstack_dashboard/dashboards/project/images/templates/images/images/_create.html
index e38653b8b1..6c665419de 100644
--- a/openstack_dashboard/dashboards/project/images/templates/images/images/_create.html
+++ b/openstack_dashboard/dashboards/project/images/templates/images/images/_create.html
@@ -9,30 +9,23 @@
 
 {% block modal-header %}{% trans "Create An Image" %}{% endblock %}
 
-{% block modal-body %}
-<div class="left">
-    <fieldset>
-    {% include "horizon/common/_form_fields.html" %}
-    </fieldset>
-</div>
-<div class="right">
-    <h3>{% trans "Description:" %}</h3>
-    <p>
-       {% if HORIZON_IMAGES_ALLOW_UPLOAD %}
-            {% trans "Images can be provided via an HTTP URL or be uploaded from your local file system. Compressed image binaries are supported (.zip and .tar.gz.)" %}
-       {% else %}
-            {% trans "Currently only images available via an HTTP URL are supported. The image location must be accessible to the Image Service. Compressed image binaries are supported (.zip and .tar.gz.)" %}
-       {% endif %}
-    </p>
-    <p>
-       <strong>{% trans "Please note: " %}</strong>
-       {% if HORIZON_IMAGES_ALLOW_UPLOAD %}
-           {% trans "If you select an image via an HTTP URL, the Image Location field MUST be a valid and direct URL to the image binary; it must also be accessible to the Image Service. URLs that redirect or serve error pages will result in unusable images." %}
-       {% else %}
-           {% trans "The Image Location field MUST be a valid and direct URL to the image binary. URLs that redirect or serve error pages will result in unusable images." %}
-       {% endif %}
-    </p>
-</div>
+{% block modal-body-right %}
+  <h3>{% trans "Description:" %}</h3>
+  <p>
+     {% if HORIZON_IMAGES_ALLOW_UPLOAD %}
+          {% trans "Images can be provided via an HTTP URL or be uploaded from your local file system. Compressed image binaries are supported (.zip and .tar.gz.)" %}
+     {% else %}
+          {% trans "Currently only images available via an HTTP URL are supported. The image location must be accessible to the Image Service. Compressed image binaries are supported (.zip and .tar.gz.)" %}
+     {% endif %}
+  </p>
+  <p>
+     <strong>{% trans "Please note: " %}</strong>
+     {% if HORIZON_IMAGES_ALLOW_UPLOAD %}
+         {% trans "If you select an image via an HTTP URL, the Image Location field MUST be a valid and direct URL to the image binary; it must also be accessible to the Image Service. URLs that redirect or serve error pages will result in unusable images." %}
+     {% else %}
+         {% trans "The Image Location field MUST be a valid and direct URL to the image binary. URLs that redirect or serve error pages will result in unusable images." %}
+     {% endif %}
+  </p>
 {% endblock %}
 
 {% block modal-footer %}
diff --git a/openstack_dashboard/dashboards/project/images/templates/images/images/_update.html b/openstack_dashboard/dashboards/project/images/templates/images/images/_update.html
index 72fbd4ad8f..788ff56c7d 100644
--- a/openstack_dashboard/dashboards/project/images/templates/images/images/_update.html
+++ b/openstack_dashboard/dashboards/project/images/templates/images/images/_update.html
@@ -7,16 +7,9 @@
 
 {% block modal-header %}{% trans "Update Image" %}{% endblock %}
 
-{% block modal-body %}
-<div class="left">
-    <fieldset>
-    {% include "horizon/common/_form_fields.html" %}
-    </fieldset>
-</div>
-<div class="right">
-    <h3>{% trans "Description:" %}</h3>
-    <p>{% trans "Edit the image details." %}</p>
-</div>
+{% block modal-body-right %}
+  <h3>{% trans "Description:" %}</h3>
+  <p>{% trans "Edit the image details." %}</p>
 {% endblock %}
 
 {% block modal-footer %}
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index e54408666d..f487524ae1 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -747,25 +747,16 @@ form label {
 }
 
 .static_page {
-  float: left;
+  float: left; //should be removed (jtomasek)
+  background-color: $body-bg; //should be removed (jtomasek)
   > form {
     margin-bottom: 0;
   }
 }
 
-.left {
-    float: left;
-    width: 342px;
-    margin-right: 15px;
-}
-
-.left form {
-  margin: 0;
-}
-
-.right {
-  float: left;
-  width: 342px;
+// should be removed and replaced by row + col-sm-6 in template
+.left, .right {
+  @extend .col-sm-6;
 }
 
 .clear {
@@ -1071,6 +1062,7 @@ tr.terminated {
   border-left: 0 none;
   border-right: 0 none;
   border-bottom: 0 none;
+  padding-top: 10px;
 }
 
 #content_body {
@@ -1249,10 +1241,6 @@ div .flavor_table {
   width: 160px;
 }
 
-#main_content .row:last-child {
-  margin-bottom: 0;
-}
-
 .version_label {
   position: relative;
   text-align: right;
@@ -1425,97 +1413,80 @@ label.log-length {
 .membership {
   min-height: 200px;
 
-    /* Buttons */
-  .btn-group {
-    margin-left:0px;
-    padding: 3px 10px;
-    margin-bottom: 0px;
-    border: 1px solid $gray-light;
-    border-bottom: none;
-  }
-  .btn-group .active {
-    float: right;
-  }
-  a.btn-primary:hover {
-    background-color: $link-hover-color;
-  }
-
   /* Header */
   .help_text {
-    margin-left: 5px;
     margin-bottom: 15px;
-    width: 650px;
-  }
-  .members_title {
-    color: $gray;
-    font-weight: bold;
-    float: left;
-    line-height: 30px;
-    width: 160px;
-  }
-  input[type="text"]:disabled + span.search-icon {
-    color: $gray-light;
   }
+
   .fake_table_header {
-    background-color: $body-bg;
-    padding: 10px;
+    padding: 8px;
     border: 1px solid $table-border-color;
     border-bottom: none;
     overflow: hidden;
   }
 
-    /* 'Fake table' body */
-  .fake_table {
-    > ul {
-      padding: 0;
-      &.no_results {
-        border: 1px solid $table-border-color;
-        padding: 10px;
+  .members_title {
+    color: $gray;
+    font-weight: bold;
+    float: left;
+    padding: 6px 0;
+  }
+
+  input.filter {
+    width: 120px;
+    float: right;
+    &[type="text"]:disabled {
+      background-color: $gray-lighter;
+      & + span.search-icon {
+        color: $gray-light;
       }
     }
-    ul.btn-group:hover {
-        background-color: $border-color;
-    }
+  }
+
+  .form-control-feedback { top: 0; }
+  .no_results {
+    border: 1px solid $table-border-color;
+    padding: 9px 10px 8px 10px;
+    opacity: 0.5;
   }
 
   /* Member lists */
-  .update_members_filterable {
-    overflow-y: auto;
-    height: 500px;
-  }
-  .member {
-    text-align: left;
-    line-height: 32px;
-  }
-
-  .members ul.btn-group,
-  .available_members ul.btn-group {
-    display: block;
-    &.nav-pills > li > a {
-      padding: 6px 11px;
+  .members, .available_members {
+    padding: 0;
+    // reset nav-pills display to block
+    ul.nav-pills {
+      display: block;
+    }
+    ul.btn-group {
+      margin-left:0px;
+      padding: 3px;
+      margin-bottom: 0px;
+      border: 1px solid $gray-light;
+      border-bottom: none;
+      &.last_stripe {
+        border-bottom: 1px solid $table-border-color;
+      }
+      &.light_stripe {
+        background-color: white;
+      }
+      &.dark_stripe {
+        background-color: $table-bg-odd;
+      }
+      &:hover {
+        background-color: $border-color;
+      }
+      li.member {
+        padding: 6px 10px 5px 10px;
+      }
+      li.active {
+        float: right;
+        a:hover {
+          background-color: $link-hover-color;
+        }
+      }
     }
   }
-  .dark_stripe {
-    background-color: $table-bg-odd;
-  }
-  .light_stripe {
-    background-color: white;
-  }
-  .last_stripe {
-    border-bottom: 1px solid $table-border-color;
-  }
-  .has-feedback {
-    display: inline-block;
-    float: right;
-    margin-bottom: 0;
-  }
-  /* List filtering */
-  .filter {
-    width: 130px;
-  }
-  .form-control-feedback {
-    top:0;
-  }
+
   /* Role dropdown menus */
   .role_dropdown li {
     cursor: pointer;
@@ -1529,19 +1500,12 @@ label.log-length {
     border: 0 none;
     @include box-shadow(none);
     z-index: 99999;
-    i {
-      @extend .glyphicon;
-      &:before { content: "\e013"; }
-      opacity: 0;
-      display: inline-block;
-      width: 14px;
-      font-size: 12px;
-      line-height: 14px;
-      vertical-align: text-top;
-    }
     &:hover {
       background-color: #cdcdcd;
     }
+    i {
+      opacity: 0;
+    }
     &.selected i {
       opacity: 1;
     }
@@ -1552,7 +1516,6 @@ label.log-length {
   }
   .nav .role_options {
     float: right;
-    padding-right: 5px;
   }
 }
 
diff --git a/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss b/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss
index 07c6388530..db0dcd068e 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon_workflow.scss
@@ -1,23 +1,11 @@
 @import '_variables';
 
 .workflow {
-  ul.nav-tabs {
-    padding: 0 13px;
-  }
-
-  td {
-    &.actions {
-      vertical-align: top;
-      width: 308px;
-      padding-right: 10px;
-    }
-
-    &.help_text {
-      vertical-align: top;
-      width: 340px;
-      padding-left: 10px;
-      border-left: 1px solid $border-color;
-    }
+  .tab-content {
+    border-left: 0 none;
+    border-right: 0 none;
+    border-bottom: 0 none;
+    padding-top: 10px;
   }
 
   fieldset > table {