From 582ab35ecd0b0cfacaedf8cbe1d6eadff302973b Mon Sep 17 00:00:00 2001
From: Eden Halperin <eden.halperin@gmail.com>
Date: Wed, 6 Nov 2013 10:29:52 -0500
Subject: [PATCH] groundwork for responsive menu

---
 app/assets/javascripts/index.js        |  4 ++
 app/assets/stylesheets/common.css.scss | 20 ++++---
 app/assets/stylesheets/small.css.scss  | 72 ++++++++++++++++++++++++--
 app/views/browse/changeset.html.erb    |  4 ++
 app/views/layouts/_header.html.erb     |  4 +-
 app/views/user/account.html.erb        |  2 +-
 app/views/user/confirm.html.erb        |  2 +-
 app/views/user/no_such_user.html.erb   |  2 +-
 app/views/user/view.html.erb           |  2 +-
 9 files changed, 97 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index a044937fc..2f644e00a 100644
--- a/app/assets/javascripts/index.js
+++ b/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");
+  });
 });
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 5b6ddc5b5..46f679955 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/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;
+  }
+}
+
diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index e6d2c92d4..fb35aa6ac 100644
--- a/app/assets/stylesheets/small.css.scss
+++ b/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,
-#sidebar {
-  display: none;
+nav.secondary {
+  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 {
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index ac8a47069..97cc3e0db 100644
--- a/app/views/browse/changeset.html.erb
+++ b/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| %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index c08b61b57..b4dc5db6a 100644
--- a/app/views/layouts/_header.html.erb
+++ b/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 }
diff --git a/app/views/user/account.html.erb b/app/views/user/account.html.erb
index e5cbe22b5..94183ff42 100644
--- a/app/views/user/account.html.erb
+++ b/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>
diff --git a/app/views/user/confirm.html.erb b/app/views/user/confirm.html.erb
index 31f29eb64..9fc33094e 100644
--- a/app/views/user/confirm.html.erb
+++ b/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 %>
 
diff --git a/app/views/user/no_such_user.html.erb b/app/views/user/no_such_user.html.erb
index d472f96b0..062d18fb5 100644
--- a/app/views/user/no_such_user.html.erb
+++ b/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>
diff --git a/app/views/user/view.html.erb b/app/views/user/view.html.erb
index 274afa81f..104b1ec4a 100644
--- a/app/views/user/view.html.erb
+++ b/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'>
-- 
2.43.2