improved content and comment collapse/expand rendering

6 files changed, 30 insertions, 14 deletions

diff --git a/Zotlabs/Lib/ThreadItem.php b/Zotlabs/Lib/ThreadItem.php
index ae3422526..60a314da0 100644
--- a/Zotlabs/Lib/ThreadItem.php
+++ b/Zotlabs/Lib/ThreadItem.php
@@ -573,7 +573,7 @@ class ThreadItem {
 			if(($nb_children > $visible_comments) || ($thread_level > 1)) {
 				$result['children'][0]['comment_firstcollapsed'] = true;
 				$result['children'][0]['num_comments'] = $comment_count_txt['label'];
-				$result['children'][0]['hide_text'] = sprintf( t('%s show all'), '<i class="bi bi-chevron-down align-middle"></i>');
+				$result['children'][0]['hide_text'] = t('show all');
 				if($thread_level > 1) {
 					$result['children'][$nb_children - 1]['comment_lastcollapsed'] = true;
 				}
diff --git a/include/js_strings.php b/include/js_strings.php
index cbc94bb08..0142bad28 100644
--- a/include/js_strings.php
+++ b/include/js_strings.php
@@ -5,10 +5,10 @@ function js_strings() {
 		'$delitem'     => t('Delete this item?'),
 		'$itemdel'     => t('Item deleted'),
 		'$comment'     => t('Comment'),
-		'$showmore'    => sprintf( t('%s show all'), '<i class=\'bi bi-chevron-down align-middle\'></i>'),
-		'$showfewer'   => sprintf( t('%s show less'), '<i class=\'bi bi-chevron-up align-middle\'></i>'),
-		'$divgrowmore' => sprintf( t('%s expand'), '<i class=\'bi bi-chevron-down align-middle\'></i>'),
-		'$divgrowless' => sprintf( t('%s collapse'),'<i class=\'bi bi-chevron-up align-middle\'></i>'),
+		'$showmore'    => t('show all'),
+		'$showfewer'   => t('show less'),
+		'$divgrowmore' => t('expand'),
+		'$divgrowless' => t('collapse'),
 		'$pwshort'     => t("Password too short"),
 		'$pwnomatch'   => t("Passwords do not match"),
 		'$everybody'   => t('everybody'),
diff --git a/view/js/main.js b/view/js/main.js
index ab87b4bda..dfec9e0f0 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -514,16 +514,19 @@ function viewsrc(id) {
 }
 
 function showHideComments(id) {
-	if( $('#collapsed-comments-' + id).is(':visible')) {
+	if($('#collapsed-comments-' + id).is(':visible')) {
 		$('#collapsed-comments-' + id + ' .autotime').timeago('dispose');
 		$('#collapsed-comments-' + id).hide();
-		$('#hide-comments-' + id).html(aStr.showmore);
+		$('#hide-comments-label-' + id).html(aStr.showmore);
 		$('#hide-comments-total-' + id).show();
+		$('#hide-comments-icon-' + id).toggleClass('bi-chevron-down bi-chevron-up');
+
 	} else {
 		$('#collapsed-comments-' + id + ' .autotime').timeago();
 		$('#collapsed-comments-' + id).show();
-		$('#hide-comments-' + id).html(aStr.showfewer);
+		$('#hide-comments-label-' + id).html(aStr.showfewer);
 		$('#hide-comments-total-' + id).hide();
+		$('#hide-comments-icon-' + id).toggleClass('bi-chevron-down bi-chevron-up');
 	}
 }
 
@@ -834,7 +837,7 @@ function scrollToItem() {
 				var scrolltoid = $('.collapsed-comments').attr('id').substring(19);
 				$('#collapsed-comments-' + scrolltoid + ' .autotime').timeago();
 				$('#collapsed-comments-' + scrolltoid).show();
-				$('#hide-comments-' + scrolltoid).html(aStr.showfewer);
+				$('#hide-comments-label-' + scrolltoid).html(aStr.showfewer);
 				$('#hide-comments-total-' + scrolltoid).hide();
 			}
 			$('html, body').animate({ scrollTop: $(this).offset().top - $('nav').outerHeight(true) }, 'slow');
@@ -868,8 +871,8 @@ function collapseHeight() {
 					startOpen: open,
 					heightMargin: 50,
 					collapsedHeight: divmore_height,
-					moreLink: '<a href="#" class="divgrow-showmore fakelink small">' + aStr.divgrowmore + '</a>',
-					lessLink: '<a href="#" class="divgrow-showmore fakelink small">' + aStr.divgrowless + '</a>',
+					moreLink: '<a href="#" class="divgrow-showmore fakelink"><i class="bi bi-chevron-down align-middle divgrow-showmore-icon"></i>&nbsp;<span class="divgrow-showmore-label align-middle">' + aStr.divgrowmore + '</span></a>',
+					lessLink: '<a href="#" class="divgrow-showmore fakelink"><i class="bi bi-chevron-up align-middle divgrow-showmore-icon"></i>&nbsp;<span class="divgrow-showmore-label align-middle">' + aStr.divgrowless + '</span></a>',
 					beforeToggle: function(trigger, element, expanded) {
 						if(expanded) {
 							if((($(element).offset().top + divmore_height) - $(window).scrollTop()) < 65 ) {
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 08151b8a5..129a49eb9 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -991,6 +991,19 @@ a .drop-icons:hover {
 	border-top: 1px dashed #adadad;
 }
 
+
+.hide-comments-icon,
+.divgrow-showmore-icon {
+	font-size: $font_size;
+}
+
+.divgrow-showmore-label,
+.hide-comments-label {
+	text-transform: uppercase;
+	font-size: 0.7rem;
+}
+
+
 .wall-item-comment-wrapper {
 	padding: 7px 10px;
 	background-color: var(--bs-tertiary-bg);
diff --git a/view/tpl/admin_accounts.tpl b/view/tpl/admin_accounts.tpl
index df407dc88..9a9fbd865 100644
--- a/view/tpl/admin_accounts.tpl
+++ b/view/tpl/admin_accounts.tpl
@@ -25,8 +25,8 @@
 				<td class="">{{$u.reg_atip_n}}</td>
 				<td class="checkbox_bulkedit"><input type="checkbox" class="pending_ckbx" id="id_pending_{{$n}}" name="pending[]" value="{{$n}}"></td>
 				<td class="tools">
-					<a id="zara_{{$n}}" {{* href="{{$baseurl}}/regmod/allow/{{$n}}" *}} class="zar2s zara btn btn-default btn-xs" title="{{$approve}}"><i class="bi fa-thumbs-o-up admin-icons"></i></a>
-					<a id="zard_{{$n}}" {{* href="{{$baseurl}}/regmod/deny/{{$n}}" *}} class="zar2s zard btn btn-default btn-xs" title="{{$deny}}"><i class="bi fa-thumbs-o-down admin-icons"></i></a>
+					<a id="zara_{{$n}}" {{* href="{{$baseurl}}/regmod/allow/{{$n}}" *}} class="zar2s zara btn btn-default btn-xs" title="{{$approve}}"><i class="bi bi-hand-thumbs-up generic-icons"></i></a>
+					<a id="zard_{{$n}}" {{* href="{{$baseurl}}/regmod/deny/{{$n}}" *}} class="zar2s zard btn btn-default btn-xs" title="{{$deny}}"><i class="bi bi-hand-thumbs-down generic-icons"></i></a>
 					<span id="zarreax_{{$n}}" class="zarreax"></span>
 				</td>
 			</tr>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index af212608a..91d6be36b 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -1,6 +1,6 @@
 {{if $item.comment_firstcollapsed}}
 <div id="hide-comments-outer-{{$item.parent}}" class="hide-comments-outer fakelink small" onclick="showHideComments({{$item.id}});">
-	<span id="hide-comments-{{$item.id}}" class="hide-comments">{{$item.hide_text}}</span>&nbsp;<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span>
+	<i id="hide-comments-icon-{{$item.id}}" class="bi bi-chevron-down align-middle hide-comments-icon"></i> <span id="hide-comments-label-{{$item.id}}" class="hide-comments-label align-middle">{{$item.hide_text}}</span>&nbsp;<span id="hide-comments-total-{{$item.id}}" class="hide-comments-label">{{$item.num_comments}}</span>
 </div>
 <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}