Merge "Modal fixes - 2 columns, padding, header, membership"

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 %}>

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>

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]]

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 %}

horizon/templates/horizon/common/_modal_form.html

@@ -26,14 +26,16 @@
       </div>
       {% endif %}
       {% block modal-body %}
-        <div class="left">
+        <div class="row">
+          <div class="col-sm-6">
             <fieldset>
             {% include "horizon/common/_form_fields.html" %}
             </fieldset>
           </div>
-        <div class="right">
+          <div class="col-sm-6">
             {% block modal-body-right %}{% endblock %}
           </div>
+        </div>
       {% endblock %}
     </div>
     <div class="modal-footer">

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>

horizon/templates/horizon/common/_workflow_step.html

@@ -1,13 +1,9 @@
 <noscript><h3>{{ step }}</h3></noscript>
-<table class="table-fixed">
+<div class="row">
-  <tbody>
+  <div class="col-sm-6">
-    <tr>
-      <td class="actions">
     {% include "horizon/common/_form_fields.html" %}
-      </td>
+  </div>
-      <td class="help_text">
+  <div class="col-sm-6">
     {{ step.get_help_text }}
-      </td>
+  </div>
-    </tr>
+</div>
-  </tbody>
-</table>

horizon/templates/horizon/common/_workflow_step_update_members.html

@@ -5,8 +5,10 @@
 <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">
+    <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" %}">
@@ -14,8 +16,8 @@
           </div>
         </div>
       </div>
-    <div class="right">
+      <div class="col-xs-6">
-      <div class="fake_table fake_table_header fake_{{ step.slug }}_table">
+        <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" %}">
@@ -24,20 +26,23 @@
         </div>
       </div>
     </div>
+  </div>
 
-  <div class="left filterable {{ step.slug }}_filterable">
+  <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 class="right filterable {{ step.slug }}_filterable">
+    <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>
 
 <div class="hide">

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>

openstack_dashboard/dashboards/project/images/templates/images/images/_create.html

@@ -9,13 +9,7 @@
 
 {% block modal-header %}{% trans "Create An Image" %}{% endblock %}
 
-{% block modal-body %}
+{% block modal-body-right %}
-<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 %}
@@ -32,7 +26,6 @@
          {% 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>
 {% endblock %}
 
 {% block modal-footer %}

openstack_dashboard/dashboards/project/images/templates/images/images/_update.html

@@ -7,16 +7,9 @@
 
 {% block modal-header %}{% trans "Update Image" %}{% endblock %}
 
-{% block modal-body %}
+{% block modal-body-right %}
-<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>
 {% endblock %}
 
 {% block modal-footer %}

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 {
+// should be removed and replaced by row + col-sm-6 in template
-    float: left;
+.left, .right {
-    width: 342px;
+  @extend .col-sm-6;
-    margin-right: 15px;
-}
-
-.left form {
-  margin: 0;
-}
-
-.right {
-  float: left;
-  width: 342px;
 }
 
 .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: 8px;
-    padding: 10px;
     border: 1px solid $table-border-color;
     border-bottom: none;
     overflow: hidden;
   }
 
-    /* 'Fake table' body */
+  .members_title {
-  .fake_table {
+    color: $gray;
-    > ul {
+    font-weight: bold;
-      padding: 0;
+    float: left;
-      &.no_results {
+    padding: 6px 0;
+  }
+
+  input.filter {
+    width: 120px;
+    float: right;
+    &[type="text"]:disabled {
+      background-color: $gray-lighter;
+      & + span.search-icon {
+        color: $gray-light;
+      }
+    }
+  }
+
+  .form-control-feedback { top: 0; }
+  .no_results {
     border: 1px solid $table-border-color;
-        padding: 10px;
+    padding: 9px 10px 8px 10px;
-      }
+    opacity: 0.5;
-    }
-    ul.btn-group:hover {
-        background-color: $border-color;
-    }
   }
 
   /* Member lists */
-  .update_members_filterable {
+  .members, .available_members {
-    overflow-y: auto;
+    padding: 0;
-    height: 500px;
+    // reset nav-pills display to block
-  }
+    ul.nav-pills {
-  .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;
     }
-  }
+    ul.btn-group {
-  .dark_stripe {
+      margin-left:0px;
-    background-color: $table-bg-odd;
+      padding: 3px;
-  }
+      margin-bottom: 0px;
-  .light_stripe {
+      border: 1px solid $gray-light;
-    background-color: white;
+      border-bottom: none;
-  }
+      &.last_stripe {
-  .last_stripe {
         border-bottom: 1px solid $table-border-color;
       }
-  .has-feedback {
+      &.light_stripe {
-    display: inline-block;
+        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;
-    margin-bottom: 0;
+        a:hover {
+          background-color: $link-hover-color;
         }
-  /* 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;
   }
 }
 

openstack_dashboard/static/dashboard/scss/horizon_workflow.scss

@@ -1,23 +1,11 @@
 @import '_variables';
 
 .workflow {
-  ul.nav-tabs {
+  .tab-content {
-    padding: 0 13px;
+    border-left: 0 none;
-  }
+    border-right: 0 none;
-
+    border-bottom: 0 none;
-  td {
+    padding-top: 10px;
-    &.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;
-    }
   }
 
   fieldset > table {