AMBARI-772. Stylize main nav. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/AMBARI-666@1390840 13f79535-47bb-0310-9956-ffa450edef68

AMBARI-666-CHANGES.txt

@@ -12,6 +12,8 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-772. Stylize main nav. (yusaku)
+
   AMBARI-771. Add security between the server and agent and authentication for
   the API. (mahadev)
 

ambari-web/app/messages.js

@@ -39,8 +39,10 @@ Em.I18n.translations = {
 
   'topnav.help.href': 'http://incubator.apache.org/ambari/install.html',
 
-  'installer.step1.header': 'Ambari Cluster Install Wizard',
-  'installer.step1.body': 'Welcome to Apache Ambari!<br>' +
+  'installer.header': 'Cluster Install Wizard',
+  'installer.step1.header': 'Welcome',
+  'installer.step1.body.header': 'Welcome to Apache Ambari!',
+  'installer.step1.body':
     'Ambari makes it easy to install, manage, and monitor Hadoop clusters.<br>' +
     'We will walk you through the cluster installation process with this step-by-step wizard.',
   'installer.step1.clusterName': 'Name your cluster',

ambari-web/app/styles/app.css

@@ -16,76 +16,6 @@
  * limitations under the License.
  */
 
-
-.navbar {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.navbar .brand {
-    color: #666666;
-    display: block;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 1;
-    margin-left: 0;
-    margin-right: 40px;
-    margin-top: 3px;
-    padding: 14px 10px;
-}
-
-.navbar-inner {
-    background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-    background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-    background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-    border-radius: 0;
-    border: 1px solid #bbb;
-    border-width: 0 0 1px 0;
-}
-
-.navbar .nav {
-    float: none;
-    overflow: hidden;
-}
-
-.navbar .nav .active > a, .navbar .nav .active > a:hover {
-    background-color: #999999;
-    color: #FFFFFF;
-    text-decoration: none;
-}
-
-.navbar .nav > li > a {
-    border-radius: 8px;
-    -webkit-border-radius: 8px;
-    -moz-border-radius: 8px;
-    font-size: 13px;
-    font-weight: bold;
-    line-height: 19px;
-    margin: 6px 10px 6px 0;
-    padding: 8px 14px;
-    text-decoration: none;
-    text-shadow: none;
-}
-
-.navbar .nav > li > a:hover {
-    background-color: transparent;
-    color: #999999;
-    text-decoration: none;
-}
-
-.navbar .brand {
-    margin-right: 40px;
-}
-
-.navbar #logo {
-    float: left;
-    padding-top: 7px;
-    height: 36px;
-}
-
-.navbar .nav > li.right {
-    float: right;
-}
-
 /*Box styles*/
 .box {
     border: 1px solid #5fa3c3;

ambari-web/app/styles/application.less

@@ -17,32 +17,122 @@
  */
 
 html, body {
-    height: 100%;
+  height: 100%;
 }
 
 #wrapper {
-    min-height: 100%;
+  min-height: 100%;
 }
 
 @footer-height: 100px;
 
 #main {
-    overflow: auto;
-    padding-bottom: @footer-height;
+  overflow: auto;
+  padding-bottom: @footer-height;
 }
 
 footer {
-    position: relative;
-    border-top: 1px solid #e5e5e5;
-    padding: 30px 0;
-    background-color: #fff;
-    color: #666666;
-    margin-top: -1 * @footer-height;
-    height: @footer-height - 60px;
+  position: relative;
+  border-top: 1px solid #e5e5e5;
+  padding: 30px 0;
+  background-color: #fff;
+  color: #666666;
+  margin-top: -1 * @footer-height;
+  height: @footer-height - 60px;
 }
 
 #content {
