diff --git a/src/css/popup.css b/src/css/popup.css index cdacff6..a9301d4 100644 --- a/src/css/popup.css +++ b/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%; + } diff --git a/src/js/popup.js b/src/js/popup.js index 040ab08..f27988a 100644 --- a/src/js/popup.js +++ b/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; diff --git a/src/popup.html b/src/popup.html index 028e9c9..fa69534 100644 --- a/src/popup.html +++ b/src/popup.html @@ -3,7 +3,7 @@ - + uMatrix panel