Update meme voting

This commit is contained in:
Bruno Rybársky 2024-04-27 12:12:42 +02:00
parent 3678460366
commit cad1e333fe
4 changed files with 24 additions and 4 deletions

@ -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";

@ -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 {

@ -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);

@ -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>