Add marker halo animation styles

diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index 10ad2607a5a4c5bbbc56b6df50892edff384ac54..18febde4d1d92b774ec2a0d6b3d464918d0db495 100644 (file)
--- 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 09af23edc00a74517871a801a7407bb6d32a567c..ae8262867bfb695b158558855c00ab8299a97cfc 100644 (file)
--- 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">