changed "here" button to icon and added location help text

azgs · Oct 1, 2015 · 019105c · 019105c
1 parent ffef57a
commit 019105c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git a/images/geolocate-center.png b/images/geolocate-center.png
diff --git a/images/help.png b/images/help.png
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
         <script src="vendor/html5shiv.js"></script>
         <script src="vendor/respond.min.js"></script>
     <![endif]-->
-	
+
 	</head>
   <body>
   	<div id="map"></div>
@@ -138,7 +138,7 @@ <h4><%= data.properties.source %></h4>
           <% } %>
 
           <table class="table">
-            <tbody
+            <tbody>
             <tr>
               <td class="contact-info">
                 <%= data.properties.street %><br>
@@ -190,18 +190,42 @@ <h5><strong>Owner: </strong><%= data.properties.owner %></h5>
             <div class="form-group">
                <div class="input-group">
                   <input type="text" class="form-control" id="geo-start" placeholder="Enter starting location ... ">
-                  <span class="input-group-btn">
-                    <button class="btn btn-default" type="button" onclick="setMyLocation('from');">Here</button>
+                  <span class="input-group-btn directions-btn">
+                    <button class="btn btn-default" type="button" onclick="setMyLocation('from');">
+                      <img src='images/geolocate-center.png' width='18' height='18'>
+                    </button>
+                    <button class="btn btn-default" type="button" onclick="toggleHints();">
+                      <img src='images/help.png' width='18' height='18'>
+                    </button>
                   </span>
               </div>
             </div>
             <div class="form-group">
               <div class="input-group">
                 <input type="text" class="form-control" id="geo-destination" placeholder="Enter destination ...">
-                <span class="input-group-btn">
-                  <button class="btn btn-default" type="button" onclick="setMyLocation('to');">Here</button>
+                <span class="input-group-btn directions-btn">
+                  <button class="btn btn-default" type="button" onclick="setMyLocation('to');">
+                    <img src='images/geolocate-center.png' width='18' height='18'>
+                  </button>
+                  <button class="btn btn-default" type="button" onclick="toggleHints();">
+                    <img src='images/help.png' width='18' height='18'>
+                  </button>
                 </span>
               </div>
+              <div id="location-hints" class="location-hints">
+                Use the following formats to input a location:<br>
+                <ul>
+                  <li>
+                    city, state OR zip code OR street, city, state OR lat, long
+                  </li>
+                  <li>
+                    farm name, eg. Windy Hills Lavender
+                  </li>
+                  <li>
+                    Use <img src='images/geolocate-center.png' width='14' height='14'> for your current location
+                  </li>
+                </ul>
+              </div>
             </div>
 						<div class="btn-group btn-group-justified">
 							<div class="btn-group">
@@ -213,7 +237,7 @@ <h5><strong>Owner: </strong><%= data.properties.owner %></h5>
 						</div>
           </form>
         </div>
-        <div class="tab-pane" id="show-directions">
+        <div class="tab-pane" id="show-directions"></div>
       </div>
     </script>
 
@@ -253,6 +277,15 @@ <h5><strong>Owner: </strong><%= data.properties.owner %></h5>
         if (dir == 'to')
           $('#geo-destination').val('My location');
       }
+
+      function toggleHints() {
+        var d = document.getElementById('location-hints');
+        var displaySetting = d.style.display;
+        if (displaySetting == 'block')
+          d.style.display = 'none';
+        else
+          d.style.display = 'block';
+      }
     </script>
 
   	<script src="vendor/leaflet-0.7.2.js"></script>

diff --git a/style/base.css b/style/base.css
@@ -69,9 +69,19 @@ h5.subtitle {
 	font-style: italic;
 }
 
+.directions-btn {
+  vertical-align: top;
+}
+
+.location-hints  {
+  display: none;
+  font-size: smaller;
+  font-style: italic;
+}
+
 /* Typeahead */
 .twitter-typeahead { 
-	width: 100%; 
+	width: 100%;
 }
 .typeahead {
 	background-color: #FFFFFF;