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

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

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 61975d5f6fe71f62e4db77ff1cf90a8815c43b4a..6706aa6ed9321b5e5c6ce5b14003a046ba91d3f3 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/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;
   }
 }
-

diff --git a/app/assets/stylesheets/large-ltr.css b/app/assets/stylesheets/large-ltr.css
deleted file mode 100644 (file)
index a02924a..0000000
--- a/app/assets/stylesheets/large-ltr.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- *= require ltr/common
- *= require bootstrap
- *= require large
- */

diff --git a/app/assets/stylesheets/large-rtl.css b/app/assets/stylesheets/large-rtl.css
deleted file mode 100644 (file)
index ae512fd..0000000
--- a/app/assets/stylesheets/large-rtl.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- *= require rtl/common
- *= require bootstrap
- *= require large
- */

diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css
deleted file mode 100644 (file)
index 050272b..0000000
--- a/app/assets/stylesheets/large.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Styles specific to large screens  */

diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/screen-ltr.css
similarity index 100%
rename from app/assets/stylesheets/small-ltr.css
rename to app/assets/stylesheets/screen-ltr.css

diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/screen-rtl.css
similarity index 100%
rename from app/assets/stylesheets/small-rtl.css
rename to app/assets/stylesheets/screen-rtl.css

diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 950e1214d5ff6a1b3d0b600a8326c534da139114..1865572a3acbe7f5d7865ffb95d8f1015bfe9359 100644 (file)
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -2,191 +2,195 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-input[type="submit"],
-input[type="text"] {
-  -webkit-appearance: none;
-}
-
-.column-1 {
-  width: 100%;
-}
-
-#menu-icon {
-  display: inline-block !important;
-}
+body.small {
 
-nav.primary,
-nav.secondary {
-  float: none !important;
-  position: relative;
-  display: block;
-  clear: both;
-}
-
-header {
-  height: auto;
-  min-height: $headerHeight;
-  background: #fff;
+  input[type="submit"],
+  input[type="text"] {
+    -webkit-appearance: none;
+  }
 
-  h1 {
-    padding-bottom: 15px;
+  .column-1 {
+    width: 100%;
   }
 
-  &.closed nav {
-    display: none;
+  #menu-icon {
+    display: inline-block !important;
   }
 
-  .search_forms {
+  nav.primary,
+  nav.secondary {
+    float: none !important;
+    position: relative;
     display: block;
+    clear: both;
   }
-}
 
-#sidebar .search_forms,
-#edit_tab,
-#export_tab {
-  display: none;
-}
+  header {
+    height: auto;
+    min-height: $headerHeight;
+    background: #fff;
 
-nav.primary {
-  padding: 0;
+    h1 {
+      padding-bottom: 15px;
+    }
 
-  ul, li {
-    border: none;
-    border-radius: 0;
-    width: 100%;
-  }
+    &.closed nav {
+      display: none;
+    }
 
-  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;
-      }
+    .search_forms {
+      display: block;
     }
   }
-}
 
-nav.secondary {
-  border-bottom: 1px solid #eee;
+  #sidebar .search_forms,
+  #edit_tab,
+  #export_tab {
+    display: none;
+  }
 
-  .user-menu {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    > li {
-      width: 49%;
-      > a { 
-        width: 100%; 
-        text-align: center;
+  nav.primary {
+    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;
+        }
       }
     }
   }
-}
 
-#compact-secondary-nav {
-  display: none;
-}
+  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-hide {
-  display: inline-block;
-}
+  #compact-secondary-nav {
+    display: none;
+  }
 
-.map-layout {
-  #sidebar, #map {
-    position: relative;
-    overflow-x: hidden;
-    width: 100%;
-    height: 50%;
+  .compact-hide {
+    display: inline-block;
   }
 
-  .overlay-sidebar {
-    #sidebar {
-      width: 300px;
+  .map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
     }
 
-    #map {
-      height: 100%;
+    .overlay-sidebar {
+      #sidebar {
+        width: 300px;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
     }
   }
 
-  #map-ui {
-    z-index: 9999;
-    width: 100%;
-    overflow-y: scroll;
+  #sidebar .welcome {
+    display: none !important;
   }
-}
 
-#sidebar .welcome {
-  display: none !important;
-}
+  .leaflet-top.leaflet-right {
+    top: 10px !important;
+    z-index: 0;
+  }
 
-.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;
+  }
 
-.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 {
+    width: 100%;
+    max-width: 18em;
+  }
 
-#login_login input#user_email {
-  width: 100%;
-  max-width: 18em;
-}
+  #login_login input#user_password {
+    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_login input#openid_url {
-  width: 100%;
-  max-width: 18em;
-}
+  #login_openid_buttons td {
+    padding: 2px;
+  }
 
-#login_openid_buttons td {
-  padding: 2px;
-}
+  /* Rules for the user view */
 
-/* Rules for the user view */
+  .user_map {
+    width: 100% !important;
+    height: 300px !important;
+  }
 
-.user_map {
-  width: 100% !important;
-  height: 300px !important;
-}
+  #userinformation .deemphasize {
+    position: relative;
+    right: auto; left: auto;
+    margin-top: 10px;
+    top: auto;
+  }
 
-#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 {
+    .col6 {
+      width: 100%;
+    }
 
-.user-new,
-.user-create {
-  .col6 {
-    width: 100%;
+    .aside {
+      display: none;
+    }
   }
 
-  .aside {
-    display: none;
+  .site-about #content .attr h1 {
+    font-size: 28px;
   }
-}
 
-.site-about #content .attr h1 {
-  font-size: 28px;
 }

diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 32073727455f39ad5f87138c122075707b4014a9..ee23358cebde090886a161f3886bff1feda51ef7 100644 (file)
--- a/app/views/layouts/_head.html.erb
+++ b/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]>

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 81124455d1fc6c8434adf972c2ce65f81108d273..bb647b6a75c5c134f4796eae2df59945d9b693e7 100644 (file)
--- a/config/initializers/assets.rb
+++ b/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 )