Overall styling of pages

Change-Id: I6eb7b083a587c6980c9db12094d58fca67dedc91

9 files changed, 162 insertions, 58 deletions

diff --git a/horizon/static/horizon/js/horizon.capacity.js b/horizon/static/horizon/js/horizon.capacity.js
index f1e5eb4f..c9cb4c0c 100644
--- a/horizon/static/horizon/js/horizon.capacity.js
+++ b/horizon/static/horizon/js/horizon.capacity.js
@@ -68,7 +68,7 @@ horizon.Capacity = {
       .attr("rx", lvl_curve)
       .attr("ry", lvl_curve)
       .style("fill", bkgrnd)
-      .style("stroke", "#000000")
+      .style("stroke", "#bebebe")
       .style("stroke-width", 1);
 
     // used resources
@@ -82,7 +82,7 @@ horizon.Capacity = {
          .attr("rx", lvl_curve)
          .attr("ry", lvl_curve)
          .style("fill", usage_color(used_perc))
-         .style("stroke", "#000000")
+         .style("stroke", "#a0a0a0")
          .style("stroke-width", 1)
          .attr("d", used_perc)
          .transition()
diff --git a/horizon/static/horizon/js/horizon.d3circleschart.js b/horizon/static/horizon/js/horizon.d3circleschart.js
index fad0b7d8..305b2182 100644
--- a/horizon/static/horizon/js/horizon.d3circleschart.js
+++ b/horizon/static/horizon/js/horizon.d3circleschart.js
@@ -170,7 +170,7 @@ horizon.d3_circles_chart = {
         .attr("r", round)//function(d) { return d.r; })// can be sent form server
         .attr("cx", center_x)
         .attr("cy", center_y)
-        .attr("stroke", "grey")
+        .attr("stroke", "#cecece")
         .attr("stroke-width", function(d) {
           return 1;
         })
diff --git a/horizon/static/horizon/js/horizon.d3linechart.js b/horizon/static/horizon/js/horizon.d3linechart.js
index 41a78f1e..f84cee82 100644
--- a/horizon/static/horizon/js/horizon.d3linechart.js
+++ b/horizon/static/horizon/js/horizon.d3linechart.js
@@ -85,7 +85,7 @@ horizon.d3_line_chart = {
 
     self.margin = {top: 20, right: 80, bottom: 30, left: 50};
     self.width = 550 - self.margin.left - self.margin.right;
-    self.height = 400 - self.margin.top - self.margin.bottom;
+    self.height = 300 - self.margin.top - self.margin.bottom;
 
     self.svg = d3.select(chart_div)
                  .append("svg")
diff --git a/horizon/static/horizon/js/horizon.d3singlebarchart.js b/horizon/static/horizon/js/horizon.d3singlebarchart.js
index 6edfeda4..5e89a0e7 100644
--- a/horizon/static/horizon/js/horizon.d3singlebarchart.js
+++ b/horizon/static/horizon/js/horizon.d3singlebarchart.js
@@ -257,7 +257,7 @@ horizon.d3_single_bar_chart = {
         //.attr("rx", base_component.lvl_curve)
         //.attr("ry", base_component.lvl_curve)
         .style("fill", base_component.usage_color(base_component.percentage_used_value()))
-        .style("stroke", "#000000")
+        .style("stroke", "#bebebe")
         .style("stroke-width", 0)
         .attr("d", base_component.percentage_used_value())
         .attr("popup-used", base_component.tooltip_used_value())
@@ -291,7 +291,7 @@ horizon.d3_single_bar_chart = {
       self.y = 0;
       self.x = 0;
       self.width = base_component.w;
-      self.height = 3;
+      self.height = 1;
       self.trasition_attr = "y";
       self.trasition_value = 100 - base_component.percentage_average + "%";
     }
@@ -342,7 +342,7 @@ horizon.d3_single_bar_chart = {
       .attr("rx", base_component.lvl_curve)
       .attr("ry", base_component.lvl_curve)
       .style("fill", base_component.bkgrnd)
-      .style("stroke", "#000000")
+      .style("stroke", "#e0e0e0")
       .style("stroke-width", 1)
       .on("mouseover", function(d){tooltip_free.style("visibility", "visible");})
       .on("mousemove", function(d){tooltip_free.style("top",
@@ -356,7 +356,7 @@ horizon.d3_single_bar_chart = {
       .attr("y", base_component.h/2)
       .attr("x", 3)
       .attr("dominant-baseline", "middle")
-      .attr("font-size", 15)
+      .attr("font-size", 13)
       .on("mouseover", function(d){tooltip.style("visibility", "visible");})
       .on("mousemove", function(d){tooltip.style("top",
         (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
@@ -379,9 +379,9 @@ horizon.d3_single_bar_chart = {
       .attr("y", 0)
       .attr("height", '100%')
       .attr("width", '100%')
-      .style("stroke", "black")
+      .style("stroke", "#bebebe")
       .style("fill", "none")
-      .style("stroke-width", 2);
+      .style("stroke-width", 1);
   },
   //  INIT
   init: function() {
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
index 032e4477..82cc68e3 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
@@ -237,7 +237,7 @@
              data-size="22">
         </div>
       </div>
-      <div class="communication_chart_connection">-->BG-IMG--></div>
+      <div class="communication_chart_connection"></div>
       <div class="communication_chart_wrapper">
         <h5>The most contacted</h5>
         <div id="most_contacted_racks"
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
index ea6049bf..d6bee9a5 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
@@ -108,7 +108,7 @@
     <div class="flavor_usage_bar"
          data-popup-free='{{ rack|remaining_capacity_by_flavors }}'
          data-single-bar-orientation="horizontal"
-         data-single-bar-height="50"
+         data-single-bar-height="35"
          data-single-bar-width="100%"
          data-single-bar-used="{{ rack|all_used_instances }}"
          data-single-bar-auto-scale-selector=".flavors_scale_selector"
@@ -131,7 +131,7 @@
                                      <p>{{ flavor.used_instances }}%, <strong>{{ flavor.used_instances }} instances</strong></p>'
                  data-single-bar-orientation="vertical"
                  data-single-bar-height="100%"
-                 data-single-bar-width="40"
+                 data-single-bar-width="30"
                  data-single-bar-used="{{ flavor.used_instances }}"
                  data-single-bar-average-used="{{ 50 }}"
                  data-single-bar-auto-scale-selector=".flavors_scale_selector"
@@ -179,6 +179,7 @@
 
 <div class="row-fluid">
   <div class="span6">
+    <!-- FIXME Will be added later
     <div class="circles_chart_time_picker">
       <select data-circles-chart-command="change_time"
               data-receiver="#most_contacting_racks, #most_contacted_racks">
@@ -188,6 +189,8 @@
         <option value="last_month">Last Month</option>
       </select>
     </div>
+    -->
+
     <h4>Top Communicating Racks</h4>
     <hr class="header_rule">
     <div class="clear"></div>
@@ -203,7 +206,7 @@
              data-size="22">
         </div>
       </div>
-      <div class="communication_chart_connection">-->BG-IMG--></div>
+      <div class="communication_chart_connection"></div>
       <div class="communication_chart_wrapper">
         <h5>The most contacted</h5>
         <div id="most_contacted_racks"
@@ -220,6 +223,7 @@
     {% endif %}
   </div>
   <div class="span6">
+    <!-- FIXME Will be added later
     <div class="circles_chart_time_picker">
       <select data-circles-chart-command="change_time"
               data-receiver="#rack_health_chart">
@@ -229,10 +233,10 @@
         <option value="last_month">Last Month</option>
       </select>
     </div>
+    -->
+
     <h4>Node health</h4>
     {% if rack.nodes_count and rack.is_provisioned %}
-    <hr class="header_rule">
-    <div class="clear"></div>
 
     <ul class="nav nav-tabs"
         data-circles-chart-command="change_url"
@@ -262,7 +266,10 @@
          data-size="22">
     </div>
     {% else %}
-      <p>No data available yet.</p>
+    <hr class="header_rule">
+    <div class="clear"></div>
+
+    <p>No data available yet.</p>
     {% endif %}
   </div>
 </div>
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
index 2c061701..3e1b0e8d 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
@@ -98,7 +98,7 @@
       <div class="flavor_usage_bar"
            data-popup-free='{{resource_class|remaining_capacity_by_flavors}}'
            data-single-bar-orientation="horizontal"
-           data-single-bar-height="50"
+           data-single-bar-height="35"
            data-single-bar-width="100%"
            data-single-bar-used="{{ resource_class|all_used_instances }}"
            data-single-bar-auto-scale-selector=".flavors_scale_selector"
@@ -125,7 +125,7 @@
                  '
                  data-single-bar-orientation="vertical"
                  data-single-bar-height="100%"
-                 data-single-bar-width="40"
+                 data-single-bar-width="30"
                  data-single-bar-used="{{ flavor.used_instances }}"
                  data-single-bar-average-used="{{ 50 }}"
                  data-single-bar-auto-scale-selector=".flavors_scale_selector"
@@ -150,6 +150,7 @@
   </div>
 
   <div class="span6">
+    <!-- FIXME Will be added later
     <div class="circles_chart_time_picker">
       <select data-circles-chart-command="change_time"
               data-receiver=".rack_health_chart">
@@ -159,9 +160,9 @@
         <option value="last_month">Last Month</option>
       </select>
     </div>
+    -->
+
     <h4>Rack health</h4>
-    <hr class="header_rule">
-    <div class="clear"></div>
 
     <ul class="nav nav-tabs"
         data-circles-chart-command="change_url"
diff --git a/openstack_dashboard/dashboards/infrastructure/static/infrastructure/less/infrastructure.less b/openstack_dashboard/dashboards/infrastructure/static/infrastructure/less/infrastructure.less
index d83c9460..0e5257a1 100644
--- a/openstack_dashboard/dashboards/infrastructure/static/infrastructure/less/infrastructure.less
+++ b/openstack_dashboard/dashboards/infrastructure/static/infrastructure/less/infrastructure.less
@@ -9,6 +9,7 @@ body {
 
 // sidebar
 .sidebar {
+  font-size: 95%;
   position: fixed;
   top: 0;
   left: 0;
@@ -17,12 +18,27 @@ body {
   border-right: 1px solid rgb(210,210,210);
   background: rgb(235,235,235);
 
+  h1.brand {
+    text-align: center;
+
+    a {
+      display: inline-block;
+      width: 80px;
+      height: 85px;
+      background-size: 80px 85px;
+      float: none;
+      margin: 20px 0;
+    }
+  }
+
   .nav-tabs {
+    margin-top: -30px;
     border-bottom: 1px solid rgb(200,200,200);
 
     a {
       position: relative;
       top: 1px;
+      padding: 7px 10px;
     }
 
     li.active a,
@@ -56,24 +72,35 @@ body {
 
 // right part
 #main_content {
-  padding: 0;
+  padding: 15px 0 25px 0;
   margin-left: 240px;
 
   // topbar
   .topbar {
-    padding: 5px 30px;
-    margin: 0 0 10px 0;
-    background: rgb(244,244,244);
+    padding: 0 30px 0 30px;
+    margin: 0;
+    background: white;
+    color: rgb(180, 180, 180);
+    border: 0 none;
+
+    .page-header {
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
 
     h2 {
-      font-weight: normal;
-      font-size: 22px;
-      color: rgb(190,190,190);
+      font-weight: lighter;
+      font-size: 19px;
+      color: rgb(180, 180, 180);
+      line-height: 24px;
     }
 
     #user_info {
       position: relative;
-      top: 10px;
+      color: inherit;
+
+      a {
+        color: rgb(130, 190, 245);
+      }
     }
   }
 
@@ -97,21 +124,24 @@ body {
     border-top: 1px solid rgb(230,230,230);
 
     li a {
+      position: relative;
+      top: -1px;
       border-radius: 0 0 2px 2px;
       text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+      border-top-width: 0;
     }
 
     li.active a {
       border: 1px solid rgb(220, 220, 220);
-      border-top-width: 0;
-      background: linear-gradient(rgb(249, 249, 249), rgb(235,235,235));
-      box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+      background: rgb(110, 110, 110);
+      color: white;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     }
 
     li:not(.active) a:hover {
       border: 1px solid rgb(240, 240, 240);
       border-top-width: 0;
-      background: rgb(249, 249, 249);
+      background: rgb(244, 244, 244);
     }
   }
 
@@ -126,14 +156,18 @@ body {
   #resource_management_tabs {
     font-size: 130%;
     border: 0 none;
+    border-bottom: 1px solid rgb(200, 200, 200);
+    font-weight: lighter;
 
     a {
       padding: 13px 18px;
+      border-top-width: 1px;
+      border-bottom-width: 0;
+      border-radius: 2px 2px 0 0;
     }
 
     li.active a,
     li:not(.active) a:hover {
-      border-top-width: 1px;
     }
   }
 }
@@ -146,7 +180,7 @@ table.table {
   }
 
   th {
-    background: linear-gradient(rgb(249,249,249), rgb(230,230,230));
+    background: linear-gradient(rgb(244,244,244), rgb(235,235,235));
     font-size: 85%;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   }
@@ -156,8 +190,9 @@ table.table {
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 
     tr td {
-      background: linear-gradient(rgb(244,244,244), rgb(230,230,230));
-      padding: 7px 15px;
+      background: linear-gradient(rgb(244,244,244), rgb(235,235,235));
+      padding: 7px 12px;
+      height: auto;
     }
   }
 
@@ -175,7 +210,18 @@ table.table {
   }
 
   tr td {
-    padding: 5px;
+    padding: 0px 10px;
+    line-height: 1;
+    height: 40px;
+    vertical-align: middle;
+
+    &.anchor {
+      padding: 0;
+
+      a {
+        padding: 4px 10px;
+      }
+    }
   }
 
   .table_search input {
@@ -203,8 +249,8 @@ table.table {
 #main_content {
   h3 {
     font-weight: lighter;
-    font-size: 24px;
-    color: rgb(120,120,120);
+    font-size: 26px;
+    color: rgb(80,80,80);
     margin-bottom: 3px;
     margin: 0 0 3px 0;
   }
@@ -239,47 +285,63 @@ table.table {
 
 
 // capacities
-table.capacities{
-  &.overall_usage{
+table.capacities {
+  &.overall_usage {
     margin-top: 5px;
   }
-  td{
+
+  td {
     padding: 3px;
-    &.capacity_label{
+
+    &.capacity_label {
       width: 60px;
       padding-right: 5px;
       color: rgb(160,160,160);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    & div.capacity_bar{
+
+    & div.capacity_bar {
       line-height: 0;
       width: 120px;
     }
   }
 }
 
-table.flavor_usages{
+// flavor usages
+div.flavor_usage_bar {
+  max-width: 550px;
+}
+
+table.flavor_usages {
   width: 100%;
-  td{
+  max-width: 550px;
+
+  td {
     text-align: center;
     padding: 3px;
-    &.flavor_usage_label{
-      font-size: 17px;
+
+    &.flavor_usage_label {
       width: 60px;
       text-align: center;
     }
-    &.flavor_usage_text{
+
+    &.flavor_usage_text {
       width: 60px;
       text-align: center;
+      line-height: 1;
     }
-    & div.flavor_usage_bar{
+
+    & div.flavor_usage_bar {
+      width: auto;
       text-align: center;
       line-height: 0;
-      height: 150px;
+      height: 120px;
     }
   }
 }
 
-
 #interval_selector {
   position: absolute;
   right: 15px;
@@ -322,11 +384,11 @@ svg {
 
 .communication_chart_connection {
   display:inline-block;
-  /*min-width: 100px;
-  max-width: 400px;*/
-  width: 18%;
+  width: 60px;
   height: 30px;
   vertical-align: middle;
+  background: url('/static/dashboard/img/communication_flow.png') no-repeat 50% 50%;
+  background-size: 40px 20px;
 }
 
 .circles_chart_time_picker {
@@ -341,10 +403,10 @@ svg {
 
 .breadcrumbs {
   font-size: 85%;
-  margin: 0 0 20px 0;
+  margin: 0 0 25px 0;
 
   a {
-    color: rgb(180, 180, 180);
+    color: rgb(170, 170, 170);
     text-decoration: underline;
 
     &:hover {
@@ -375,10 +437,44 @@ input {
   border-radius: 2px;
 }
 
+.btn-group .btn:first-child {
+  border-radius: 2px 0 0 2px;
+}
+
+.btn-group .btn:last-child {
+  border-radius: 0 2px 2px 0;
+}
+
+.btn {
+  background: rgb(243, 243, 243);
+
+  &:hover {
+    background: rgb( 235, 235, 235);
+  }
+
+  &.btn-primary {
+    background: #0088cc;
+
+    &:hover {
+      background: #006Dcc;
+    }
+  }
+}
+
+.btn-toolbar.pull-right {
+  margin: 0;
+}
+
 .alerts .icon-warning-sign {
   padding-right: 5px;
 }
 
+.well {
+  background: rgb(249, 249, 249);
+  border-width: 1px;
+  box-shadow: none;
+}
+
 // forms
 .modal {
   .help_text,
diff --git a/openstack_dashboard/static/dashboard/img/communication_flow.png b/openstack_dashboard/static/dashboard/img/communication_flow.png
new file mode 100644
index 00000000..44e6b642
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/img/communication_flow.png