Rename nav-related body classes

This makes it clearer that the classes are only for navigation menu
matters. Other things should be done on media queries, or ideally,
using bootstrap components like grids.

This has a side effect of removing the smaller font size from the
body when the navigation menu is in the small-nav state.

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e455f297be32868f6a5ae73921b4f416c5c5f3ef..36b560fde68c4f0132e49a213a3264f76232f5b4 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -81,11 +81,11 @@ $(document).ready(function () {
     var windowWidth = $(window).width();
 
     if (windowWidth < compactWidth) {
-      $("body").removeClass("compact").addClass("small");
+      $("body").removeClass("compact-nav").addClass("small-nav");
     } else if (windowWidth < headerWidth) {
-      $("body").addClass("compact").removeClass("small");
+      $("body").addClass("compact-nav").removeClass("small-nav");
     } else {
-      $("body").removeClass("compact").removeClass("small");
+      $("body").removeClass("compact-nav").removeClass("small-nav");
     }
   }
 
@@ -100,13 +100,13 @@ $(document).ready(function () {
       headerWidth = headerWidth + $(e).outerWidth();
     });
 
-    $("body").addClass("compact");
+    $("body").addClass("compact-nav");
 
     $("header").children(":visible").each(function (i, e) {
       compactWidth = compactWidth + $(e).outerWidth();
     });
 
-    $("body").removeClass("compact");
+    $("body").removeClass("compact-nav");
 
     updateHeader();
 

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5bbaf487c660f7948f1490d36f9592cadd87ee18..0cdc2c4bb1c1a6dc6c7b04b42e8b02cb7ab83b7a 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -270,7 +270,7 @@ nav.primary, nav.secondary {
   display: none;
 }
 
-body.compact {
+body.compact-nav {
   #compact-secondary-nav {
     display: inline-block;
   }

diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index d9e203d954c348d0020d8c8ed8f431e853c61f64..808b8caa6f45a8b9fa0ae73323d5d00b237028d1 100644 (file)
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -2,7 +2,7 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-body.small {
+body.small-nav {
   #menu-icon {
     display: inline-block !important;
   }