Merge pull request #528 from Martii/Issue-520jQueryCSS3

Eliminate the big gap from #527 with jQuery and CSS3 Auto-merge
OpenUserJS · Jan 13, 2015 · d90a970 · d90a970
2 parents f5565e6 + ddbd0e2
commit d90a970
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
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>