Browse Source

hopefully improve UI for mobile devices (#828)

pull/2/head
gorhill 7 years ago
parent
commit
6ca45c66b8
  1. 15
      src/css/popup.css
  2. 77
      src/js/popup.js
  3. 2
      src/popup.html

15
src/css/popup.css

@ -621,3 +621,18 @@ body.colorblind .rw .matCell.t2 #blacklist:hover {
#domainOnly:hover { #domainOnly:hover {
opacity: 1; 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%;
}

77
src/js/popup.js

@ -32,9 +32,14 @@
/******************************************************************************/ /******************************************************************************/
/******************************************************************************/ /******************************************************************************/
var paneContentPaddingTop;
// Stuff which is good to do very early so as to avoid visual glitches.
(function() {
var paneContentPaddingTop,
touchDevice;
try { try {
paneContentPaddingTop = localStorage.getItem('paneContentPaddingTop'); paneContentPaddingTop = localStorage.getItem('paneContentPaddingTop');
touchDevice = localStorage.getItem('touchDevice');
} catch(ex) { } catch(ex) {
} }
@ -44,6 +49,49 @@ if ( typeof paneContentPaddingTop === 'string' ) {
paneContentPaddingTop 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 matrixSnapshotPoller = (function() {
var timer = null; var timer = null;

2
src/popup.html

@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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/common.css" type="text/css">
<link rel="stylesheet" href="css/popup.css" type="text/css"> <link rel="stylesheet" href="css/popup.css" type="text/css">
<title>uMatrix panel</title> <title>uMatrix panel</title>

Loading…
Cancel
Save