Converted footer view to scss and added resizing functionality.

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

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

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

@@ -7,11 +7,9 @@
   }
 %>
 <div class="footer-left">
-  <!--p>&nbsp;<a id="currentUser" style="color:#FFFFFF"></a></p-->
-  <p <%=margin?"style='margin-left:"+margin+"px'":""%>>Copyright (c) triAGENS GmbH</p>
+  <p>Copyright (c) triAGENS GmbH</p>
 </div>
 
 <div class="footer-right">
-  <p <%=margin?"style='margin-right:" + (margin + 40) + "px'":""%>><% if(n) { %>Server: <%=n%> <%=v%>, Database: <span id="dbSelect" class="selectDB"></span><% } %></p>
+  <p><% if(n) { %>Server: <%=n%> <%=v%>, Database: <span id="dbSelect" class="selectDB"></span><% } %></p>
 </div>
-<div class="footer-invisible" id="databaseName"></div>

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

@@ -4,7 +4,7 @@
 (function() {
   "use strict";
   window.FooterView = Backbone.View.extend({
-    el: '.footer',
+    el: '#footerBar',
     system: {},
     isOffline: true,
     firstLogin: true,
@@ -103,18 +103,12 @@
         $(this.el).html(this.template.render({
           name: this.system.name,
           version: this.system.version,
-          database: this.system.database,
-          margin: this.resizeMargin
+          database: this.system.database
         }));
         this.dbSelectionView.render($("#dbSelect"));
       }
     },
 
-    handleResize: function(newMargin) {
-      this.resizeMargin = newMargin;
-      this.render();
-    },
-
     handleSelectDatabase: function() {
       this.dbSelectionView.render($("#dbSelect"));
     },
@@ -126,8 +120,7 @@
       $(this.el).html(this.template.render({
         name: this.system.name,
         version: this.system.version,
-        database: this.system.database,
-        margin: this.resizeMargin
+        database: this.system.database
       }));
       this.dbSelectionView.render($("#dbSelect"));
       return this;

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

@@ -10,6 +10,16 @@
   cursor: pointer;
 }
 
+%fixedbar {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  background-color: $c_nav_bg;
+  color: $c_white;
+  z-index: 1000;
+}
+
 %negative {
   background-color: $c_negative;
   &:hover {

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

@@ -0,0 +1,19 @@
+footer.footer {
+  @extend %fixedbar;
+  bottom: 0px;
+  height: 40px;
+
+  p {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom:0;
+  }
+}
+
+div.footer-left {
+  @extend %pull-left;
+}
+
+div.footer-right {
+  @extend %pull-right;
+}

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

@@ -1,20 +1,8 @@
 nav.navbar {
-  position: fixed;
-  width: 100%;
-  left: 0px;
-  right: 0px;
+  @extend %fixedbar;
   top: 0px;
   height: 34px;
   margin-bottom: 3px;
-  background-color: $c_nav_bg;
-  color: $c_white;
-  z-index: 1000;
-}
-
-div.navcontainer {
-  margin: 0px auto;
-  // TODO: @media tags
-  width: 970px;
 }
 
 div.navlogo {

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

@@ -0,0 +1,38 @@
+div.resizecontainer {
+  margin: 0px auto;
+}
+
+@media (max-width: 798px) {
+  #arangoCollectionUl {
+    display: none;
+  }
+  #collectionsDropdown ul {
+    width: auto !important;
+  }
+  #arangoCollectionSelect {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 799px) and (max-width: 1041px) {
+  #arangoCollectionUl a {
+    font-size: 11px;
+    padding: 7px 5px 10px;
+  }
+}
+
+
+@media (min-width: 1042px) and (max-width: 1284px) {
+  #arangoCollectionUl a {
+    font-size: 13px;
+  }
+}
+
+@for $i from 0 through 10 {
+  $min: 241px + $i * 243;
+  @media (min-width: $min + 72) and (max-width: $min + 243 + 71) {
+    div.resizecontainer {
+      width: $min;
+    }
+  }
+}

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

@@ -6,7 +6,11 @@
 @import "fonts";
 // All Abstract classes
 @import "abstracts";
+// Shared classes
+@import "resizing";
 // Buttons
 // @import "buttons";
 // Navbar
 @import "navbar";
+// Footer
+@import "footer";

js/apps/system/aardvark/index.html

@@ -14,7 +14,7 @@
 
   <body>
     <nav class="navbar">
-      <div class="navcontainer">
+      <div class="resizecontainer">
         <div class="navlogo">
           <a class="logo" href="#"><img src="img/blubber.png"/></a>
         </div>
@@ -33,6 +33,8 @@
     </div>
 
     <footer class="footer">
+      <div class="resizecontainer" id="footerBar">
+      </div>
     </footer>
 
     <!-- libs -->

js/apps/system/aardvark/manifest.json

@@ -111,7 +111,6 @@
         "frontend/css/layout.css",
         "frontend/css/jquery.dataTables.css",
         "frontend/css/nv.d3.css",
-        "frontend/css/footerView.css",
         "frontend/css/shellView.css",
         "frontend/css/queryView.css",
         "frontend/css/dashboardView.css",