add buttons for locations in Maldives (part of #863)

The underlying problem here is the target area is currently too small
for the geocoder to be useful: we're not really getting anything useful
back from the OSM geocoder within Fonadhoo. So I've manually located
the three villages on the island and added them as buttons... this is
really for interface because although one button for the whole island
is probably OK, basically it was just replicating the <h1> and wasn't
obvious (or sensible) that the user needed to hit a button at all..

If the project expands to more areas of the Maldives we can either take
those out or revert to the geocoder.

The same too-small-area logic makes the "locate me automatically" a
bit silly, so that's been dropped from the front page too.

4 files changed, 49 insertions, 2 deletions

diff --git a/templates/web/base/index-steps.html b/templates/web/base/index-steps.html
index 431791c20..fac84faba 100644
--- a/templates/web/base/index-steps.html
+++ b/templates/web/base/index-steps.html
@@ -21,8 +21,15 @@
     <li>Or visit the Barangay Center in person</li>
     <li>Staff? <a href="/auth">Sign in</a> and click on the map!
 [% ELSE %]
-    <li>[% question %]</li>
-    <li>[% loc('Locate the problem on a map of the area') %]</li>
+    [% IF c.cobrand.moniker == 'makemyisland' %]
+      <li>
+        Locate the problem on the
+        <a href="/around?pc=Fonadhoo">map of the island</a>
+      </li>
+    [% ELSE %]
+      <li>[% question %]</li>
+      <li>[% loc('Locate the problem on a map of the area') %]</li>
+    [% END %]
     <li>[% loc('Enter details of the problem') %]</li>
     [% IF c.cobrand.is_council %]
         <li>Confirm the report and [% c.cobrand.council_name %] will investigate</li>
diff --git a/templates/web/makemyisland/_location_buttons.html b/templates/web/makemyisland/_location_buttons.html
new file mode 100644
index 000000000..3604c466f
--- /dev/null
+++ b/templates/web/makemyisland/_location_buttons.html
@@ -0,0 +1,15 @@
+<div id="location-buttons">
+    <!-- 
+      Fonadhoo (the island)
+      Barasil (northern most)
+      Medhuavah (in the middle)
+      Kurigam (south)
+    -->
+    <div class="island-button">
+      <a href="/around?pc=Fonadhoo" class="front-page-button">Fonadhoo island</a>
+    </div>
+    <a href="/around?latitude=1.846;longitude=73.510" class="front-page-button">Barasil</a>    
+    <a href="/around?latitude=1.833;longitude=73.501" class="front-page-button">Medhuavah</a>
+    <a href="/around?latitude=1.822;longitude=73.488" class="front-page-button">Kurigam</a>
+
+</div>
diff --git a/templates/web/makemyisland/around/postcode_form.html b/templates/web/makemyisland/around/postcode_form.html
new file mode 100644
index 000000000..81cf948ef
--- /dev/null
+++ b/templates/web/makemyisland/around/postcode_form.html
@@ -0,0 +1,8 @@
+<div id="front-main">
+    <div id="front-main-container">
+        <h1>Report, view, or discuss local problems</h1>
+        <h2>(dumping waste, street lighting, erosion)</h2>
+        [% INCLUDE '_location_buttons.html' %]
+    </div>
+</div>
+
diff --git a/web/cobrands/makemyisland/base.scss b/web/cobrands/makemyisland/base.scss
index 7e136bf52..7cf028ceb 100644
--- a/web/cobrands/makemyisland/base.scss
+++ b/web/cobrands/makemyisland/base.scss
@@ -20,3 +20,20 @@ body.mappage #site-header,
     @include background(none);
     background-color: $blue;
 }
+ 
+div#location-buttons {
+  margin: 1.333em auto;
+  .island-button {
+    margin:0 auto 1.5em auto;
+  }
+  a.front-page-button {
+    // @include button-reset(#FFD000, #cc9000, #aa7000, #300, #FFD000, #cc9000, #aa7000, #300);
+    @include button-reset($blue, darken($blue, 10%), darken($blue, 30%), white, $blue, darken($blue, 20%), darken($blue, 30%), white);
+    #front-main & {
+      text-decoration: none;
+    }
+    &:visited, &:hover {
+      color:white;
+    }
+  }  
+}