Make switch to compact and small modes dynamic

The point where we need to switch between normal mode, compact mode
and small mode varies due to different string lengths in different
languages, but that can't be expressed by a media query, so use some
javascript to update as the window size changes.

Fixes #1014

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");

app/assets/stylesheets/common.scss

@@ -444,7 +444,7 @@ nav.secondary {
   }
 }
 
-@media only screen and (max-width:960px) {
+body.compact {
   #compact-secondary-nav {
     display: inline-block;
   }
@@ -2681,4 +2681,3 @@ input.richtext_title[type="text"] {
     display: none;
   }
 }
-

app/assets/stylesheets/large-ltr.css

@@ -1,5 +0,0 @@
-/*
- *= require ltr/common
- *= require bootstrap
- *= require large
- */

app/assets/stylesheets/large-rtl.css

@@ -1,5 +0,0 @@
-/*
- *= require rtl/common
- *= require bootstrap
- *= require large
- */

app/assets/stylesheets/large.css

@@ -1 +0,0 @@
-/* Styles specific to large screens  */

app/assets/stylesheets/small.scss

@@ -2,28 +2,30 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-input[type="submit"],
-input[type="text"] {
+body.small {
+
+  input[type="submit"],
+  input[type="text"] {
     -webkit-appearance: none;
-}
+  }
 
-.column-1 {
+  .column-1 {
     width: 100%;
-}
+  }
 
-#menu-icon {
+  #menu-icon {
     display: inline-block !important;
-}
+  }
 
-nav.primary,
-nav.secondary {
+  nav.primary,
+  nav.secondary {
     float: none !important;
     position: relative;
     display: block;
     clear: both;
-}
+  }
 
-header {
+  header {
     height: auto;
     min-height: $headerHeight;
     background: #fff;
@@ -39,15 +41,15 @@ header {
     .search_forms {
       display: block;
     }
-}
+  }
 
-#sidebar .search_forms,
-#edit_tab,
-#export_tab {
+  #sidebar .search_forms,
+  #edit_tab,
+  #export_tab {
     display: none;
-}
+  }
 
-nav.primary {
+  nav.primary {
     padding: 0;
 
     ul, li {
@@ -69,9 +71,9 @@ nav.primary {
         }
       }
     }
-}
+  }
 
-nav.secondary {
+  nav.secondary {
     border-bottom: 1px solid #eee;
 
     .user-menu {
@@ -86,17 +88,17 @@ nav.secondary {
         }
       }
     }
-}
+  }
 
-#compact-secondary-nav {
+  #compact-secondary-nav {
     display: none;
-}
+  }
 
-.compact-hide {
+  .compact-hide {
     display: inline-block;
-}
+  }
 
-.map-layout {
+  .map-layout {
     #sidebar, #map {
       position: relative;
       overflow-x: hidden;
@@ -119,65 +121,65 @@ nav.secondary {
       width: 100%;
       overflow-y: scroll;
     }
-}
+  }
 
-#sidebar .welcome {
+  #sidebar .welcome {
     display: none !important;
-}
+  }
 
-.leaflet-top.leaflet-right {
+  .leaflet-top.leaflet-right {
     top: 10px !important;
     z-index: 0;
-}
+  }
 
-.content_map {
+  .content_map {
     width: 100%;
     border: none;
     float: none;
     height: 200px;
     max-height: none;
     min-height: auto;
-}
+  }
 
-/* Rules for the login form */
+  /* Rules for the login form */
 
-#login_login input#user_email {
+  #login_login input#user_email {
     width: 100%;
     max-width: 18em;
-}
+  }
 
-#login_login input#user_password {
+  #login_login input#user_password {
     width: 100%;
     max-width: 18em;
-}
+  }
 
-#login_login input#openid_url {
+  #login_login input#openid_url {
     width: 100%;
     max-width: 18em;
-}
+  }
 
-#login_openid_buttons td {
+  #login_openid_buttons td {
     padding: 2px;
-}
+  }
 
-/* Rules for the user view */
+  /* Rules for the user view */
 
-.user_map {
+  .user_map {
     width: 100% !important;
     height: 300px !important;
-}
+  }
 
-#userinformation .deemphasize {
+  #userinformation .deemphasize {
     position: relative;
     right: auto; left: auto;
     margin-top: 10px;
     top: auto;
-}
+  }
 
-/* Rules for the sign-up page */
+  /* Rules for the sign-up page */
 
-.user-new,
-.user-create {
+  .user-new,
+  .user-create {
     .col6 {
       width: 100%;
     }
@@ -185,8 +187,10 @@ nav.secondary {
     .aside {
       display: none;
     }
-}
+  }
 
-.site-about #content .attr h1 {
+  .site-about #content .attr h1 {
     font-size: 28px;
+  }
+
 }

app/views/layouts/_head.html.erb

@@ -3,8 +3,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
   <!--[if lt IE 9]><%= javascript_include_tag "html5shiv" %><![endif]-->
   <%= javascript_include_tag "application" %>
-  <%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:721px)" %>
-  <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 722px)" %>
+  <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %>
   <%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
   <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
   <!--[if IE]>

config/initializers/assets.rb

@@ -13,8 +13,8 @@ Rails.application.config.assets.manifest = Rails.root.join("tmp/manifest.json")
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
 Rails.application.config.assets.precompile += %w( index.js browse.js welcome.js fixthemap.js )
 Rails.application.config.assets.precompile += %w( user.js diary_entry.js )
-Rails.application.config.assets.precompile += %w( large-ltr.css small-ltr.css print-ltr.css )
-Rails.application.config.assets.precompile += %w( large-rtl.css small-rtl.css print-rtl.css )
+Rails.application.config.assets.precompile += %w( screen-ltr.css print-ltr.css )
+Rails.application.config.assets.precompile += %w( screen-rtl.css print-rtl.css )
 Rails.application.config.assets.precompile += %w( leaflet-all.css leaflet.ie.css )
 Rails.application.config.assets.precompile += %w( id.js id.css )
 Rails.application.config.assets.precompile += %w( embed.js embed.css )