UX: large topic creation area on mobile

This refines the iOS hack and allows for height 100%
on the composer

Also removes annoying box shadows
This commit is contained in:
Sam 2017-08-29 15:45:02 -04:00
parent 04e3526096
commit 5cdb486332
2 changed files with 37 additions and 13 deletions

View File

@ -33,6 +33,7 @@ function positioningWorkaround($fixedElement) {
}
const fixedElement = $fixedElement[0];
const oldHeight = fixedElement.style.height;
var done = false;
var originalScrollTop = 0;
@ -46,7 +47,11 @@ function positioningWorkaround($fixedElement) {
fixedElement.style.position = '';
fixedElement.style.top = '';
fixedElement.style.height = '';
fixedElement.style.height = oldHeight;
setTimeout(()=>{
$(fixedElement).removeClass('no-transition');
},500);
$(window).scrollTop(originalScrollTop);
@ -63,10 +68,6 @@ function positioningWorkaround($fixedElement) {
return;
}
if (composingTopic) {
return false;
}
positioningWorkaround.blur(evt);
};
@ -97,17 +98,22 @@ function positioningWorkaround($fixedElement) {
$(window).scrollTop(0);
let i = 20;
let interval = setInterval(()=>{
$(window).scrollTop(0);
if (i--===0) {
clearInterval(interval);
}
}, 10);
fixedElement.style.top = '0px';
composingTopic = $('#reply-control .category-select-box').length > 0;
const height = calcHeight(composingTopic);
fixedElement.style.height = height + "px";
// I used to do this, but it seems like we don't need to with position
// fixed
// setTimeout(()=>$(window).scrollTop(0),500);
$(fixedElement).addClass('no-transition');
evt.preventDefault();
self.focus();

View File

@ -18,13 +18,27 @@ input {
color: $primary;
padding: 4px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
box-shadow: none;
border: 1px solid $primary-low;
-webkit-appearance: none;
}
textarea {
box-shadow: none;
-webkit-appearance: none;
}
input[type=radio], input[type=checkbox] {
box-shadow: none;
}
#reply-control {
&.no-transition {
transition: none;
}
}
#reply-control {
// used for upload link
.composer-bottom-right {
@ -34,7 +48,7 @@ input[type=radio], input[type=checkbox] {
#mobile-uploader { display: none; }
.mobile-file-upload.hidden { display: none; }
#draft-status, #file-uploading, .mobile-file-upload { display: inline-block; }
transition: height .4s ease;
transition: height .4s ease-in-out;
width: 100%;
z-index: 1039;
height: 0;
@ -320,3 +334,7 @@ input[type=radio], input[type=checkbox] {
.select2-focusser {
display:none !important;
}
#reply-control.edit-title.open {
height: 100%;
}