Optimize for tablets

flaretailjs · Mar 29, 2014 · 0d2b904 · 0d2b904
1 parent e360ac6
commit 0d2b904
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 24 deletions.
diff --git a/scripts/flaretail.util.js b/scripts/flaretail.util.js
@@ -171,24 +171,18 @@ FlareTail.util.Storage = function () {
  * ---------------------------------------------------------------------------------------------- */
 
 FlareTail.util.device = {
-  mobile: {
-    mql: window.matchMedia('(max-width: 640px)')
-  },
   touch: {
     enabled: window.matchMedia('(-moz-touch-enabled: 1)').matches
   }
 };
 
-{
-  let ua = navigator.userAgent,
-      device = FlareTail.util.device;
-
+let (ua = navigator.userAgent, device = FlareTail.util.device) {
   // A device form factor
   // https://developer.mozilla.org/en-US/docs/Gecko_user_agent_string_reference
   if (ua.contains('Tablet')) {
-    device.type = 'tablet';
+    device.type = 'mobile-tablet';
   } else if (ua.contains('Mobile')) {
-    device.type = 'mobile';
+    device.type = 'mobile-phone';
   } else {
     device.type = 'desktop';
   }

diff --git a/scripts/flaretail.widget.js b/scripts/flaretail.widget.js
@@ -777,14 +777,10 @@ FlareTail.widget.Grid.prototype.activate_rows = function () {
 
   // Custom scrollbar
   let scrollbar = this.view.scrollbar = new FlareTail.widget.ScrollBar($grid_body, true, false),
-      mobile_mql = FlareTail.util.device.mobile.mql,
-      mobile_mql_listener = mql => {
-        let option = this.options.adjust_scrollbar;
-        scrollbar.options.adjusted = option === undefined ? !mql.matches : option;
-      };
+      option = this.options.adjust_scrollbar;
 
-  mobile_mql.addListener(mobile_mql_listener);
-  mobile_mql_listener(mobile_mql);
+  scrollbar.options.adjusted = option === undefined ? FlareTail.util.device.type === 'desktop'
+                                                    : option;
 };
 
 FlareTail.widget.Grid.prototype.onmousedown_extend = function (event) {

diff --git a/styles/flaretail.widget.css b/styles/flaretail.widget.css
@@ -584,14 +584,8 @@ a[role="menuitem"] {
  * Mobile Support
  * ---------------------------------------------------------------------------------------------- */
 
-/* On a Firefox OS phone, results of the resolution media feature are different
-   between an app and an in-browser page. Use the width feature instead. */
-@media (max-width: 640px) {
-
-  html {
-    font-size: 12px;
-  }
-
+:root[data-device-type|="mobile"] {
+  font-size: 12px;
 }
 
 @media (-moz-touch-enabled: 1) {