From 537d72b0f66562475808249a1a2ef3223df5dd52 Mon Sep 17 00:00:00 2001
From: Eden Halperin <eden.halperin@gmail.com>
Date: Wed, 6 Nov 2013 12:57:01 -0500
Subject: [PATCH] responsive secondary pages and fixed map

---
 app/assets/images/menu-icon.png        | Bin 0 -> 2983 bytes
 app/assets/javascripts/application.js  |   4 ++
 app/assets/javascripts/index.js        |   3 --
 app/assets/stylesheets/common.css.scss |   9 ++++-
 app/assets/stylesheets/small.css.scss  |  53 ++++++++++++++++++++++---
 app/views/geocoder/search.html.erb     |   5 ++-
 app/views/layouts/_header.html.erb     |   6 +--
 7 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/images/menu-icon.png

diff --git a/app/assets/images/menu-icon.png b/app/assets/images/menu-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..da3f92c5d9b2bef49ae99c106ee68eb058664881
GIT binary patch
literal 2983
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

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e244d8b30..cecceaf35 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -130,4 +130,8 @@ function minimiseMap() {
 $(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() {
+    $("header").toggleClass("closed");
+  });
 });
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2f644e00a..c6295cb10 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -309,7 +309,4 @@ $(document).ready(function () {
       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 46f679955..ca65a1b3d 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -239,7 +239,14 @@ table {
 
 #menu-icon { 
   display: none;
-  float: right; 
+  float: right;
+  background: url("/assets/menu-icon.png") no-repeat;
+  background-size: 30px 30px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  margin: 14px 10px 0 0;
+  opacity: 0.6;
 }
 
 header {
diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index fb35aa6ac..a92bf4ac5 100644
--- a/app/assets/stylesheets/small.css.scss
+++ b/app/assets/stylesheets/small.css.scss
@@ -25,10 +25,14 @@ nav.secondary {
 
 header {
   min-height: 54px;
-  height: 100%;
+  height: auto;
   background: #fff;
+  border-bottom: 1px solid #ddd;
   clear: both;
-  h1 { padding-bottom: 17px; }
+  position: fixed;
+  width: 100%;
+  top: 0;
+  h1 { padding-bottom: 15px; }
   &.closed {
     nav.primary,
     nav.secondary {
@@ -66,20 +70,55 @@ nav.secondary {
     display: block;
     width: 100%;
     margin-left: 0;
+    > li {
+      width: 49%;
+      > a { 
+        width: 100%; 
+        text-align: center;
+      }
+    }
   }
 }
 
+#content { margin-top: 58px; }
+
 .map-layout {
   #sidebar {
-    width: 60%;
+    width: 100%;
+    position: fixed;
+    top: 58px;
+    height: 360px;
+    overflow-x: hidden;
+    z-index: 1;
+    background: #fff;
+    p.large-text {
+      font-size: 1.4em;
+      line-height: 1.5em;
+    }
+    &.minimized {
+      background: none;
+    }
   }
   #content {
-    position: static;
+    position: fixed;
+    top: 0;
     display: block;
-    height: 600px;
+    height: 100%;
+    margin-top: 0;
+    padding-top: 58px;
+  }
+  #map {
+    width: 100%;
+    // height: 100%;
+    // position: fixed;
   }
 }
 
+.leaflet-top.leaflet-right {
+  top: 10px !important;
+  z-index: 0;
+}
+
 .content_map {
   width: 100%;
   border: none;
@@ -161,3 +200,7 @@ nav.secondary {
     display: none;
   }
 }
+
+.site-about #content .attr h1 {
+  font-size: 28px;
+}
diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb
index 42a1a306e..e142d00b8 100644
--- a/app/views/geocoder/search.html.erb
+++ b/app/views/geocoder/search.html.erb
@@ -1,4 +1,7 @@
-<h2><%= t('site.sidebar.search_results') %></h2>
+<h2>
+	<%= t('site.sidebar.search_results') %>
+	<span class="icon close"></span>
+</h2>
 <% @sources.each do |source| %>
   <h4 class="inner12"><%= raw(t "geocoder.search.title.#{source}") %></h4>
   <div class="search_results_entry" data-href="<%= url_for params.merge(:action => "search_#{source}") %>">
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index b4dc5db6a..316349664 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,11 +1,11 @@
-<header>
+<header class="closed">
   <h1>
     <a href="<%= root_path %>" class="geolink layers">
       <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
       <%= t 'layouts.project_name.h1' %>
     </a>
   </h1>
-  <a href="#" id="menu-icon">menu</a>
+  <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <ul>
       <li id="view_tab" class="<%= current_page_class(root_path) %>">
@@ -28,7 +28,7 @@
       </ul>
       </li><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="<%= current_page_class(export_path) %>">
+      </li><li id="export_tab" class="mobile-hide <%= current_page_class(export_path) %>">
         <%= link_to t('layouts.export'), export_path, :class => 'tab geolink' %>
       </li>
     </ul>
-- 
2.43.2