Navbar now completely moved to Scss

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -455,7 +455,6 @@
       var newWidth = roundDiv*spanWidth -2;
       var marginWidth = ((containerWidth+30) - newWidth)/2;
       this.footerView.handleResize(marginWidth);
-      this.naviView.handleResize(marginWidth);
       $('#content').width(newWidth)
       .css('margin-left', marginWidth)
       .css('margin-right', marginWidth);

js/apps/system/aardvark/frontend/js/templates/navigationView.ejs

@@ -1,4 +1,4 @@
-<ul class="arango-nav nav pull-right" id="arangoCollectionUl">
+<ul class="navlist" id="arangoCollectionUl">
   <li class="dashboard-menu"><a id="dashboard" class="tab" href="#dashboard">Dashboard</a></li>
   <% if (isSystem) { %>
     <li id="databaseNavi" class="databases-menu"><a id="databases" class="tab" href="#databases">Databases</a></li>
@@ -13,22 +13,22 @@
   <% } %>
   <li class="api-menu"><a id="api" class="tab" href="#api">API</a></li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Links <b class="caret"></b></a>
+    <a href="#" class="tab" id="links">Links <b class="caret"></b></a>
-    <ul class="dropdown-menu">
+    <ul class="link-dropdown-menu" id="link_dropdown">
-      <li class="nav-header">Documentation</li>
+      <li class="dropdown-header">Documentation</li>
-      <li><a href="https://www.arangodb.org/manuals/current/UserManualArangosh.html" target="_blank">JS Shell Documentation</a></li>
+      <li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/UserManualArangosh.html" target="_blank">JS Shell Documentation</a></li>
-      <li><a href="https://www.arangodb.org/manuals/current/Aql.html" target="_blank">AQL Documentation</a></li>
+      <li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/Aql.html" target="_blank">AQL Documentation</a></li>
-      <li><a href="https://www.arangodb.org/manuals/current/" target="_blank">General Documentation</a></li>
+      <li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/" target="_blank">General Documentation</a></li>
       <li class="divider"></li>
-      <li class="nav-header">ArangoDB</li>
+      <li class="dropdown-header">ArangoDB</li>
-      <li><a href="https://github.com/triAGENS/ArangoDB" target="_blank">GitHub Repository</a></li>
+      <li class="dropdown-item"><a href="https://github.com/triAGENS/ArangoDB" target="_blank">GitHub Repository</a></li>
-      <li><a href="https://www.arangodb.org" target="_blank">ArangoDB.org</a></li>
+      <li class="dropdown-item"><a href="https://www.arangodb.org" target="_blank">ArangoDB.org</a></li>
       <li class="divider"></li>
-      <li class="nav-header">Social</li>
+      <li class="dropdown-header">Social</li>
-      <li><a href="https://twitter.com/arangodb" target="_blank">Twitter</a></li>
+      <li class="dropdown-item"><a href="https://twitter.com/arangodb" target="_blank">Twitter</a></li>
-      <li><a href="https://www.arangodb.org/connect" target="_blank">Announcement List</a></li>
+      <li class="dropdown-item"><a href="https://www.arangodb.org/connect" target="_blank">Announcement List</a></li>
-      <li><a href="https://stackoverflow.com/questions/tagged/arangodb" target="_blank">StackOverflow</a></li>
+      <li class="dropdown-item"><a href="https://stackoverflow.com/questions/tagged/arangodb" target="_blank">StackOverflow</a></li>
-      <li><a href="https://groups.google.com/group/arangodb" target="_blank">Google Groups</a></li>
+      <li class="dropdown-item"><a href="https://groups.google.com/group/arangodb" target="_blank">Google Groups</a></li>
     </ul>
   </li>
 </ul>

js/apps/system/aardvark/frontend/js/views/navigationView.js

@@ -7,7 +7,7 @@
 
     events: {
       "change #arangoCollectionSelect": "navigateBySelect",
-      "click .tab": "navigateByTab"
+      "click .tab": "navigateByTab",
     },
 
     template: templateEngine.createTemplate("navigationView.ejs"),
@@ -17,12 +17,6 @@
       return this;
     },
 
