From: Tom Hughes <tom@compton.nu>
Date: Wed, 22 Jul 2015 18:02:31 +0000 (+0100)
Subject: Make switch to compact and small modes dynamic
X-Git-Tag: live~4086
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/4dceacdeb?hp=e68b5db1404802c6a23b851a6b8daf51f4f952c7

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 354cfe66e..5064d115b 100644
--- 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 61975d5f6..6706aa6ed 100644
--- 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
index a02924a84..000000000
--- 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
index ae512fd42..000000000
--- 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
index 050272b77..000000000
--- 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 950e1214d..1865572a3 100644
--- 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 320737274..ee23358ce 100644
--- 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 81124455d..bb647b6a7 100644
--- 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 )