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() ? "" : ''; - $meme_downvote = isLoggedIn() ? "" : ''; + $meme_upvote = isLoggedIn() ? "" : ''; + $meme_downvote = isLoggedIn() ? "" : ''; $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 @@

__TEMPLATE_MEME_AUTHOR__

- __TEMPLATE_MEME_DELETE_BUTTON__

__TEMPLATE_MEME_DATE__

+ __TEMPLATE_MEME_DELETE_BUTTON__
- meme image

__TEMPLATE_MEME_TEXT__