From 321731a5f0f9cc99223ff29779ccbf346d92e06a Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Tue, 16 Jan 2024 21:39:10 +1300
Subject: [PATCH] much improved comment voting and collapse icon location

---
 app/post/routes.py                            |  2 +-
 app/static/js/scripts.js                      | 29 +++----
 app/static/structure.css                      | 69 ++++++++++++++--
 app/static/structure.scss                     | 82 ++++++++++++++++---
 ...tons.html => _comment_voting_buttons.html} | 14 ++--
 app/templates/post/post.html                  | 35 ++++----
 6 files changed, 173 insertions(+), 58 deletions(-)
 rename app/templates/post/{_voting_buttons.html => _comment_voting_buttons.html} (72%)

diff --git a/app/post/routes.py b/app/post/routes.py
index 996327c6..44cf776b 100644
--- a/app/post/routes.py
+++ b/app/post/routes.py
@@ -343,7 +343,7 @@ def comment_vote(comment_id, vote_direction):
     db.session.commit()
 
     comment.post.flush_cache()
-    return render_template('post/_voting_buttons.html', comment=comment,
+    return render_template('post/_comment_voting_buttons.html', comment=comment,
                            upvoted_class=upvoted_class,
                            downvoted_class=downvoted_class, community=comment.community)
 
diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
index eb6c7e1e..23d8fc5f 100644
--- a/app/static/js/scripts.js
+++ b/app/static/js/scripts.js
@@ -256,25 +256,26 @@ function setupHideButtons() {
         hideEl.addEventListener('click', event => {
             event.preventDefault();
             const parentElement = hideEl.parentElement.parentElement;
-            const hidables = parentElement.querySelectorAll('.hidable');
+            const hidables = parentElement.parentElement.querySelectorAll('.hidable');
 
             hidables.forEach(hidable => {
-                hidable.style.display = isHidden ? 'block' : 'none';
+                hidable.style.display = 'none';
             });
 
-            const moreHidables = parentElement.parentElement.parentElement.querySelectorAll('.hidable');
-            moreHidables.forEach(hidable => {
-                hidable.style.display = isHidden ? 'block' : 'none';
+            const unhide = parentElement.parentElement.querySelectorAll('.unhide');
+            unhide[0].style.display = 'inline-block';
+        });
+    });
+
+    const showEls = document.querySelectorAll('a.unhide');
+    showEls.forEach(showEl => {
+        showEl.addEventListener('click', event => {
+            event.preventDefault();
+            showEl.style.display = 'none';
+            const hidables = showEl.parentElement.parentElement.parentElement.querySelectorAll('.hidable');
+            hidables.forEach(hidable => {
+                hidable.style.display = '';
             });
-
-            // Toggle the content of hideEl
-            if (isHidden) {
-                hideEl.innerHTML = "<a href='#'><span class='fe fe-collapse'></span></a>";
-            } else {
-                hideEl.innerHTML = "<a href='#'><span class='fe fe-expand'></span></a>";
-            }
-
-            isHidden = !isHidden; // Toggle the state
         });
     });
 
diff --git a/app/static/structure.css b/app/static/structure.css
index cbd17d82..49159041 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -666,6 +666,56 @@ fieldset legend {
   height: auto;
 }
 
+.voting_buttons_new {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+  position: relative;
+  cursor: pointer;
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+}
+.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
+  width: 68px;
+}
+.voting_buttons_new .upvote_button.digits_5, .voting_buttons_new .downvote_button.digits_5 {
+  width: 76px;
+}
+.voting_buttons_new .upvote_button.digits_6, .voting_buttons_new .downvote_button.digits_6 {
+  width: 84px;
+}
+.voting_buttons_new .upvote_button.voted_up, .voting_buttons_new .downvote_button.voted_up {
+  color: green;
+  font-weight: bold;
+}
+.voting_buttons_new .upvote_button.voted_down, .voting_buttons_new .downvote_button.voted_down {
+  color: darkred;
+  font-weight: bold;
+}
+.voting_buttons_new .htmx-indicator {
+  position: absolute;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  top: 0;
+}
+.voting_buttons_new .htmx-request .htmx-indicator {
+  display: inline;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  right: 14px;
+  top: 5px;
+  opacity: 1 !important;
+}
+.voting_buttons_new .htmx-request.htmx-indicator {
+  display: inline;
+}
+
 .voting_buttons {
   float: right;
   display: block;
@@ -766,15 +816,13 @@ fieldset legend {
   }
 }
 .comment .comment_author img {
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   border-radius: 50%;
-  vertical-align: bottom;
+  vertical-align: middle;
 }
-.comment .comment_author .hide_button {
-  display: inline-block;
-}
-.comment .comment_author .hide_button a {
+.comment .comment_author a.unhide {
+  display: none;
   text-decoration: none;
   padding: 5px;
 }
@@ -785,6 +833,13 @@ fieldset legend {
 .comment .comment_actions a {
   text-decoration: none;
 }
+.comment .comment_actions .hide_button {
+  display: inline-block;
+}
+.comment .comment_actions .hide_button a {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .comment .replies {
   margin-top: 15px;
   border-left: solid 1px #ddd;
diff --git a/app/static/structure.scss b/app/static/structure.scss
index 97d57147..0ef1997c 100644
--- a/app/static/structure.scss
+++ b/app/static/structure.scss
@@ -307,6 +307,62 @@ nav, etc which are used site-wide */
   }
 }
 
+.voting_buttons_new {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+
+  .upvote_button, .downvote_button {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    cursor: pointer;
+    color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
+
+    &.digits_4 {
+      width: 68px;
+    }
+
+    &.digits_5 {
+      width: 76px;
+    }
+
+    &.digits_6 {
+      width: 84px;
+    }
+
+    &.voted_up {
+      color: green;
+      font-weight: bold;
+    }
+    &.voted_down {
+      color: darkred;
+      font-weight: bold;
+    }
+  }
+
+  .htmx-indicator{
+    position: absolute;
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    top: 0;
+  }
+  .htmx-request .htmx-indicator{
+    display:inline;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    right: 14px;
+    top: 5px;
+    opacity: 1!important;
+  }
+  .htmx-request.htmx-indicator{
+    display:inline;
+  }
+}
+
 .voting_buttons {
   float: right;
   display: block;
@@ -420,19 +476,16 @@ nav, etc which are used site-wide */
 
   .comment_author {
     img {
-      width: 20px;
-      height: 20px;
+      width: 25px;
+      height: 25px;
       border-radius: 50%;
-      vertical-align: bottom;
+      vertical-align: middle;
     }
 
-    .hide_button {
-      display: inline-block;
-
-      a {
-        text-decoration: none;
-        padding: 5px;
-      }
+    a.unhide {
+      display: none;
+      text-decoration: none;
+      padding: 5px;
     }
   }
 
@@ -442,6 +495,15 @@ nav, etc which are used site-wide */
     a {
       text-decoration: none;
     }
+
+    .hide_button {
+      display: inline-block;
+
+      a {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
   }
 
   .replies {
diff --git a/app/templates/post/_voting_buttons.html b/app/templates/post/_comment_voting_buttons.html
similarity index 72%
rename from app/templates/post/_voting_buttons.html
rename to app/templates/post/_comment_voting_buttons.html
index ae116561..967be665 100644
--- a/app/templates/post/_voting_buttons.html
+++ b/app/templates/post/_comment_voting_buttons.html
@@ -1,27 +1,25 @@
 {% if current_user.is_authenticated and current_user.verified %}
         {% if can_upvote(current_user, community) %}
                 <div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}"
-                 hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
-                        <span class="fe fe-arrow-up"></span>
-                        {{ comment.up_votes }}
+                 hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
+                        <span class="fe fe-arrow-up" title="{{ comment.up_votes }}"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif %}
+        {{ comment.up_votes - comment.down_votes }}
         {% if can_downvote(current_user, community) %}
                 <div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}"
-                 hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
-                        <span class="fe fe-arrow-down"></span>
-                        {{ comment.down_votes }}
+                 hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
+                        <span class="fe fe-arrow-down" title="{{ comment.down_votes }}"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif %}
 {% else %}
 <div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}">
         <span class="fe fe-arrow-up"></span>
-        {{ comment.up_votes }}
 </div>
+{{ comment.up_votes - comment.down_votes }}
 <div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}">
         <span class="fe fe-arrow-down"></span>
-        {{ comment.down_votes }}
 </div>
 {% endif %}
diff --git a/app/templates/post/post.html b/app/templates/post/post.html
index 1c7cbd3a..a58a8d44 100644
--- a/app/templates/post/post.html
+++ b/app/templates/post/post.html
@@ -64,11 +64,6 @@
                     <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].score <= -10 %}low_score{% endif %}
                         {% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}">
                         <div class="limit_height">
