Skip to content

Commit ddbd0e2

Browse files
author
Martii
committed
Eliminate the big gap from #527 with jQuery and CSS3
* 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
1 parent f5565e6 commit ddbd0e2

File tree

3 files changed

+29
-4
lines changed

3 files changed

+29
-4
lines changed

views/includes/scripts/commentReplyScript.html

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
11
<script type="text/javascript">
2+
// Show spacer div
3+
$('#reply-control').on('shown.bs.collapse', function () {
4+
$('#show-reply-form-when-visible').css({
5+
height: '200px'
6+
});
7+
});
8+
9+
// Hide spacer div
10+
$('#reply-control').on('hidden.bs.collapse', function () {
11+
$('#show-reply-form-when-visible').css({
12+
height: '0'
13+
});
14+
});
215

316
$('.btn-comment-reply').click(function (aE) {
417
$('#reply-control').collapse('show');
@@ -20,7 +33,7 @@
2033
});
2134

2235
function isElementInViewport(aEl) {
23-
//special bonus for those using jQuery
36+
// special bonus for those using jQuery
2437
if (aEl instanceof jQuery) {
2538
aEl = aEl[0];
2639
}
@@ -53,7 +66,7 @@
5366

5467
var handler = fireIfElementVisible ($('#show-reply-form-when-visible'), callback);
5568

56-
//jQuery
69+
// jQuery
5770
$(window).on('DOMContentLoaded load resize scroll', handler);
5871

5972
</script>

views/pages/discussionPage.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@
55
{{> includes/head.html }}
66
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
77
<style>
8-
#show-reply-form-when-visible { height: 200px; }
8+
#show-reply-form-when-visible {
9+
-moz-transition: height 1s ease;
10+
-ms-transition: height 1s ease;
11+
-o-transition: height 1s ease;
12+
-webkit-transition: height 1s ease;
13+
transition: height 1s ease;
14+
}
915
</style>
1016
</head>
1117
<body>

views/pages/scriptIssuePage.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
77
<link rel="stylesheet" type="text/css" media="all" href="/css/scriptPage.css">
88
<style>
9-
#show-reply-form-when-visible { height: 200px; }
9+
#show-reply-form-when-visible {
10+
-moz-transition: height 1s ease;
11+
-ms-transition: height 1s ease;
12+
-o-transition: height 1s ease;
13+
-webkit-transition: height 1s ease;
14+
transition: height 1s ease;
15+
}
1016
</style>
1117
</head>
1218
<body>

0 commit comments

Comments
 (0)