Better mobile button styling and placement

Closes #152
agrc · Jun 13, 2017 · 82155d3 · 82155d3
1 parent 17f81c3
commit 82155d3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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>