hopefully improve UI for mobile devices (#828)

Author: gorhill

src/css/popup.css

@@ -49,7 +49,7 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type {
 
 .paneHead {
     background-color: white;
-    left:0;
+    left: 0;
     padding: 0;
     position: fixed;
     right: 0;
@@ -621,3 +621,18 @@ body.colorblind .rw .matCell.t2 #blacklist:hover {
 #domainOnly:hover {
     opacity: 1;
     }
+
+/* Mobile-friendly rules */
+
+body.hConstrained {
+    overflow-x: auto;
+    }
+body.hConstrained .paneHead {
+    left: auto;
+    position: absolute;
+    right: auto;
+    width: 100%;
+    }
+body[data-touch="true"] .matCell {
+    line-height: 200%;
+    }

src/js/popup.js

@@ -32,18 +32,66 @@
 /******************************************************************************/
 /******************************************************************************/
 
-var paneContentPaddingTop;
-try {
-    paneContentPaddingTop = localStorage.getItem('paneContentPaddingTop');
-} catch(ex) {
-}
+// Stuff which is good to do very early so as to avoid visual glitches.
 
-if ( typeof paneContentPaddingTop === 'string' ) {
-    document.querySelector('.paneContent').style.setProperty(
-        'padding-top',
-        paneContentPaddingTop
-    );
-}
+(function() {
+    var paneContentPaddingTop,
+        touchDevice;
+    try {
+        paneContentPaddingTop = localStorage.getItem('paneContentPaddingTop');
+        touchDevice = localStorage.getItem('touchDevice');
+    } catch(ex) {
+    }
+
+    if ( typeof paneContentPaddingTop === 'string' ) {
+        document.querySelector('.paneContent').style.setProperty(
+            'padding-top',
+            paneContentPaddingTop
+        );
+    }
+    if ( touchDevice === 'true' ) {
+        document.body.setAttribute('data-touch', 'true');
+    } else {
+        document.addEventListener('touchstart', function onTouched(ev) {
+            document.removeEventListener(ev.type, onTouched);
+            document.body.setAttribute('data-touch', 'true');
+            try {
+                localStorage.setItem('touchDevice', 'true');
+            } catch(ex) {
+            }
+            resizePopup();
+        });
+    }
+})();
+
+var resizePopup = (function() {
+    var timer;
+    var fix = function() {
+        timer = undefined;
+        var doc = document;
+        // Manually adjust the position of the main matrix according to the
+        // height of the toolbar/matrix header.
+        var paddingTop = (doc.querySelector('.paneHead').clientHeight + 2) + 'px',
+            paneContent = doc.querySelector('.paneContent');
+        if ( paddingTop !== paneContent.style.paddingTop ) {
+            paneContent.style.setProperty('padding-top', paddingTop);
+            try {
+                localStorage.setItem('paneContentPaddingTop', paddingTop);
+            } catch(ex) {
+            }
+        }
+        document.body.classList.toggle(
+            'hConstrained',
+            window.innerWidth < document.body.clientWidth
+        );
+    };
+    return function() {
+        if ( timer !== undefined ) {
+            clearTimeout(timer);
+        }
+        timer = vAPI.setTimeout(fix, 97);
+    };
+})();
 
 /******************************************************************************/
 /******************************************************************************/
@@ -1303,33 +1351,6 @@ var onMatrixSnapshotReady = function(response) {
 
 /******************************************************************************/
 
-var resizePopup = (function() {
-    var timer;
-    var fix = function() {
-        timer = undefined;
-        var doc = document;
-        // Manually adjust the position of the main matrix according to the
-        // height of the toolbar/matrix header.
-        var paddingTop = (doc.querySelector('.paneHead').clientHeight + 2) + 'px';
-        doc.querySelector('.paneContent').style.setProperty(
-            'padding-top',
-            paddingTop
-        );
-        try {
-            localStorage.setItem('paneContentPaddingTop', paddingTop);
-        } catch(ex) {
-        }
-    };
-    return function() {
-        if ( timer !== undefined ) {
-            clearTimeout(timer);
-        }
-        timer = vAPI.setTimeout(fix, 97);
-    };
-})();
-
-/******************************************************************************/
-
 var matrixSnapshotPoller = (function() {
     var timer = null;
 

src/popup.html

@@ -3,7 +3,7 @@
 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/common.css" type="text/css">
 <link rel="stylesheet" href="css/popup.css" type="text/css">
 <title>uMatrix panel</title>