Browse Source

hopefully improve UI for mobile devices (#828)

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

17
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%;
}

97
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;

2
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>

Loading…
Cancel
Save