Make switch to compact and small modes dynamic

[rails.git] / app / assets / javascripts / application.js

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 354cfe66e788e79815a8fbba89c450042818f430..5064d115b91ada67fd2198077b3ad9125a12cfd6 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -76,6 +76,37 @@ window.minimiseMap = function () {
 };
 
 $(document).ready(function () {
+  var headerWidth = 0,
+      compactWidth = 0;
+
+  $("header").children(":visible").each(function (i,e) {
+    headerWidth = headerWidth + $(e).outerWidth();
+  });
+
+  $("body").addClass("compact");
+
+  $("header").children(":visible").each(function (i,e) {
+    compactWidth = compactWidth + $(e).outerWidth();
+  });
+
+  $("body").removeClass("compact");
+
+  function updateHeader() {
+    var windowWidth = $(window).width();
+
+    if (windowWidth < compactWidth) {
+      $("body").removeClass("compact").addClass("small");
+    } else if (windowWidth < headerWidth) {
+      $("body").addClass("compact").removeClass("small");
+    } else {
+      $("body").removeClass("compact").removeClass("small");
+    }
+  }
+
+  updateHeader();
+
+  $(window).resize(updateHeader);
+
   $("#menu-icon").on("click", function(e) {
     e.preventDefault();
     $("header").toggleClass("closed");