From dbc4e52fc4f9a9f3c98803bd8e79724bb57cc397 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Tue, 27 Dec 2022 14:02:53 -0500
Subject: [PATCH] Turn show comments element into a full-fledged button

---
 view/templates/wall_thread.tpl            |  4 +--
 view/theme/frio/css/style.css             | 10 +++----
 view/theme/frio/templates/wall_thread.tpl | 32 +++++++----------------
 3 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/view/templates/wall_thread.tpl b/view/templates/wall_thread.tpl
index 8affd318a..86ec6a9fc 100644
--- a/view/templates/wall_thread.tpl
+++ b/view/templates/wall_thread.tpl
@@ -2,14 +2,14 @@
 {{else}}
 {{if $item.comment_firstcollapsed}}
 {{if $item.thread_level<3}}
-<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+<button type="button" class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
 			<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
 				{{$item.num_comments}} - {{$item.show_text}}
 			</span>
 	<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
 				{{$item.num_comments}} - {{$item.hide_text}}
 			</span>
-</div>
+</button>
 <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
     {{else}}
 	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: block;">
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 4bcee9d10..3c4aaa7c6 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2069,12 +2069,12 @@ wall-item-comment-wrapper.well hr {
 	margin-top: 0;
 }
 .hide-comments-outer {
+	display: block;
 	background-color: rgba(0, 0, 0, 0.03);
-	padding: 0.5em;
-	border-radius: 0.5em 0.5em 0 0;
-}
-.hide-comments-total {
-	cursor: pointer;
+	padding: 0.3em 10px;
+	width: 100%;
+	border: none;
+	text-align: left;
 }
 
 /*
diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index e2e2d52bf..05cbdfbb6 100644
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -28,29 +28,17 @@ as the value of $top_child_total (this is done at the end of this file)
 {{if $mode == display}}
 {{else}}
 {{if $item.comment_firstcollapsed}}
-	{{*
-	<div align="center" style="margin-top:-34px;">
-		<div class="hide-comments-outer btn btn-default" onclick="showHideComments({{$item.id}});">
-			<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span>
-			<span id="hide-comments-{{$item.id}}" class="hide-comments fakelink">{{$item.hide_text}}</span>
-		</div>
-	</div>
-	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
-	*}}
-
 	{{if $item.thread_level<3}}
-		<div class="hide-comments-outer-wrapper">
-			<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
-				<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
-					<i class="fa fa-caret-right" aria-hidden="true"></i>
-					{{$item.num_comments}} - {{$item.show_text}}
-				</span>
-				<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
-					<i class="fa fa-caret-down" aria-hidden="true"></i>
-					{{$item.num_comments}} - {{$item.hide_text}}
-				</span>
-			</div>
-		</div>
+		<button type="button" class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+			<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+				<i class="fa fa-caret-right" aria-hidden="true"></i>
+				{{$item.num_comments}} - {{$item.show_text}}
+			</span>
+			<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+				<i class="fa fa-caret-down" aria-hidden="true"></i>
+				{{$item.num_comments}} - {{$item.hide_text}}
+			</span>
+		</button>
 		<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 	{{else}}
 		<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: block;">