Fix the comment collapse feature
diff mbox

Message ID 20170424161820.32036-1-lfleischer@archlinux.org
State Accepted, archived
Headers show

Commit Message

Lukas Fleischer April 24, 2017, 4:18 p.m. UTC
In commit 4abde89 (Use JavaScript to collapse long comments,
2017-04-19), support for collapsing/expanding long comments was added.
This was broken by the recent Markdown support since comments no longer
live inside a single HTML paragraph. Fix this by wrapping each comment
in another div container.

Signed-off-by: Lukas Fleischer <lfleischer@archlinux.org>
---
 web/html/packages.php         | 23 ++++++++++++-----------
 web/template/pkg_comments.php | 16 +++++++++-------
 2 files changed, 21 insertions(+), 18 deletions(-)

Patch
diff mbox

diff --git a/web/html/packages.php b/web/html/packages.php
index 8d76c76..7d5b207 100644
--- a/web/html/packages.php
+++ b/web/html/packages.php
@@ -74,32 +74,33 @@  function collapseDependsList(list) {
 
 function collapseComment(div) {
 	var linkid = div.attr('id') + 'link',
-		par = div.find('p'),
-		height = par.height(),
+		inner = div.find('div'),
+		height = inner.height(),
 		maxheight = 200;
 
 	if (height <= maxheight)
 		return;
 
-	par.css({ 'overflow': 'hidden', 'height': maxheight + 'px' });
-	par.addClass('collapsed');
-	par.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
+	inner.css({ 'overflow': 'hidden', 'height': maxheight + 'px' });
+	inner.addClass('collapsed');
+	inner.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
 
 	$('#' + linkid).click(function(event) {
+		var inner = $(this).parent().parent().find('div');
 		var newheight;
 
-		if (par.hasClass('collapsed')) {
-			par.css({ 'height': 'auto' });
-			newheight = par.height();
-			par.css({ 'height': maxheight });
+		if (inner.hasClass('collapsed')) {
+			inner.css({ 'height': 'auto' });
+			newheight = inner.height();
+			inner.css({ 'height': maxheight });
 			$(this).text('Collapse');
 		} else {
 			newheight = maxheight;
 			$(this).text('Show More…');
 		}
 
-		par.animate({ 'height': newheight });
-		par.toggleClass('collapsed');
+		inner.animate({ 'height': newheight });
+		inner.toggleClass('collapsed');
 		event.preventDefault();
 	});
 }
diff --git a/web/template/pkg_comments.php b/web/template/pkg_comments.php
index f973b74..7d9bedc 100644
--- a/web/template/pkg_comments.php
+++ b/web/template/pkg_comments.php
@@ -103,13 +103,15 @@  if (!isset($count)) {
 			<?php endif; ?>
 		</h4>
 		<div id="<?= isset($pinned) ? "pinned-" : "comment-" ?><?= $row['ID'] ?>-content" class="article-content<?php if ($is_deleted): ?> comment-deleted<?php endif; ?>">
-			<?php if (!empty($row['RenderedComment'])): ?>
-			<?= $row['RenderedComment'] ?>
-			<?php else: ?>
-			<p>
-				<?= parse_comment($row['Comments']) ?>
-			</p>
-			<?php endif; ?>
+			<div>
+				<?php if (!empty($row['RenderedComment'])): ?>
+				<?= $row['RenderedComment'] ?>
+				<?php else: ?>
+				<p>
+					<?= parse_comment($row['Comments']) ?>
+				</p>
+				<?php endif; ?>
+			</div>
 		</div>
 	<?php endwhile; ?>