From 6ba4c36f6a5709dcc4f642e0cbf2d059b677e912 Mon Sep 17 00:00:00 2001
From: Scott Davis <stdavis@utah.gov>
Date: Tue, 30 May 2017 09:02:54 -0600
Subject: [PATCH] Better mobile button styling and placement

Closes #152
---
 lib/app/App.js             |  2 ++
 lib/app/resources/App.styl | 27 +++++++++++++++------------
 lib/app/templates/App.html | 23 +++++++++++++++--------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/lib/app/App.js b/lib/app/App.js
index 996f749..71c0214 100644
--- a/lib/app/App.js
+++ b/lib/app/App.js
@@ -121,6 +121,8 @@ define([
 
             domClass.toggle(this.sideBar, 'expanded');
             domClass.toggle(this.mapDiv, 'hidden');
+            domClass.toggle(this.mobileBtnSpan, 'glyphicon-menu-hamburger');
+            domClass.toggle(this.mobileBtnSpan, 'glyphicon-globe');
         },
         startup: function () {
             // summary:
diff --git a/lib/app/resources/App.styl b/lib/app/resources/App.styl
index 463e672..b651aec 100644
--- a/lib/app/resources/App.styl
+++ b/lib/app/resources/App.styl
@@ -55,18 +55,6 @@ html, body, .app
             color @color
         img.logo
             padding-top 10px
-        >p
-            text-align center
-        .mobile-menu-btn
-            display none
-            visibility hidden
-            @media $mobile-media-query
-                display inline-block
-                visibility visible
-                float right
-                background transparent
-                border none
-                color #FFFFFF
         @media $mobile-media-query
             width 100%
             max-height $mobile-header-height
@@ -76,6 +64,21 @@ html, body, .app
             &.expanded
                 max-height 100%
                 overflow-y scroll
+        .help-container
+            display flex
+            align-items center
+            justify-content space-between
+            .mobile-menu-btn
+                display none
+                visibility hidden
+                @media $mobile-media-query
+                    visibility visible
+                    display inherit
+                    font-size 17px
+                    padding 6px 7px
+                    border-color #57585A
+                    border-radius 5px
+                    margin 10px 0 10px 10px
         .footer-links
             display flex
             font-size .8em
diff --git a/lib/app/templates/App.html b/lib/app/templates/App.html
index 73b40bd..f76a255 100644
--- a/lib/app/templates/App.html
+++ b/lib/app/templates/App.html
@@ -8,13 +8,19 @@
         </ul>
         <hr>
 
-        <button type='button' class='btn btn-default btn-xs mobile-menu-btn'
-            data-dojo-attach-event='click: toggleMobilePane'>
-            <span class="glyphicon glyphicon-menu-hamburger"></span>
-        </button>
-        <p>
-            Click on the map to get information about the current location.
-        </p>
+        <div class='help-container'>
+            <p class='map-help'>
+                Click on the map to get information about the current location.
+            </p>
+            <button type='button' class='btn btn-default btn-xs mobile-menu-btn'
+                data-dojo-attach-event='click: toggleMobilePane'>
+                <span data-dojo-attach-point='mobileBtnSpan'
+                    class="glyphicon glyphicon-menu-hamburger"></span>
+            </button>
+        </div>
+        <!-- <p class='mobile-menu-help'>
+            Click on the
+        </p> -->
         <div data-dojo-attach-point='layersDiv' class='layers'></div>
 
         <ul>
@@ -45,6 +51,7 @@
             <li><a href="http://www.utah.gov/translate.html" target='_blank'>Translate</a></li>
         </ul>
     </div>
-    <div data-dojo-attach-point="mapDiv" class='map'></div>
+    <div data-dojo-attach-point="mapDiv" class='map'>
+    </div>
     <div data-dojo-attach-point='sherlockMatchesTableContainer' class='sherlock'></div>
 </div>