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

@@ -228,7 +228,7 @@ table {
 
 /* Rules for the header */
 
-#menu-icon { 
+#menu-icon {
   display: none !important;
   float: right;
   background: image-url("menu-icon.png") no-repeat;
@@ -290,7 +290,7 @@ nav.primary {
     > li {
       border-right: $border;
       float: left;
-      &:last-child { 
+      &:last-child {
         border-right: 0;
       }
       > a:hover { background: lighten($green, 30%); }
@@ -371,12 +371,12 @@ nav.secondary {
     > li {
       border-right: $border;
       float: left;
-      &:last-child { 
+      &:last-child {
         border-right: 0;
 
         > a {
           border-radius: 0 $border-radius $border-radius 0;
-        } 
+        }
       }
       &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }
       &:hover a { background: lighten($darkgrey, 30%); }
@@ -444,7 +444,7 @@ nav.secondary {
   }
 }
 
-@media only screen and (max-width:960px) {
+body.compact {
   #compact-secondary-nav {
     display: inline-block;
   }
@@ -616,7 +616,7 @@ nav.secondary {
     &.query-disabled {
       cursor: not-allowed;
     }
-    
+
     .leaflet-marker-draggable {
       cursor: move;
     }
@@ -677,7 +677,7 @@ nav.secondary {
       margin-bottom: 8px;
       position: relative;
       transition: border-color 0.08s ease-in;
-      
+
       label {
         position: absolute;
         top: 0;
@@ -813,10 +813,10 @@ nav.secondary {
   padding: $lineheight/2 $lineheight;
   // background: $offwhite;
   // border-bottom: 1px solid #ccc;
-  > .close { 
+  > .close {
     float: right;
     margin-top: 2px;
-    cursor: pointer; 
+    cursor: pointer;
   }
 }
 
@@ -1296,7 +1296,7 @@ tr.turn:hover {
 
 .content-heading {
   background: $lightgrey;
-  
+
   h1 { font-size: 22px; }
 }
 
@@ -1892,7 +1892,7 @@ tr.turn:hover {
     padding-top: $lineheight;
     border-top: 1px solid $lightgrey;
   }
-  .horizontal-list .form-row { 
+  .horizontal-list .form-row {
     float: left;
     padding-right: 10px;
   }
@@ -2460,7 +2460,7 @@ input.richtext_title[type="text"] {
 .site-welcome, .site-fixthemap {
   .center {
     text-align: center;
-    .sprite { 
+    .sprite {
       float: none;
       margin: auto;
     }
@@ -2473,7 +2473,7 @@ input.richtext_title[type="text"] {
     float: left;
   }
 
-  .icon-list { 
+  .icon-list {
     padding-bottom: 20px;
     div {
       margin-bottom: 10px;
@@ -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,191 +2,195 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-input[type="submit"],
+body.small {
-input[type="text"] {
-  -webkit-appearance: none;
-}
 
-.column-1 {
+  input[type="submit"],
-  width: 100%;
+  input[type="text"] {
-}
+    -webkit-appearance: none;
-
-#menu-icon {
-  display: inline-block !important;
-}
-
-nav.primary,
-nav.secondary {
-  float: none !important;
-  position: relative;
-  display: block;
-  clear: both;
-}
-
-header {
-  height: auto;
-  min-height: $headerHeight;
-  background: #fff;
-
-  h1 {
-    padding-bottom: 15px;
   }
 
-  &.closed nav {
+  .column-1 {
-    display: none;
-  }
-
-  .search_forms {
-    display: block;
-  }
-}
-
-#sidebar .search_forms,
-#edit_tab,
-#export_tab {
-  display: none;
-}
-
-nav.primary {
-  padding: 0;
-
-  ul, li {
-    border: none;
-    border-radius: 0;
     width: 100%;
   }
 
-  ul {
+  #menu-icon {
-    border-top: 1px solid #eee;
+    display: inline-block !important;
-    li {
-      border-bottom: 1px solid #eee;
-      border-right: none;
-      > a {
-        border-radius: 0;
-        width: 100%;
-        text-align: center;
-        font-size: 15px;
-      }
-    }
   }
-}
 
-nav.secondary {
+  nav.primary,
-  border-bottom: 1px solid #eee;
+  nav.secondary {
-
+    float: none !important;
-  .user-menu {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    > li {
-      width: 49%;
-      > a { 
-        width: 100%; 
-        text-align: center;
-      }
-    }
-  }
-}
-
-#compact-secondary-nav {
-  display: none;
-}
-
-.compact-hide {
-  display: inline-block;
-}
-
-.map-layout {
-  #sidebar, #map {
     position: relative;
-    overflow-x: hidden;
+    display: block;
-    width: 100%;
+    clear: both;
-    height: 50%;
   }
 
-  .overlay-sidebar {
+  header {
-    #sidebar {
+    height: auto;
-      width: 300px;
+    min-height: $headerHeight;
+    background: #fff;
+
+    h1 {
+      padding-bottom: 15px;
     }
 
-    #map {
+    &.closed nav {
-      height: 100%;
+      display: none;
+    }
+
+    .search_forms {
+      display: block;
     }
   }
 
-  #map-ui {
+  #sidebar .search_forms,
-    z-index: 9999;
+  #edit_tab,
-    width: 100%;
+  #export_tab {
-    overflow-y: scroll;
-  }
-}
-
-#sidebar .welcome {
-  display: none !important;
-}
-
-.leaflet-top.leaflet-right {
-  top: 10px !important;
-  z-index: 0;
-}
-
-.content_map {
-  width: 100%;
-  border: none;
-  float: none;
-  height: 200px;
-  max-height: none;
-  min-height: auto;
-}
-
-/* Rules for the login form */
-
-#login_login input#user_email {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_login input#user_password {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_login input#openid_url {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_openid_buttons td {
-  padding: 2px;
-}
-
-/* Rules for the user view */
-
-.user_map {
-  width: 100% !important;
-  height: 300px !important;
-}
-
-#userinformation .deemphasize {
-  position: relative;
-  right: auto; left: auto;
-  margin-top: 10px;
-  top: auto;
-}
-
-/* Rules for the sign-up page */
-
-.user-new,
-.user-create {
-  .col6 {
-    width: 100%;
-  }
-
-  .aside {
     display: none;
   }
-}
 
-.site-about #content .attr h1 {
+  nav.primary {
-  font-size: 28px;
+    padding: 0;
+
+    ul, li {
+      border: none;
+      border-radius: 0;
+      width: 100%;
+    }
+
+    ul {
+      border-top: 1px solid #eee;
+      li {
+        border-bottom: 1px solid #eee;
+        border-right: none;
+        > a {
+          border-radius: 0;
+          width: 100%;
+          text-align: center;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+
+  nav.secondary {
+    border-bottom: 1px solid #eee;
+
+    .user-menu {
+      display: block;
+      width: 100%;
+      margin-left: 0;
+      > li {
+        width: 49%;
+        > a {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  #compact-secondary-nav {
+    display: none;
+  }
+
+  .compact-hide {
+    display: inline-block;
+  }
+
+  .map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
+    }
+
+    .overlay-sidebar {
+      #sidebar {
+        width: 300px;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }
+  }
+
+  #sidebar .welcome {
+    display: none !important;
+  }
+
+  .leaflet-top.leaflet-right {
+    top: 10px !important;
+    z-index: 0;
+  }
+
+  .content_map {
+    width: 100%;
+    border: none;
+    float: none;
+    height: 200px;
+    max-height: none;
+    min-height: auto;
+  }
+
+  /* Rules for the login form */
+
+  #login_login input#user_email {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_login input#user_password {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_login input#openid_url {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_openid_buttons td {
+    padding: 2px;
+  }
+
+  /* Rules for the user view */
+
+  .user_map {
+    width: 100% !important;
+    height: 300px !important;
+  }
+
+  #userinformation .deemphasize {
+    position: relative;
+    right: auto; left: auto;
+    margin-top: 10px;
+    top: auto;
+  }
+
+  /* Rules for the sign-up page */
+
+  .user-new,
+  .user-create {
+    .col6 {
+      width: 100%;
+    }
+
+    .aside {
+      display: none;
+    }
+  }
+
+  .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 "screen-#{dir}", :media => "screen" %>
-  <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 722px)" %>
   <%= 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( screen-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-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 )