Add SOTM advert

app/assets/javascripts/index.js

@@ -154,6 +154,15 @@ $(document).ready(function () {
     $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
   });
 
+  if ($.cookie('_osm_sotm') == 'hide') {
+    $('#sotm').hide();
+  }
+
+  $('#sotm .close').on('click', function() {
+    $('#sotm').hide();
+    $.cookie("_osm_sotm", 'hide', { expires: expiry });
+  });
+
   if ($.cookie('_osm_welcome') == 'hide') {
     $('.welcome').hide();
   }

app/assets/stylesheets/common.css.scss

@@ -2545,6 +2545,36 @@ input.richtext_title[type="text"] {
   }
 }
 
+#sidebar #sotm {
+  padding: 10px;
+  min-height: 120px;
+
+  img {
+    float: left;
+    width: 100px;
+    height: 100px;
+  }
+
+  h2 {
+    margin-left: 100px;
+    padding: 7px 10px 6px 15px;
+  }
+
+  p {
+    margin-left: 100px;
+    padding: 6px 10px 7px 15px;
+  }
+
+  a {
+    color: $darkgrey;
+  }
+
+  :hover {
+    text-decoration: none;
+    color: darken($darkgrey, 25%);
+  }
+}
+
 @import 'browse';
 
 @media only screen and (max-width:960px) {

app/views/layouts/map.html.erb

@@ -30,6 +30,21 @@
       <p class="error"><%= t 'layouts.osm_read_only' %></p>
     <% end %>
 
+    <div id="sotm">
+      <a href="http://www.stateofthemap.org/?l=en"><%= image_tag "sotm.png" %></a>
+      <h2>
+        <a><span class="icon close"></span></a>
+        <a href="http://www.stateofthemap.org/?l=en"><%= t 'layouts.sotm_header' %></a>
+      </h2>
+      <p><a href="http://www.stateofthemap.org/?l=en">
+        <%= t 'layouts.sotm_line_1' %>
+      <br />
+        <%= t 'layouts.sotm_line_2' %>
+      <br />
+        <%= t 'layouts.sotm_line_3' %>
+      </a></p>
+    </div>
+
     <div id="flash">
       <%= render :partial => "layouts/flash" %>
     </div>