-    padding: 40px 0;
+  padding: 40px 0;
+}
+
+#top-nav {
+  .navbar {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+
+  .navbar .brand {
+    color: #666666;
+    display: block;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 1;
+    margin-left: 0;
+    margin-right: 40px;
+    margin-top: 3px;
+    padding: 14px 10px;
+  }
+/*
+  .navbar-inner {
+      background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+      background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+      background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+      border-radius: 0;
+      border: 1px solid #bbb;
+      border-width: 0 0 1px 0;
+  }
+*/
+  .navbar .nav {
+    float: none;
+    overflow: hidden;
+  }
+
+  .navbar .nav .active > a, .navbar .nav .active > a:hover {
+  /*background-color: #999999;*/
+    color: #FFFFFF;
+    text-decoration: none;
+  }
+
+  .navbar .nav > li > a {
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 19px;
+    margin: 6px 10px 6px 0;
+    padding: 8px 14px;
+    text-decoration: none;
+    text-shadow: none;
+  }
+
+  .navbar .nav > li > a:hover {
+    background-color: transparent;
+    color: #999999;
+    text-decoration: none;
+  }
+
+  .navbar .brand {
+    margin-right: 40px;
+  }
+
+  .navbar #logo {
+    float: left;
+    padding-top: 7px;
+    height: 36px;
+  }
+
+  .navbar .nav > li.right {
+    float: right;
+  }
+}
+
+#main-nav {
+  .brand {
+    font-size: 17px;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+  }
+  li {
+    font-size: 15px;
+    border-left: 1px solid #fefefe;
+    border-right: 1px solid #f0f0f0;
+    text-align: center;
+  }
+  li.span2 {
+    padding: 0;
+    margin: 0;
+  }
+
+  margin-bottom:40px;
 }
 
 @green: #69BE28;
@@ -52,82 +142,86 @@ h1 {
 }
 
 .login.well.span4 {
-    margin: 20px auto;
-    padding: 25px;
-    float: none;
+  margin: 20px auto;
+  padding: 25px;
+  float: none;
 }
 
 .login {
-    h2 {
-        margin-top: 0;
-        margin-bottom: 20px;
-    }
-    .btn {
-        margin-top: 15px;
-    }
+  h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+  .btn {
+    margin-top: 15px;
+  }
 }
 
 #installer {
-    h2 {
-        margin-top: 0;
+  h2 {
+    margin-top: 0;
+  }
+  .btn.btn-success {
+  /* float: right; */
+  }
+  .btn-area {
+    margin-top: 20px;
+  }
+  #installer-content {
+    padding: 25px;
+    background-color: #fff;
+
+  }
+  .nav-header {
+    font-size: 13px;
+    padding-left: 0;
+  }
+  #step4, #step6 {
+    a.selected {
+      color: #333;
     }
-    .btn.btn-success {
-        /* float: right; */
+    a.deselected {
     }
-    .btn-area {
-        margin-top: 20px;
+  }
+  #serviceConfig {
+    .accordion-heading {
+      background-color: #f0f0f0;
     }
-    #installer-content {
-        padding: 25px;
-        background-color: #fff;
-
+    .accordion-group {
+      margin-bottom: 20px;
+      .control-group {
+        margin: 10px 0;
+      }
+      form {
+        margin-bottom: 0;
+      }
+    }
+    .badge {
+      margin-left: 4px;
+    }
+    .add-slave-component-group {
+      margin-bottom: 20px;
+    }
+    .master-host, .master-hosts, .slave-hosts {
+      padding-top: 5px;
+      line-height: 20px;
     }
-    #step4, #step6 {
-        a.selected {
-            color: #333;
-        }
-        a.deselected {
-        }
+    #attention {
+      margin: 20px 0;
     }
-    #serviceConfig {
-        .accordion-heading {
-            background-color: #f0f0f0;
-        }
-        .accordion-group {
-            margin-bottom: 20px;
-            .control-group {
-                margin: 10px 0;
-            }
-            form {
-                margin-bottom: 0;
-            }
-        }
-        .badge {
-            margin-left: 4px;
-        }
-        .add-slave-component-group {
-            margin-bottom: 20px;
-        }
-        .master-host, .master-hosts, .slave-hosts {
-            padding-top: 5px;
-            line-height: 20px;
-        }
-        #attention {
-            margin: 20px 0;
-        }
-        .retyped-password {
-            margin-left: 14px;
-        }
-        #slave-hosts-popup {
-            ul {
-                list-style-type: none;
-            }
-        }
+    .retyped-password {
+      margin-left: 14px;
     }
+    #slave-hosts-popup {
+      ul {
+        list-style-type: none;
+      }
+    }
+  }
 }
 
 a:focus {
-    outline: none;
+  outline: none;
 }
 
 @status-live-marker: url("../img/health-status-live.png");
