Merge pull request #725 from cmv/enhancement/mobile-basemap-dropdown

Add conditional css to hide basemap text on small screens
cmv · May 26, 2017 · 07ffb1b · 07ffb1b
2 parents c9c56b5 + 565e210
commit 07ffb1b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/viewer/js/gis/dijit/Basemaps.js b/viewer/js/gis/dijit/Basemaps.js
@@ -44,7 +44,7 @@ define([
         widgetsInTemplate: true,
         i18n: i18n,
         title: i18n.title,
-
+        baseClass: 'basemapWidget',
         basemaps: {},
         currentBasemap: null,
         mapStartBasemap: null,
@@ -174,4 +174,4 @@ define([
             }
         }
     });
-});
+});
diff --git a/viewer/js/gis/dijit/Basemaps/css/Basemaps.css b/viewer/js/gis/dijit/Basemaps/css/Basemaps.css
@@ -1,14 +1,26 @@
-.selectedIcon:before {
-    font-family: FontAwesome;
-    content: "\f046";
+.basemapWidget .selectedIcon:before {
+  font-family: FontAwesome;
+  content: "\f046";
 }
 
-.emptyIcon:before {
-    font-family: FontAwesome;
-    content: "\f096";
+.basemapWidget .emptyIcon:before {
+  font-family: FontAwesome;
+  content: "\f096";
 }
 
-.basemapsIcon:before {
-    font-family: FontAwesome;
-    content: "\f009";
-}
+.basemapWidget .basemapsIcon:before {
+  font-family: FontAwesome;
+  content: "\f009";
+}
+
+
+/* condense dropdown on small screens */
+
+@media (max-width: 768px) {
+  .cmv .map .basemapWidget .dijitDropDownButton .dijitButtonNode {
+    padding: 4px 8px;
+  }
+  .cmv .map .basemapWidget .dijitButtonText {
+    display: none;
+  }
+}
diff --git a/viewer/js/gis/dijit/Basemaps/templates/Basemaps.html b/viewer/js/gis/dijit/Basemaps/templates/Basemaps.html
@@ -1,4 +1,4 @@
-<div>
+<div class="${baseClass}">
     <div data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'basemapsIcon'" data-dojo-attach-point="dropDownButton">
         <span>
             ${title}