From 5cdb48633276fcac8085efa8fb202b90f18342d4 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 29 Aug 2017 15:45:02 -0400
Subject: [PATCH] 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
---
 .../discourse/lib/safari-hacks.js.es6         | 24 ++++++++++-------
 app/assets/stylesheets/mobile/compose.scss    | 26 ++++++++++++++++---
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
index 204bb5411dd..a7d715ab8b1 100644
--- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
+++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
@@ -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();
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index f3515ab2d87..ed2bcdf7489 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -6,11 +6,11 @@
 }
 
 .composer-popup-container {
-display: none !important; // can be removed if inline JS CSS is removed from composer-popup
+  display: none !important; // can be removed if inline JS CSS is removed from composer-popup
 }
 
 .composer-popup {
-display: none !important; // can be removed if inline JS CSS is removed from composer-popup
+  display: none !important; // can be removed if inline JS CSS is removed from composer-popup
 }
 
 input {
@@ -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%;
+}