@@ -153,7 +247,6 @@ a:focus {
   }
 }
 
-
 /*Services*/
 .nav-tabs {
   .tab-marker-position {
@@ -171,10 +264,12 @@ a:focus {
     background-image: @status-dead-marker;
   }
 }
+
 .nav-pills.move {
   float: right;
   margin-top: -48px;
 }
+
 /*End Services*/
 
 /*Hosts*/
@@ -186,64 +281,66 @@ a:focus {
     background-image: @status-dead-marker;
   }
 }
+
 #host-details {
   .health-status-LIVE {
     background-image: @status-live-marker;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
     background-position: 0px 4px;
   }
   .health-status-DEAD {
     background-image: @status-dead-marker;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
     background-position: 0px 4px;
   }
 }
+
 /*End Hosts*/
 
 /*assign masters*/
 
 .assign-masters {
-  .select-hosts{
-    width:50%;
-    float:left;
-    white-space:nowrap;
+  .select-hosts {
+    width: 50%;
+    float: left;
+    white-space: nowrap;
   }
 
-  .round-corners{
+  .round-corners {
     border-radius: 8px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
   }
 
-  .host-assignments{
-    float:right;
-    width:45%;
+  .host-assignments {
+    float: right;
+    width: 45%;
   }
 
-  .remaining-hosts{
-    padding:25px;
-    border-top:solid 1px #cccccc;
-    border-left:solid 1px #cccccc;
-    border-right:groove 5px #cccccc;
-    border-bottom:groove 5px #cccccc;
-    margin-top:20px;
+  .remaining-hosts {
+    padding: 25px;
+    border-top: solid 1px #cccccc;
+    border-left: solid 1px #cccccc;
+    border-right: groove 5px #cccccc;
+    border-bottom: groove 5px #cccccc;
+    margin-top: 20px;
     background-color: #FCF8E3;
     color: #C09853;
   }
 
-  .host-assignments .mapping-box{
-    border:solid 1px #cccccc;
+  .host-assignments .mapping-box {
+    border: solid 1px #cccccc;
     padding: 8px;
-    margin-bottom:10px;
+    margin-bottom: 10px;
     background-color: #FFFAFA;
   }
 
-  .host-assignments .assignedService{
-    padding:5px;
-    border:solid 1px #cccccc;
-    margin:2px;
+  .host-assignments .assignedService {
+    padding: 5px;
+    border: solid 1px #cccccc;
+    margin: 2px;
     background-color: #69BE28;
-    color:white;
+    color: white;
     white-space: nowrap;
     font-size: 0.9em;
   }
@@ -253,20 +350,20 @@ a:focus {
   }
 
   .form-horizontal .control-label {
-    width:100px;
+    width: 100px;
   }
 
   .form-horizontal .control-group select {
-    width:75%;
-    min-width:100px;
-    max-width:250px;
+    width: 75%;
+    min-width: 100px;
+    max-width: 250px;
   }
 
-  .hostString{
+  .hostString {
     margin-bottom: 5px;
   }
 
-  .controls .badge{
+  .controls .badge {
     background-color: #ADC299;
     color: #ffffff;
     cursor: pointer;
@@ -274,11 +371,11 @@ a:focus {
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   }
 
-  .assign-master  .controls .badge:hover{
+  .assign-master  .controls .badge:hover {
     background-color: #99B280;
   }
 
-  .alertFlag{
+  .alertFlag {
     font-size: 1.3em;
     color: #B94A48;
     font-weight: bold;

ambari-web/app/templates/application.hbs

@@ -15,27 +15,30 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
+
 <div id="main">
+  <div id="top-nav">
     <div class="navbar navbar-static-top">
-        <div class="navbar-inner">
-            <div class="container">
-                <a {{action gotoStep1}}><img id="logo" src="/img/logo-small.gif"></a>
-                <a class="brand" href="#">{{t app.name}}</a>
-                <ul class="nav">
-                    <li class="right"><a class="help" {{translateAttr href="topnav.help.href"}} target="_blank">Help</a></li>
-                    {{#if App.router.loggedIn}}
-                    <li class="right"><a class="help" href="" {{action logoff}}>Sign out</a></li>
-                    {{/if}}
-                    <li class="right">{{loginName}}</li>
-                </ul>
-            </div>
+      <div class="navbar-inner">
+        <div class="container">
+          <a {{action gotoStep1}}><img id="logo" src="/img/logo-small.gif"></a>
+          <a class="brand" href="#">{{t app.name}}</a>
+          <ul class="nav">
+            <li class="right"><a class="help" {{translateAttr href="topnav.help.href"}} target="_blank">Help</a></li>
+            {{#if App.router.loggedIn}}
+            <li class="right"><a class="help" href="" {{action logoff}}>Sign out</a></li>
+            {{/if}}
+            <li class="right">{{loginName}}</li>
+          </ul>
         </div>
+      </div>
     </div>
-    <div class="container">
-        <div id="content">
-            {{outlet}}
-        </div>
+  </div>
+  <div class="container">
+    <div id="content">
+      {{outlet}}
     </div>
+  </div>
 </div>
 
 

ambari-web/app/templates/installer.hbs

@@ -24,6 +24,7 @@
           <!--Sidebar content-->
           <div class="well">
             <ul class="nav nav-pills nav-stacked">
+              <li class="nav-header">{{t installer.header}}</li>
               <li {{bindAttr class="isStep1:active"}}><a {{action gotoStep1}}>{{t installer.step1.header}}</a></li>
               <li {{bindAttr class="isStep2:active"}}><a {{action gotoStep2}}>{{t installer.step2.header}}</a></li>
               <li {{bindAttr class="isStep3:active"}}><a {{action gotoStep3}}>{{t installer.step3.header}}</a></li>

ambari-web/app/templates/installer/step1.hbs

@@ -16,9 +16,10 @@
 * limitations under the License.
 -->
 
-
-<h2>{{t installer.step1.header}}</h2>
-<p class="alert alert-info">{{t installer.step1.body}}</p>
+<h2>{{t installer.step1.body.header}}</h2>
+<p class="alert alert-info">
+  {{t installer.step1.body}}
+</p>
 <div {{bindAttr class="invalidClusterName:error :control-group"}}>
   <label class="control-label" for="cluster-name">{{t installer.step1.clusterName}}
     <a href="javascript:void(null)"

ambari-web/app/templates/main.hbs

@@ -15,8 +15,12 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-
-        <!--Monitoring and managing services -->
-<h2>Main Application</h2>
-{{view App.MainMenuView }}
+<div id="main-nav">
+  <div class="navbar">
+    <div class="navbar-inner">
+      <a class="brand" href="#">My Cluster</a>
+      {{view App.MainMenuView}}
+    </div>
+  </div>
+</div>
 {{outlet}}

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

@@ -24,10 +24,9 @@ var App = require('app');
  */
 App.MainMenuView = Em.CollectionView.extend({
   tagName: 'ul',
-  classNames: ["nav", "nav-tabs"],
+  classNames: ['nav'],
   content:[
-    { label:'My Cluster', routing:'cluster'},
-    { label:'Dashboard', routing:'dashboard', active:"active"},
+    { label:'Dashboard', routing:'dashboard', active:'active'},
     { label:'Charts', routing:'charts'},
     { label:'Services', routing:'services'},
     { label:'Hosts', routing:'hosts'},
@@ -41,13 +40,16 @@ App.MainMenuView = Em.CollectionView.extend({
   },
 
   itemViewClass: Em.View.extend({
-    classNameBindings: ["active"],
-    active: "",
+
+    classNameBindings: ['active', ':span2'],
+    active: '',
+
     alertsCount: function() {
       if(this.get('content').routing == 'dashboard'){
         return App.router.get('mainDashboardController.alertsCount');
       }
     }.property(),
-    template: Ember.Handlebars.compile('<a {{action navigate view.content}} href="#"> {{unbound view.content.label}}{{#if view.alertsCount}}<span class="label label-important alerts-count">{{view.alertsCount}}</span>{{/if}}</a>')
+
+    template: Ember.Handlebars.compile('<a {{action navigate view.content}} href="#">{{unbound view.content.label}}{{#if view.alertsCount}}<span class="label label-important alerts-count">{{view.alertsCount}}</span>{{/if}}</a>')
   })
 });