-                            <div class="voting_buttons hidable">
-                                {% with comment=comment['comment'] %}
-                                    {% include "post/_voting_buttons.html" %}
-                                {% endwith %}
-                            </div>
                             <div class="comment_author">
                                 {% if comment['comment'].author.deleted %}
                                     [deleted]
@@ -93,13 +88,7 @@
                                 {% endif %}
                                 {% if comment['comment'].author.id == post.author.id %}<span title="Submitter of original post" aria-label="submitter" class="small">[OP]</span>{% endif %}
                                 <span class="text-muted small">{{ moment(comment['comment'].posted_at).fromNow(refresh=True) }}{% if comment['comment'].edited_at %}, edited {{ moment(comment['comment'].edited_at).fromNow(refresh=True) }} {% endif %}</span>
-                                <div class="hide_button">
-                                    {% if comment['comment'].score <= -10 %}
-                                        <a href='#'><span class="fe fe-expand"></span></a>
-                                    {% else %}
-                                        <a href='#'><span class="fe fe-collapse"></span></a>
-                                    {% endif %}
-                                </div>
+                                <a class="unhide" href="#"><span class="fe fe-expand"></span></a>
                                 {% if comment['comment'].reports and current_user.is_authenticated and post.community.is_moderator(current_user)%}
                                     <span class="red fe fe-report" title="{{ _('Reported. Check comment for issues.') }}"></span>
                                 {% endif %}
