responsive secondary pages and fixed map

diff --git a/app/assets/images/menu-icon.png b/app/assets/images/menu-icon.png
new file mode 100644 (file)
index 0000000..da3f92c
Binary files /dev/null and b/app/assets/images/menu-icon.png differ

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e244d8b30f6cffabc9c456ddc3dd3ec1bff3d166..cecceaf3563b9bf210cff59669e4a7c73b1d1373 100644 (file)
--- 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 2f644e00a8831fc8df569be4d04977e5b1cea9a3..c6295cb10bb8dfc08e9cf97ac328a1c3d8a5d995 100644 (file)
--- 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 46f67995514a91d72f017c100d9bb7e3ec783acd..ca65a1b3d56440d0cd188bc544e234bcaee8b1d2 100644 (file)
--- 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 fb35aa6acc9e5352e5f6153919ce1aab7fc86a60..a92bf4ac5491aa1485520fcaf735fb886d9a8ba6 100644 (file)
--- 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 42a1a306e150fa42884a04688af72ccaa76ee97a..e142d00b8964943c357fce9b3928697bd99e92aa 100644 (file)
--- 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 b4dc5db6a74f64ffa31d1c2cfc21c07fd276a5d3..316349664344758cbcda454053a5f11eb5eb4dcd 100644 (file)
--- 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>