AMBARI-1279. Make sure that Ambari Web renders all elements correctly when the browser width is 1024px or narrower. (srimanth via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1440227 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -36,6 +36,9 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1279. Make sure that Ambari Web renders all elements correctly when
+ the browser width is 1024px or narrower. (srimanth via yusaku)
+
  AMBARI-1274. Shrink top nav height. (srimanth)
  
  AMBARI-1272. Controller javascripts need comments. (srimanth)

ambari-web/app/styles/application.less

@@ -36,6 +36,7 @@ html, body {
 #main {
   overflow: visible;
   padding-bottom: @footer-height;
+  min-width: 980px;
 }
 
 footer {
@@ -1523,7 +1524,7 @@ a:focus {
   .host-metrics {
     [class*="span"] {
       float: left;
-      margin-left: 5px;
+      margin: 0;
     }
     .chart-container {
       .chart-x-axis {
@@ -1886,6 +1887,9 @@ ul.filter {
       height: 430px;
     }
   }
+  .legend-column {
+    min-width: 160px;
+  }
   .heatmap_host_details {
     font-size: 12px;
     line-height: 1.6em;
@@ -2280,7 +2284,7 @@ ul.inline li {
   background-position: 0;
 }
 // COMBOBOX FIXES END
-@media all and (max-width: 1152px) {
+@media all and (max-width: 1200px) {
   #main-nav {
     li.span2 {
       width: 120px;

ambari-web/app/styles/apps.less

@@ -46,7 +46,7 @@
   }
 
   .clear_filter{
-    width:578px;
+    width:46%;
   }
 
   .runsList {
@@ -59,29 +59,39 @@
       word-wrap: break-word;
     }
 
-    .input-small-app{
-      width:148px
+    .view-wrapper {
+      width: 73%;
+    }
+    input, select{
+      width: 90%;
+    }
+    label.checkbox input {
+      width: auto;
+    }
+    .col8,
+    td:first-child + td,
+    th:first-child + th{
+      width: 15%;
     }
-
     .col0,
     td:first-child + td,
     th:first-child + th{
-      width: 176px;
+      width: 15%;
     }
     .col1,
     td:first-child + td + td,
     th:first-child + th + th{
-      width: 118px;
+      width: 12%;
     }
     .col2,
     td:first-child + td + td + td,
     th:first-child + th + th + th{
-      width: 108px;
+      width: 11%;
     }
     .col3,
     td:first-child + td + td + td + td,
     th:first-child + th + th + th + th{
-      width: 93px;
+      width: 11%;
     }
     .col4,.col5,.col6,.col7,
     td:first-child + td + td + td + td + td,
@@ -93,7 +103,7 @@
     td:first-child + td + td + td + td + td + td + td + td,
     th:first-child + th + th + th + th + th + th + th + th
     {
-      width: 88px;
+      width: 9%;
     }
   }
 

ambari-web/app/templates/main/apps.hbs

@@ -60,12 +60,11 @@
     </div>
     <div class="span2 clear_filter">
         <a {{action "clearFilters" target="view"}}>Clear filters</a>
-  </div>
-
-   <div class="search-bar">
+    </div>
+    <div class="search-bar">
         {{view view.appSearchThrough valueBinding="controller.filterObject.sSearch"}}
-      </div>
-
+    </div>
+  </div>
 
   <table class="table table-striped runsList" id="dataTable">
     <thead>

ambari-web/app/templates/main/charts/heatmap.hbs

@@ -20,7 +20,7 @@
 
   <div class="container-fluid">
 	  <div class="row-fluid">
-	    <div class="span2">
+	    <div class="span2 legend-column">
 		     <div class="btn-group">
 				  <button class="btn">Select Metric...</button>
 				  <button class="btn dropdown-toggle" data-toggle="dropdown">

ambari-web/app/templates/main/host/summary.hbs

@@ -48,12 +48,12 @@
           {{#each component in view.sortedComponents}}
           <div class="row-fluid">
           {{#view view.ComponentView contentBinding="component" decommissionDataNodeHostNamesBinding="view.decommissionDataNodeHostNames"}}
-            <div class="span8">
+            <div class="span7">
               <span {{bindAttr class="view.statusClass :components-health"}}></span>&nbsp;
               {{component.displayName}}&nbsp;/&nbsp;
               <a href="#" {{action routeToService component.service target="controller"  }}>{{component.service.displayName}}</a>
             </div>
-            <div class="span4">
+            <div class="span5">
               {{#if App.isAdmin}}
               <div class="btn-group">
                 <a {{ bindAttr class=":btn :dropdown-toggle view.disabledClass"}} data-toggle="dropdown">

ambari-web/app/views/main/host.js

@@ -49,6 +49,7 @@ App.MainHostView = Em.View.extend({
       "iDisplayLength": 10,
       "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
       "oSearch": {"bSmart":false},
+      "bAutoWidth": false,
       "aoColumns":[
         { "bSortable": false },
         { "sType":"html" },

ambari-web/vendor/styles/bootstrap-responsive.css

@@ -438,7 +438,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 979px) {
+/*@media (min-width: 768px) and (max-width: 979px) {
   .row {
     margin-left: -20px;
     *zoom: 1;
@@ -1048,7 +1048,7 @@
     padding-right: 10px;
     padding-left: 10px;
   }
-}
+}*/
 
 @media (min-width: 980px) {
   .nav-collapse.collapse {