From 524afe9c6e873e127d353f68679fa7188f51c441 Mon Sep 17 00:00:00 2001 From: Haocen Xu Date: Sun, 3 Jun 2018 22:43:11 -0400 Subject: [PATCH 1/4] Responsive design for mobile devices. Signed-off-by: Haocen Xu --- static/index.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/static/index.html b/static/index.html index 34adb3d..5b16823 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,7 @@ hastebin + @@ -33,7 +34,38 @@ $(function() { app = new haste('hastebin', { twitter: true }); handlePop({ target: window }); + responsive(); }); + + function responsive() { + // apply touch device specific style + if ("ontouchstart" in document.documentElement) { + var mTextAreaStyle = document.createElement('style'); + mTextAreaStyle.setAttribute('rel', 'stylesheet') + mTextAreaStyle.setAttribute('type', 'text/css'); + document.head.appendChild(mTextAreaStyle); + mTextAreaStyle.sheet.insertRule('textarea{ padding-bottom: 95px; }', 0); + + var key = document.getElementById('key'); + key.style.top = 'auto'; + key.style.bottom = '0px'; + + var box1 = document.getElementById('box1'); + box1.style.transition = 'opacity 1s'; + setTimeout(() => { + box1.style.opacity = 0; + box1.addEventListener('transitionend', function(event) { + box1.parentElement.removeChild(box1) + }, { + capture: false, + once: true + }); + + var tArea = document.querySelector('textarea'); + tArea.style.paddingBottom = '95px'; + }, 1000); + } + } From 4810b0a0884adb27f8aa92090aecaa2a003ff5e7 Mon Sep 17 00:00:00 2001 From: Haocen Xu Date: Mon, 4 Jun 2018 00:51:42 -0400 Subject: [PATCH 2/4] Fix touch device broken use cases --- static/application.css | 14 +++++++----- static/index.html | 51 +++++++++++++++--------------------------- 2 files changed, 27 insertions(+), 38 deletions(-) diff --git a/static/application.css b/static/application.css index ab90a24..2b1ba3c 100644 --- a/static/application.css +++ b/static/application.css @@ -1,6 +1,6 @@ body { background: #002B36; - padding: 20px 50px; + padding: 20px 20px 20px 50px; margin: 0px; } @@ -17,13 +17,15 @@ textarea { outline: none; resize: none; font-size: 13px; + padding-bottom: 95px; + overflow-x: hidden; } /* the line numbers */ #linenos { color: #7d7d7d; - z-index: -1000; + /* z-index: -1000; */ position: absolute; top: 20px; left: 0px; @@ -42,8 +44,10 @@ textarea { border: 0px; outline: none; font-size: 13px; - padding-right: 360px; - overflow: inherit; + padding-bottom: 95px; + overflow-x: scroll; + overflow-y: hidden; + box-sizing: border-box; } #box code { @@ -55,7 +59,7 @@ textarea { #key { position: fixed; - top: 0px; + bottom: 0px; right: 0px; z-index: +1000; /* watch out */ } diff --git a/static/index.html b/static/index.html index 5b16823..3e9be22 100644 --- a/static/index.html +++ b/static/index.html @@ -34,37 +34,22 @@ $(function() { app = new haste('hastebin', { twitter: true }); handlePop({ target: window }); - responsive(); + removeBanner(); }); - function responsive() { - // apply touch device specific style - if ("ontouchstart" in document.documentElement) { - var mTextAreaStyle = document.createElement('style'); - mTextAreaStyle.setAttribute('rel', 'stylesheet') - mTextAreaStyle.setAttribute('type', 'text/css'); - document.head.appendChild(mTextAreaStyle); - mTextAreaStyle.sheet.insertRule('textarea{ padding-bottom: 95px; }', 0); + function removeBanner() { + var box1 = document.getElementById('box1'); + box1.style.transition = 'opacity 1s'; - var key = document.getElementById('key'); - key.style.top = 'auto'; - key.style.bottom = '0px'; - - var box1 = document.getElementById('box1'); - box1.style.transition = 'opacity 1s'; - setTimeout(() => { - box1.style.opacity = 0; - box1.addEventListener('transitionend', function(event) { - box1.parentElement.removeChild(box1) - }, { - capture: false, - once: true - }); - - var tArea = document.querySelector('textarea'); - tArea.style.paddingBottom = '95px'; - }, 1000); - } + setTimeout(() => { + box1.style.opacity = 0; + box1.addEventListener('transitionend', function(event) { + box1.parentElement.removeChild(box1); + }, { + capture: false, + once: true + }); + }, 1000); } @@ -74,7 +59,11 @@
    - + +
    @@ -85,10 +74,6 @@
    -
    From 6bf2553d8228111f7b4cfe6a722a0e41672175c4 Mon Sep 17 00:00:00 2001 From: Haocen Xu Date: Mon, 4 Jun 2018 01:21:16 -0400 Subject: [PATCH 3/4] Minor style fix --- static/application.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/application.css b/static/application.css index 2b1ba3c..f366ff1 100644 --- a/static/application.css +++ b/static/application.css @@ -33,6 +33,7 @@ textarea { font-size: 13px; font-family: monospace; text-align: right; + user-select: none; } /* code box when locked */ @@ -48,6 +49,7 @@ textarea { overflow-x: scroll; overflow-y: hidden; box-sizing: border-box; + user-select: text; } #box code { From dc09dc463e37fe3994b027389fde2918205b95c5 Mon Sep 17 00:00:00 2001 From: Haocen Xu Date: Wed, 6 Jun 2018 17:40:28 -0400 Subject: [PATCH 4/4] Avoid force scrollbar --- static/application.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/application.css b/static/application.css index f366ff1..cbaf551 100644 --- a/static/application.css +++ b/static/application.css @@ -46,7 +46,7 @@ textarea { outline: none; font-size: 13px; padding-bottom: 95px; - overflow-x: scroll; + overflow-x: auto; overflow-y: hidden; box-sizing: border-box; user-select: text;