From: Eden Halperin <eden.halperin@gmail.com>
Date: Tue, 12 Nov 2013 16:12:28 +0000 (-0500)
Subject: Add marker halo animation styles
X-Git-Tag: live~5173^2~115
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/721e32b5cea97930cc96fba3b4bf295935943c0b

Add marker halo animation styles
---

diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index 10ad2607a..18febde4d 100644
--- a/app/assets/stylesheets/leaflet-all.css.scss
+++ b/app/assets/stylesheets/leaflet-all.css.scss
@@ -25,3 +25,34 @@ div.leaflet-marker-icon.location-filter.move-marker {
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }
+
+img.leaflet-marker-icon:after {
+  content:'';
+  position:absolute; left:50%; top:50%;
+  margin:-30px 0 0 -30px;
+  width:59px;
+  height:59px;
+  display:block;
+  background:rgba(0,0,0,0.2);
+  border:2px solid rgba(0,0,0,0.6);
+  border-radius:50%;
+  opacity:0;
+  -webkit-animation:place-tmp 2000ms infinite;
+     -moz-animation:place-tmp 2000ms infinite;
+          animation:place-tmp 2000ms infinite;
+  @-webkit-keyframes place-tmp {
+    0%   { opacity:1; -webkit-transform:scale(0); }
+    50%  { opacity:0; -webkit-transform:scale(1); }
+    100% { opacity:0; -webkit-transform:scale(1); }
+  }
+  @-moz-keyframes place-tmp {
+    0%   { opacity:1; -moz-transform:scale(0); }
+    50%  { opacity:0; -moz-transform:scale(1); }
+    100% { opacity:0; -moz-transform:scale(1); }
+  }
+  @keyframes place-tmp {
+    0%   { opacity:1; transform:scale(0); }
+    50%  { opacity:0; transform:scale(1); }
+    100% { opacity:0; transform:scale(1); }
+  }
+}
\ No newline at end of file
diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb
index 09af23edc..ae8262867 100644
--- a/app/views/browse/new_note.html.erb
+++ b/app/views/browse/new_note.html.erb
@@ -6,7 +6,7 @@
 </h2>
 
 <div class="note browse-section">
-  <p><%= t('javascripts.notes.new.intro') %></p>
+  <h4><%= t('javascripts.notes.new.intro') %></h4>
   <form action="#">
     <input type="hidden" name="lon">
     <input type="hidden" name="lat">