groundwork for responsive menu

app/assets/javascripts/index.js

@@ -308,4 +308,8 @@ $(document).ready(function () {
       map.getCenter().lat.toFixed(precision) + "," +
       map.getCenter().lng.toFixed(precision)));
   });
+
+  $("#menu-icon").on("click", function() {
+    $("header").toggleClass("closed");
+  });
 });

app/assets/stylesheets/common.css.scss

@@ -237,6 +237,11 @@ table {
 
 /* Rules for the header */
 
+#menu-icon { 
+  display: none;
+  float: right; 
+}
+
 header {
   height: $headerHeight;
   position: relative;
@@ -433,7 +438,7 @@ nav.secondary {
 .count-number {
   padding: 2px $lineheight/4;
   border-radius: 2px;
-  background: #d7d7ff;
+  background: lighten($green, 30%);
   margin: 0 2px;
   font-size: 11px;
   color: #333;
@@ -1230,12 +1235,6 @@ a.donate {
   }
 }
 
-@media only screen and (max-width:900px) {
-  .header-illustration.new-user-arm {
-    display: none;
-  }
-}
-
 #content.maximised {
   top: 0;
   left: 0;
@@ -2576,3 +2575,10 @@ a.button {
 }
 
 @import 'browse';
+
+@media only screen and (max-width:960px) {
+  .header-illustration.new-user-arm {
+    display: none;
+  }
+}
+

app/assets/stylesheets/small.css.scss

@@ -1,5 +1,7 @@
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
+* { -webkit-appearance: none; }
+
 /* Default rules for the body of every page */
 
 .column-1 {
@@ -8,10 +10,74 @@
 
 /* Rules for the whole left sidebar, including the logo */
 
+#menu-icon {
+  display: inline-block;
+}
+
+
 nav.primary,
-nav.secondary,
+nav.secondary {
-#sidebar {
+  float: none !important;
+  position: relative;
+  display: block;
+  clear: both;
+}
+
+header {
+  min-height: 54px;
+  height: 100%;
+  background: #fff;
+  clear: both;
+  h1 { padding-bottom: 17px; }
+  &.closed {
+    nav.primary,
+    nav.secondary {
       display: none;
+    }
+  }
+}
+
+.mobile-hide { display: none !important; }
+
+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;
+      }
+    }
+  }
+}
+
+nav.secondary {
+  .user-menu {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+.map-layout {
+  #sidebar {
+    width: 60%;
+  }
+  #content {
+    position: static;
+    display: block;
+    height: 600px;
+  }
 }
 
 .content_map {

app/views/browse/changeset.html.erb

@@ -47,7 +47,11 @@
 <% end %>
 
 <% unless @ways.empty? %>
+<<<<<<< HEAD
   <div class='browse-section  paginate'>
+=======
+  <div class='browse-section clearfix paginate'>
+>>>>>>> groundwork for responsive menu
     <h4><%= t 'browse.changeset_details.has_ways', :count => @way_pages.item_count %></h4>
     <ul>
       <% @ways.each do |way| %>

app/views/layouts/_header.html.erb

@@ -5,11 +5,13 @@
       <%= t 'layouts.project_name.h1' %>
     </a>
   </h1>
+  <a href="#" id="menu-icon">menu</a>
   <nav class='primary'>
     <ul>
       <li id="view_tab" class="<%= current_page_class(root_path) %>">
         <%= link_to t('layouts.view'), root_path, :class => 'tab geolink layers' %>
-      </li><li id="edit_tab" class="dropdown <%= current_page_class(edit_path) %>">
+      </li>
+      <li id="edit_tab" class="mobile-hide dropdown <%= current_page_class(edit_path) %>">
       <%= link_to t('layouts.edit'), edit_path, :class => "tab geolink object",
                   :id => 'editanchor',
                   :data => { :editor => preferred_editor }

app/views/user/account.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  <h2><%= t 'user.account.my settings' %></h2>
+  <h1><%= t 'user.account.my settings' %></h1>
   <ul class='secondary-actions clearfix'>
     <li><%= link_to t('user.account.return to profile'), :controller => 'user', :action => 'view', :display_name => @user.display_name %></li>
     <li><%= link_to t('user.view.oauth settings'), :controller => 'oauth_clients', :action => 'index' %></li>

app/views/user/confirm.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  <h2><%= t 'user.confirm.heading' %></h2>
+  <h1><%= t 'user.confirm.heading' %></h1>
   <div class='header-illustration confirm-main'></div>
 <% end %>
 

app/views/user/no_such_user.html.erb

@@ -1,4 +1,4 @@
 <% content_for :heading do %>
-  <h2><%= t 'user.no_such_user.heading', :user => h(@not_found_user) %></h2>
+  <h1><%= t 'user.no_such_user.heading', :user => h(@not_found_user) %></h1>
 <% end %>
 <p><%= t 'user.no_such_user.body', :user => h(@not_found_user) %></p>

app/views/user/view.html.erb

@@ -2,7 +2,7 @@
   <div id='userinformation'>
     <%= user_image @this_user %>
     <div class='userinformation-inner'>
-      <h2><%= @this_user.display_name %><%= role_icons(@this_user) %></h2>
+      <h1><%= @this_user.display_name %><%= role_icons(@this_user) %></h1>
       <% if @user and @this_user.id == @user.id %>
         <!-- Displaying user's own profile page -->
         <ul class='secondary-actions clearfix'>