Eliminate the big gap from #527 with jQuery and CSS3

Martii · Martii · commit ddbd0e294466 · 2015-01-13T03:04:22.000-07:00
* Remove static CSS for sizing and control this all via jQuery with a little inline CSS. Dynamic style sheets could be used but that is probably overkill. * JavaScript is required to comment so using jQuery here * *bootstrap* has events... using them * Ease the transitions with CSS3. Even Opera Presto 12.16 has support here. Applies to #520
diff --git a/views/includes/scripts/commentReplyScript.html b/views/includes/scripts/commentReplyScript.html
@@ -1,4 +1,17 @@
 <script type="text/javascript">
+  // Show spacer div
+  $('#reply-control').on('shown.bs.collapse', function () {
+    $('#show-reply-form-when-visible').css({
+      height: '200px'
+    });
+  });
+
+  // Hide spacer div
+  $('#reply-control').on('hidden.bs.collapse', function () {
+    $('#show-reply-form-when-visible').css({
+      height: '0'
+    });
+  });
 
   $('.btn-comment-reply').click(function (aE) {
     $('#reply-control').collapse('show');
@@ -20,7 +33,7 @@
   });
 
   function isElementInViewport(aEl) {
-    //special bonus for those using jQuery
+    // special bonus for those using jQuery
     if (aEl instanceof jQuery) {
       aEl = aEl[0];
     }
@@ -53,7 +66,7 @@
 
   var handler = fireIfElementVisible ($('#show-reply-form-when-visible'), callback);
 
-  //jQuery
+  // jQuery
   $(window).on('DOMContentLoaded load resize scroll', handler);
 
 </script>
diff --git a/views/pages/discussionPage.html b/views/pages/discussionPage.html
@@ -5,7 +5,13 @@
   {{> includes/head.html }}
   <link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
   <style>
-    #show-reply-form-when-visible { height: 200px; }
+    #show-reply-form-when-visible {
+      -moz-transition: height 1s ease;
+      -ms-transition: height 1s ease;
+      -o-transition: height 1s ease;
+      -webkit-transition: height 1s ease;
+      transition: height 1s ease;
+    }
   </style>
 </head>
 <body>
diff --git a/views/pages/scriptIssuePage.html b/views/pages/scriptIssuePage.html
@@ -6,7 +6,13 @@
   <link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
   <link rel="stylesheet" type="text/css" media="all" href="/css/scriptPage.css">
   <style>
-    #show-reply-form-when-visible { height: 200px; }
+    #show-reply-form-when-visible {
+      -moz-transition: height 1s ease;
+      -ms-transition: height 1s ease;
+      -o-transition: height 1s ease;
+      -webkit-transition: height 1s ease;
+      transition: height 1s ease;
+    }
   </style>
 </head>
 <body>
