Mirror
/
nuTensor
mirror of https://github.com/geekprojects/nuTensor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

hopefully improve UI for mobile devices (#828)

pull/2/head
gorhill 7 years ago
parent
06d7612bf5
commit
6ca45c66b8
3 changed files with 76 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/css/popup.css
  2. 77
      src/js/popup.js
  3. 2
      src/popup.html

15
src/css/popup.css
View File

@ -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
View File

@ -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
View File

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

Write Preview
Loading…
Cancel
Save