mirror of
https://github.com/seejohnrun/haste-server.git
synced 2024-11-22 20:51:21 +00:00
Fix touch device broken use cases
This commit is contained in:
parent
524afe9c6e
commit
4810b0a088
2 changed files with 27 additions and 38 deletions
|
@ -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 */
|
||||
}
|
||||
|
|
|
@ -34,38 +34,23 @@
|
|||
$(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);
|
||||
|
||||
var key = document.getElementById('key');
|
||||
key.style.top = 'auto';
|
||||
key.style.bottom = '0px';
|
||||
|
||||
function removeBanner() {
|
||||
var box1 = document.getElementById('box1');
|
||||
box1.style.transition = 'opacity 1s';
|
||||
|
||||
setTimeout(() => {
|
||||
box1.style.opacity = 0;
|
||||
box1.addEventListener('transitionend', function(event) {
|
||||
box1.parentElement.removeChild(box1)
|
||||
box1.parentElement.removeChild(box1);
|
||||
}, {
|
||||
capture: false,
|
||||
once: true
|
||||
});
|
||||
|
||||
var tArea = document.querySelector('textarea');
|
||||
tArea.style.paddingBottom = '95px';
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
@ -75,6 +60,10 @@
|
|||
|
||||
<div id="key">
|
||||
<div id="pointer" style="display:none;"></div>
|
||||
<div id="box3" style="display:none;">
|
||||
<div class="label"></div>
|
||||
<div class="shortcut"></div>
|
||||
</div>
|
||||
<div id="box1">
|
||||
<a href="/about.md" class="logo"></a>
|
||||
</div>
|
||||
|
@ -85,10 +74,6 @@
|
|||
<button class="raw function button-picture">Just Text</button>
|
||||
<button class="twitter function button-picture">Twitter</button>
|
||||
</div>
|
||||
<div id="box3" style="display:none;">
|
||||
<div class="label"></div>
|
||||
<div class="shortcut"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="linenos"></div>
|
||||
|
|
Loading…
Reference in a new issue