Redo mobile styles

app/assets/javascripts/application.js

@@ -131,7 +131,8 @@ $(document).ready(function () {
   var auth_token = $("meta[name=csrf-token]").attr("content");
   $("form input[name=authenticity_token]").val(auth_token);
 
-  $("#menu-icon").on("click", function() {
+  $("#menu-icon").on("click", function(e) {
+    e.preventDefault();
     $("header").toggleClass("closed");
   });
 

app/assets/javascripts/index.js

@@ -234,11 +234,16 @@ $(document).ready(function () {
     var page = {};
 
     page.pushstate = page.popstate = function(path) {
-      $("#sidebar").addClass("minimized");
+      $("#content").addClass("overlay-sidebar");
       map.invalidateSize();
       $('#sidebar_content').load(path);
     };
 
+    page.unload = function() {
+      $("#content").removeClass("overlay-sidebar");
+      map.invalidateSize();
+    };
+
     return page;
   };
 
@@ -246,16 +251,12 @@ $(document).ready(function () {
     var page = {};
 
     page.pushstate = page.popstate = function(path, type, id) {
-      $("#sidebar").removeClass("minimized");
-      map.invalidateSize();
       $('#sidebar_content').load(path, function() {
         page.load(path, type, id);
       });
     };
 
     page.load = function(path, type, id) {
-      $("#sidebar").removeClass("minimized");
-
       if (OSM.STATUS === 'api_offline' || OSM.STATUS === 'database_offline') return;
 
       if (type === 'note') {
@@ -302,17 +303,4 @@ $(document).ready(function () {
       map.getCenter().lat.toFixed(precision) + "," +
       map.getCenter().lng.toFixed(precision)));
   });
-
-  function removeSidebar() {
-    if ($(window).width() < 721) {
-      $('#sidebar').addClass("minimized");
-    }
-  }
-
-  $(window).resize(function() {
-    removeSidebar();
-  });
-
-  removeSidebar();
-
 });

app/assets/javascripts/index/export.js

@@ -51,13 +51,10 @@ OSM.Export = function(map) {
 
   page.pushstate = page.popstate = function(path) {
     $("#export_tab").addClass("current");
-    $("#sidebar").removeClass("minimized");
-    map.invalidateSize();
     $("#sidebar_content").load(path, page.load);
   };
 
   page.load = function() {
-    $("#sidebar").removeClass("minimized");
     map
       .addLayer(locationFilter)
       .on("moveend", update);

app/assets/javascripts/index/history.js

@@ -99,12 +99,10 @@ OSM.History = function(map) {
 
   page.pushstate = page.popstate = function(path) {
     $("#history_tab").addClass("current");
-    map.invalidateSize();
     $("#sidebar_content").load(path, page.load);
   };
 
   page.load = function() {
-    $("#sidebar").removeClass("minimized");
     map
       .on("moveend", loadData)
       .addLayer(group);

app/assets/javascripts/index/search.js

@@ -49,12 +49,10 @@ OSM.Search = function(map) {
   page.pushstate = page.popstate = function(path) {
     var params = querystring.parse(path.substring(path.indexOf('?') + 1));
     $("#query").val(params.query);
-    map.invalidateSize();
     $("#sidebar_content").load(path, page.load);
   };
 
   page.load = function() {
-    $("#sidebar").removeClass("minimized");
     $(".search_results_entry").each(function() {
       var entry = $(this);
       $.ajax({

app/assets/stylesheets/common.css.scss

@@ -661,7 +661,7 @@ nav.secondary {
             transition: margin 300ms linear;
   }
 
-  #sidebar.minimized {
+  .overlay-sidebar #sidebar {
     position: absolute;
     z-index: 1000;
     height: auto;

app/assets/stylesheets/small.css.scss

@@ -1,21 +1,18 @@
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
 input[type="submit"],
-input[type="text"] { -webkit-appearance: none; }
+input[type="text"] {
-
+  -webkit-appearance: none;
-/* Default rules for the body of every page */
+}
 
 .column-1 {
   width: 100%;
 }
 
-/* Rules for the whole left sidebar, including the logo */
-
 #menu-icon {
   display: inline-block !important;
 }
 
-
 nav.primary,
 nav.secondary {
   float: none !important;
@@ -25,32 +22,32 @@ nav.secondary {
 }
 
 header {
-  min-height: 54px;
   height: auto;
   background: #fff;
-  border-bottom: 1px solid #ddd;
+
-  clear: both;
+  h1 {
-  position: fixed;
+    padding-bottom: 15px;
-  width: 100%;
+  }
-  top: 0;
+
-  h1 { padding-bottom: 15px; }
+  &.closed nav {
-  &.closed {
+    display: none;
-    nav.primary,
-    nav.secondary {
-      display: none;
-    }
   }
 }
 
-.mobile-hide { display: none !important; }
+#edit_tab,
+#export_tab {
+  display: none;
+}
 
 nav.primary {
   padding: 0;
+
   ul, li {
     border: none;
     border-radius: 0;
     width: 100%;
   }
+
   ul {
     border-top: 1px solid #eee;
     li {
@@ -67,6 +64,8 @@ nav.primary {
 }
 
 nav.secondary {
+  border-bottom: 1px solid #eee;
+
   .user-menu {
     display: block;
     width: 100%;
@@ -84,42 +83,29 @@ nav.secondary {
 #compact-secondary-nav {
   display: none;
 }
+
 .compact-hide {
   display: inline-block;
 }
 
-#content { margin-top: 58px; }
-
 .map-layout {
-  #sidebar {
+  #sidebar, #map {
-    width: 100%;
+    position: relative;
-    position: fixed;
-    top: 58px;
-    height: 240px;
     overflow-x: hidden;
-    z-index: 1;
-    background: #fff;
-    p.large-text {
-      font-size: 1.2em;
-      line-height: 1.4em;
-    }
-    &.minimized {
-      background: none;
-    }
-  }
-  #content {
-    position: fixed;
-    top: 0;
-    display: block;
-    height: 100%;
-    margin-top: 0;
-    padding-top: 58px;
-  }
-  #map {
     width: 100%;
-    // height: 100%;
+    height: 50%;
-    // position: fixed;
   }
+
+  .overlay-sidebar {
+    #sidebar {
+      width: 300px;
+    }
+
+    #map {
+      height: 100%;
+    }
+  }
+
   #map-ui {
     z-index: 9999;
     width: 100%;

app/views/layouts/_content.html.erb

@@ -1,4 +1,4 @@
-<div id="content">
+<div id="content" class="<%= content_for :content_class %>">
   <% if content_for? :content %>
     <%= yield :content %>
   <% else %>

app/views/layouts/_header.html.erb

@@ -8,7 +8,7 @@
   <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <ul>
-      <li id="edit_tab" class="mobile-hide dropdown <%= current_page_class(edit_path) %>">
+      <li id="edit_tab" class="dropdown <%= current_page_class(edit_path) %>">
         <%= link_to t('layouts.edit'), edit_path, :class => "tab geolink object",
                     :id => 'editanchor',
                     :data => { :editor => preferred_editor }
@@ -27,7 +27,7 @@
       <li id="history_tab" class="<%= current_page_class(history_path) %>">
         <%= link_to t('layouts.history'), history_path, :class => 'tab geolink' %>
       </li>
-      <li id="export_tab" class="mobile-hide <%= current_page_class(export_path) %>">
+      <li id="export_tab" class="<%= current_page_class(export_path) %>">
         <%= link_to t('layouts.export'), export_path, :class => 'tab geolink' %>
       </li>
     </ul>

app/views/layouts/map.html.erb

@@ -17,7 +17,7 @@
 <% end %>
 
 <% content_for :content do %>
-  <div id="sidebar" class="minimized">
+  <div id="sidebar">
     <%= form_tag search_path, :id => "search_form" do %>
       <%= submit_tag t('site.search.submit_text') %>
       <div id='query_wrapper'>

app/views/site/index.html.erb

@@ -1,3 +1,5 @@
+<% content_for(:content_class) { "overlay-sidebar" } %>
+
 <% unless @user %>
   <div class="welcome">
     <h2><%= t 'layouts.intro_header' %></h2>