-    handleResize: function (margin) {
-      $('.arango-logo').css('margin-left', margin - 41);
-      $('.nav-collapse').css('margin-right', margin + 7);
-    },
-
-
     navigateBySelect: function() {
       var navigateTo = $("#arangoCollectionSelect").find("option:selected").val();
       window.App.navigate(navigateTo, {trigger: true});
@@ -31,8 +25,13 @@
     navigateByTab: function(e) {
       var tab = e.target || e.srcElement;
       var navigateTo = tab.id;
+      if (navigateTo === "links") {
+        $("#link_dropdown").slideToggle(200);
+        e.preventDefault();
+        return;
+      }
       window.App.navigate(navigateTo, {trigger: true});
-      e.stopPropagation();
+      e.preventDefault();
     },
     handleSelectNavigation: function () {
       $("#arangoCollectionSelect").change(function() {
@@ -43,7 +42,7 @@
 
 
     selectMenuItem: function (menuItem) {
-      $('.nav li').removeClass('active');
+      $('.navlist li').removeClass('active');
       if (menuItem) {
         $('.' + menuItem).addClass('active');
       }

js/apps/system/aardvark/frontend/scss/_abstracts.scss

@@ -1,3 +1,11 @@
+%pull-left {
+  float: left;
+}
+
+%pull-right {
+  float: right;
+}
+
 %clickable {
   cursor: pointer;
 }

js/apps/system/aardvark/frontend/scss/_colors.scss

@@ -16,3 +16,6 @@ $c_white: #FFFFFF;
 
 $c_nav_bg: #333232;
 $c_bar_bg: #686766;
+
+$c_grey: #E5E5E5;
+$c_dark_grey: #999999;

js/apps/system/aardvark/frontend/scss/_fonts.scss

@@ -0,0 +1,5 @@
+body, input, textarea, .page-title span, .pingback a.url {
+  /*font-family: "Helvetica",sans-serif;*/
+  font-family: 'Open Sans', sans-serif !important;
+  font-weight: 400;
+}

js/apps/system/aardvark/frontend/scss/_navbar.scss

@@ -1,58 +1,124 @@
-.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
+nav.navbar {
-  background-image:none;
+  position: fixed;
-  background-color: #8AA051 !important;
+  width: 100%;
-}
+  left: 0px;
-
+  right: 0px;
-.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
+  top: 0px;
-  background-color: #8AA051 !important;
-  color: white !important;
-  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) inset !important;
-}
-.navbar .nav > li > a:focus {
-  background-color: #333232 !important;
-}
-
-.navbar .nav a.tab {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.navbar .nav > li > a:hover {
-  background-color: #8AA051 !important;
-  color: white !important
-}
-
-.arango-nav .dropdown-toggle, .arango-nav .dropdown-toggle:hover, .arango-nav .dropdown:hover, .arango-nav .dropdown:active {
-  background-color: rgba(0, 0, 0, 0) !important;
-  color: white !important;
-  margin-bottom: -8px !important;
-}
-
-body, input, textarea, .page-title span, .pingback a.url {
-  /*font-family: "Helvetica",sans-serif;*/
-  font-family: 'Open Sans', sans-serif !important;
-  font-weight: 400;
-}
-
-.arango-top-nav {
-  background-color: #333232;
-}
-
-.arango-nav {
   height: 34px;
-  min-height: 34px;
+  margin-bottom: 3px;
-  background-color: #333232;
+  background-color: $c_nav_bg;
+  color: $c_white;
+  z-index: 1000;
 }
 
-.arango-logo {
+div.navcontainer {
-  height: 34px;
+  margin: 0px auto;
-  padding: 0 !important;
+  // TODO: @media tags
+  width: 970px;
 }
 
-.applications-menu {
+div.navlogo {
+  @extend %pull-left;
+}
+
+div.navmenu {
+  @extend %pull-right;
+}
+
+ul.navlist {
+  list-style: none;
+  li {
+    @extend %pull-left;
+    margin-left: 1px;
+  }
+  > li.active,
+  li.dropdown-item:hover,
+  > li:hover {
+    background-color: $c_positive;
+  }
+}
+
+a.tab {
+  padding: {
+    top: 7px;
+    left: 10px;
+    bottom: 10px;
+    right: 10px;
+  }
+  color: $c_white;
   display: block;
 }
 
+ul.link-dropdown-menu {
+  @extend %pull-left;
+  position: absolute;
+  top: 80%;
+  right: 0px;
+  z-index: 1000;
+  display: none;
+  padding: 5px 0px;
+  margin: 2px 0px 0px;
+  list-style: none;
+  background-color: $c_white;
+  border: {
+    style: solid;
+    color: rgba(0, 0, 0, 0.2);
+    width: 1px;
+  }
+  @include border-radius(6px);
+
+  li {
+    line-height: 20px;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  li.dropdown-header {
+    font: {
+      weight: bold;
+      size: 11px;
+    }
+    color: $c_dark_grey;
+    padding: 0px 20px;
+    text-transform: uppercase;
+  }
+
+  li.divider {
+    background-color: $c_grey;
+    height: 1px;
+    margin: 10px 1px;
+  }
+
+  a {
+    color: $c_nav_bg;
+    padding: 0px 20px;
+  }
+}
+
+
+.link-dropdown-menu:before {
+  position: absolute;
+  top: -7px;
+  right: 7px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.link-dropdown-menu:after {
+  position: absolute;
+  top: -6px;
+  right: 8px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
 #arangoCollectionSelect {
   display: none;
   float: right;

js/apps/system/aardvark/frontend/scss/style.scss

@@ -2,9 +2,11 @@
 @import "mixins";
 // All colours
 @import "colors";
+// Fonts and font bindings
+@import "fonts";
 // All Abstract classes
 @import "abstracts";
 // Buttons
-@import "buttons";
+// @import "buttons";
 // Navbar
 @import "navbar";

js/apps/system/aardvark/index.html

@@ -14,13 +14,17 @@
 
   <body>
     <nav class="navbar">
-      <a class="logo" href="#"><img src="img/logo_arangodb_white.gif"/></a>
+      <div class="navcontainer">
+        <div class="navlogo">
+          <a class="logo" href="#"><img src="img/blubber.png"/></a>
+        </div>
         <div class="navmenu" id="navigationBar">
         </div>
+      </div>
     </nav>
 
     <div class="row">
-      <div id="content" class="span12>"></div>
+      <div id="content" class="span12"></div>
     </div>
 
     <div id="modalPlaceholder">