hotspots: Add friendly whale illustration to popover.

static/js/hotspots.js

@@ -33,6 +33,10 @@ var HOTSPOT_LOCATIONS = {
     },
 };
 
+// popover illustration url(s)
+var WHALE = '/static/images/hotspots/whale.svg';
+
+
 exports.map_hotspots_to_DOM = function (hotspots, locations) {
     hotspots.forEach(function (hotspot) {
         hotspot.location = locations[hotspot.name];
@@ -216,6 +220,7 @@ function insert_hotspot_into_DOM(hotspot) {
         name: hotspot.name,
         title: hotspot.title,
         description: hotspot.description,
+        img: WHALE,
     });
 
     var hotspot_icon_HTML =

static/styles/hotspots.css

@@ -72,18 +72,26 @@
     color: white;
 }
 
-.hotspot.overlay .hotspot-popover-bottom {
+.hotspot.overlay .hotspot-popover-content {
     background-color: white;
     padding: 15px;
-    height: 130px;
+}
+
+.hotspot.overlay .hotspot-popover-bottom {
+    background-color: white;
+    height: 90px;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
-.hotspot.overlay .hotspot-confirm {
+.hotspot.overlay .hotspot-img {
     position: absolute;
-    bottom: 18px;
-    right: 18px;
+    bottom: 10px;
+    left: 4px;
+    height: 83px;
+}
+
+.hotspot.overlay .hotspot-confirm {
     border: none;
     background-color: hsl(164, 44%, 47%);
     color: white;
@@ -92,6 +100,9 @@
     width: 70px;
     height: 28px;
     border-radius: 4px;
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
 }
 
 /* arrows */

static/templates/hotspot_overlay.handlebars

@@ -3,9 +3,12 @@
         <div class="hotspot-popover-top">
             <h1 class="hotspot-title">{{title}}</h1>
         </div>
-        <div class="hotspot-popover-bottom">
+        <div class="hotspot-popover-content">
             <p class="hotspot-description">{{description}}</p>
         </div>
-        <button class="hotspot-confirm">{{t 'Got it!' }}</button>
+        <div class="hotspot-popover-bottom">
+            <img class="hotspot-img" alt=_("hotspot illustration") src="{{img}}"></img>
+            <button class="hotspot-confirm">{{t 'Got it!' }}</button>
+        </div>
     </div>
 </div>