Update meme voting
This commit is contained in:
parent
3678460366
commit
cad1e333fe
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user