From cad1e333fe098acccbd29fad81186cb893227d6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Ryb=C3=A1rsky?= <bruno@brn.systems>
Date: Sat, 27 Apr 2024 12:12:42 +0200
Subject: [PATCH] Update meme voting

---
 assets/script.js    |  4 ++++
 assets/style.css    | 15 +++++++++++++++
 lib/meme.php        |  4 ++--
 templates/meme.html |  5 +++--
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/assets/script.js b/assets/script.js
index 8c23baa..105cb3d 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -649,13 +649,17 @@ async function reloadMemeVotes(memeID) {
         memeVoteCounterElement.classList.add("neutral");
     }
 
+    memeVoteUpvoteElement.classList.remove('visual_hover');
+    memeVoteDownvoteElement.classList.remove('visual_hover');
     if (userVote > 0) {
         memeUpvoteVariant = "fill";
         memeDownvoteVariant = "line";
+        memeVoteUpvoteElement.classList.add('visual_hover');
     }
     else if (userVote < 0) {
         memeUpvoteVariant = "line";
         memeDownvoteVariant = "fill";
+        memeVoteDownvoteElement.classList.add('visual_hover');
     }
     else {
         memeUpvoteVariant = "line";
diff --git a/assets/style.css b/assets/style.css
index 7870f56..3d339cb 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -380,6 +380,21 @@ div#articleslist>article{
     color: var(--pico-color);
 }
 
+.visual_hover {
+    --pico-background-color: var(--pico-primary-hover-background);
+    --pico-border-color: var(--pico-primary-hover-border);
+    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    --pico-color: var(--pico-primary-inverse);
+}
+
+.visual_hover.meme_upvote {
+    --pico-background-color: green;
+}
+
+.visual_hover.meme_downvote {
+    --pico-background-color: red;
+}
+
 @media (max-width: 1050px) {
 
     div#articleslist {
diff --git a/lib/meme.php b/lib/meme.php
index 6f32778..7722086 100644
--- a/lib/meme.php
+++ b/lib/meme.php
@@ -47,8 +47,8 @@ function renderMeme(int $id, int $authorId, string $title, string $textContent,
         $meme_upvote_active = 'line';
         $meme_vote_counter_class = 'neutral';
     }
-    $meme_upvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 1);\"> <i id='meme_votes_upvote_$id' class=\"ri-arrow-up-circle-$meme_upvote_active\"></i></button>" : '';
-    $meme_downvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 0);\"> <i id='meme_votes_downvote_$id' class=\"ri-arrow-down-circle-$meme_downvote_active\"></i></button>" : '';
+    $meme_upvote = isLoggedIn() ? "<button class='meme_upvote' onclick=\"voteMeme($id, 1);\"> <i id='meme_votes_upvote_$id' class=\"ri-arrow-up-circle-$meme_upvote_active\"></i></button>" : '';
+    $meme_downvote = isLoggedIn() ? "<button class='meme_downvote' onclick=\"voteMeme($id, 0);\"> <i id='meme_votes_downvote_$id' class=\"ri-arrow-down-circle-$meme_downvote_active\"></i></button>" : '';
 
     $meme_out = str_replace('__TEMPLATE_MEME_VOTES_NUMBER__', strval($meme_net_votes), $meme_out);
     $meme_out = str_replace('__TEMPLATE_MEME_UPVOTE__', $meme_upvote, $meme_out);
diff --git a/templates/meme.html b/templates/meme.html
index ec228d0..ed99795 100644
--- a/templates/meme.html
+++ b/templates/meme.html
@@ -11,14 +11,15 @@
             <div class="meme_info">
                 <p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__
                 </p>
-                __TEMPLATE_MEME_DELETE_BUTTON__
                 <p class='meme_date' id="meme_date___TEMPLATE_MEME_ID__"><i class="ri-calendar-line"></i>__TEMPLATE_MEME_DATE__
                 </p>
+                __TEMPLATE_MEME_DELETE_BUTTON__
             </div>
         </div>
     </div>
     <div class="meme_body" id="meme_body___TEMPLATE_MEME_ID__">
-        <img id="meme_image___TEMPLATE_MEME_ID__" src="__TEMPLATE_MEME_IMAGE__" width="__TEMPLATE_MEME_IMAGE_WIDTH__" height="__TEMPLATE_MEME_IMAGE_HEIGHT__" alt="meme image"
+        <img id="meme_image___TEMPLATE_MEME_ID__" src="__TEMPLATE_MEME_IMAGE__" width="__TEMPLATE_MEME_IMAGE_WIDTH__"
+             height="__TEMPLATE_MEME_IMAGE_HEIGHT__" alt="meme image"
              class="meme_image">
         <p class="meme_text" id="meme_text___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_TEXT__</p>
     </div>