@@ -109,13 +98,23 @@
                             </div>
                         </div>
                         <div class="comment_actions hidable">
-                            {% if current_user.is_authenticated and current_user.verified %}
-                                {% if post.comments_enabled %}
-                                    <a href="{{ url_for('post.add_reply', post_id=post.id, comment_id=comment['comment'].id) }}" rel="nofollow"><span class="fe fe-reply"></span> reply</a>
-                                {% endif %}
-                                {% if current_user.id == comment['comment'].author.id %}
-                                    {% include "post/_reply_notification_toggle.html" %}
+                            {% if post.comments_enabled %}
+                                <a href="{{ url_for('post.add_reply', post_id=post.id, comment_id=comment['comment'].id) }}" rel="nofollow"><span class="fe fe-reply"></span> reply</a>
+                            {% endif %}
+                            <div class="voting_buttons_new">
+                            {% with comment=comment['comment'] %}
+                                {% include "post/_comment_voting_buttons.html" %}
+                            {% endwith %}
+                            </div>
+                            <div class="hide_button">
+                                {% if comment['comment'].score <= -10 %}
+                                    <a href='#'><span class="fe fe-expand"></span></a>
+                                {% else %}
+                                    <a href='#'><span class="fe fe-collapse"></span></a>
                                 {% endif %}
+                            </div>
+                            {% if current_user.is_authenticated and current_user.verified and current_user.id == comment['comment'].author.id %}
+                                {% include "post/_reply_notification_toggle.html" %}
                             {% endif %}
                             <a href="{{ url_for('post.post_reply_options', post_id=post.id, comment_id=comment['comment'].id) }}" class="comment_actions_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
                         </div>