RTL fix for leaflet controls, Ad concept

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index cecceaf3563b9bf210cff59669e4a7c73b1d1373..e1c75d70f1f960baa4c89d53a5b295cc02fec021 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -134,4 +134,6 @@ $(document).ready(function () {
   $("#menu-icon").on("click", function() {
     $("header").toggleClass("closed");
   });
+
+  $('#ad .close').on("click", function() { $('#ad').remove(); });
 });

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 644c0a20cdcc1005ee9e045342a027d1c7d9a454..a2d3bb95555d4f2914e12576567bf9c2dfd4d7ea 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -115,6 +115,7 @@ body {
   margin: 0px;
   padding: 0px;
   text-align: left;
+  height: 100%;
 }
 
 body.slim {
@@ -145,6 +146,8 @@ small, aside {
   font-size: 12px;
 }
 
+#container { position: relative; }
+
 .column-1 {
   width: 50%;
   margin: 0 0 $lineheight/2 0;
@@ -240,7 +243,7 @@ table {
 #menu-icon { 
   display: none !important;
   float: right;
-  background: url("/assets/menu-icon.png") no-repeat;
+  background: image-url("menu-icon.png") no-repeat;
   background-size: 30px 30px;
   display: block;
   width: 30px;
@@ -447,6 +450,30 @@ nav.secondary {
   }
 }
 
+a#ad {
+  width: 100%;
+  display: block;
+  background: rgb(240,151,53);
+  z-index: 999;
+  padding: 1px $lineheight;
+  color: #fff;
+  font-size: 11px;
+  text-transform: uppercase;
+  span.close {
+    float: right;
+    color: #fff;
+    font-size: 10px;
+    line-height: 18px;
+    opacity: .5;
+    text-transform: none;
+    &:hover { opacity: .9; }
+  }
+  &:hover { 
+    background: rgb(220,151,53);
+    text-decoration: none; 
+  }
+}
+
 #compact-secondary-nav {
   display: none;
   ul li a {
@@ -690,6 +717,13 @@ nav.secondary {
       background: none;
       width: 78%;
     }
+
+    a#ad {
+      margin: 0 $lineheight;
+      width: 64%;
+      padding: 0 6px;
+      border-radius: 3px;
+    }
   }
 
   #map {
@@ -887,6 +921,10 @@ nav.secondary {
   }
 }
 
+#ad + #sidebar_content {
+  top: 70px;
+}
+
 #sidebar_content {
   position: absolute;
   top: 50px;

diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index 10ad2607a5a4c5bbbc56b6df50892edff384ac54..5c23477fecf5e482e87dd775f62abafed4ec676c 100644 (file)
--- a/app/assets/stylesheets/leaflet-all.css.scss
+++ b/app/assets/stylesheets/leaflet-all.css.scss
@@ -25,3 +25,14 @@ div.leaflet-marker-icon.location-filter.move-marker {
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }
+
+.leaflet-left .leaflet-control {
+       margin-left: 0;
+}
+
+.leaflet-top {
+       margin-top: 16px;
+       .leaflet-control {
+               margin-top: 0;
+       }
+}

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index d6ac18a66d8f884410d1cacff5fbe3b675a78206..c6467382a4d6ae3d87ad4a11b4d5f58d912f4065 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -27,6 +27,11 @@
       </div>
     <% end %>
 
+    <a id="ad" href="#">
+      <span class="ad-content">State of the Map 2014</span>
+      <span class="close">dismiss</span>
+    </a>
+
     <div id="sidebar_content">
       <% if STATUS == :database_offline or STATUS == :api_offline %>
         <p class="error"><%= t 'layouts.osm_offline' %></p>