groundwork for responsive menu

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index a044937fc1158546bc3f6cff24bac50743bc2f13..2f644e00a8831fc8df569be4d04977e5b1cea9a3 100644 (file)
--- 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 5b6ddc5b50263628684caeb5a4b1386d09278bb8..46f67995514a91d72f017c100d9bb7e3ec783acd 100644 (file)
--- 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 e6d2c92d4447d573e1e93f549b9e5ba137c3836c..fb35aa6acc9e5352e5f6153919ce1aab7fc86a60 100644 (file)
--- 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 ac8a47069d4dd208a87de7dd06ca11d33e46ddc0..97cc3e0dbba69e0933d6b3e6c975fb40c6fc1abf 100644 (file)
--- 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 c08b61b574f4b9cd06063e67058166a0572fd5ff..b4dc5db6a74f64ffa31d1c2cfc21c07fd276a5d3 100644 (file)
--- 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 e5cbe22b538a5f53787a263d80ebf415d88f0d6d..94183ff4244d51fae61cdf1633bdc8e787469a52 100644 (file)
--- 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 31f29eb6428e72dfa1c8a3fcb19fb2e785b0f055..9fc33094e090dfa5d21034a4cebfad54c3f60fd8 100644 (file)
--- 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 d472f96b044224ce01f64ced662186d59bdde69a..062d18fb526a2947f23504bff095ce5ade2b35ab 100644 (file)
--- 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 274afa81f714b2084b7fd8bb38a35c35c952781b..104b1ec4acfb40fa0f7ad2ef717eddfe4e642111 100644 (file)
--- 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'>