Adleraci/adlerka.top
4
1
Fork 4
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update meme voting

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/script.js
View File

@ -649,13 +649,17 @@ async function reloadMemeVotes(memeID) {
memeVoteCounterElement.classList.add("neutral"); memeVoteCounterElement.classList.add("neutral");
} }
memeVoteUpvoteElement.classList.remove('visual_hover');
memeVoteDownvoteElement.classList.remove('visual_hover');
if (userVote > 0) { if (userVote > 0) {
memeUpvoteVariant = "fill"; memeUpvoteVariant = "fill";
memeDownvoteVariant = "line"; memeDownvoteVariant = "line";
memeVoteUpvoteElement.classList.add('visual_hover');
} }
else if (userVote < 0) { else if (userVote < 0) {
memeUpvoteVariant = "line"; memeUpvoteVariant = "line";
memeDownvoteVariant = "fill"; memeDownvoteVariant = "fill";
memeVoteDownvoteElement.classList.add('visual_hover');
} }
else { else {
memeUpvoteVariant = "line"; memeUpvoteVariant = "line";

15
assets/style.css
View File

@ -380,6 +380,21 @@ div#articleslist>article{
color: var(--pico-color); 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) { @media (max-width: 1050px) {
div#articleslist { div#articleslist {

4
lib/meme.php
View File

@ -47,8 +47,8 @@ function renderMeme(int $id, int $authorId, string $title, string $textContent,
$meme_upvote_active = 'line'; $meme_upvote_active = 'line';
$meme_vote_counter_class = 'neutral'; $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_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 onclick=\"voteMeme($id, 0);\"> <i id='meme_votes_downvote_$id' class=\"ri-arrow-down-circle-$meme_downvote_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_VOTES_NUMBER__', strval($meme_net_votes), $meme_out);
$meme_out = str_replace('__TEMPLATE_MEME_UPVOTE__', $meme_upvote, $meme_out); $meme_out = str_replace('__TEMPLATE_MEME_UPVOTE__', $meme_upvote, $meme_out);

5
templates/meme.html
View File

@ -11,14 +11,15 @@
<div class="meme_info"> <div class="meme_info">
<p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__ <p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__
</p> </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 class='meme_date' id="meme_date___TEMPLATE_MEME_ID__"><i class="ri-calendar-line"></i>__TEMPLATE_MEME_DATE__
</p> </p>
__TEMPLATE_MEME_DELETE_BUTTON__
</div> </div>
</div> </div>
</div> </div>
<div class="meme_body" id="meme_body___TEMPLATE_MEME_ID__"> <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"> class="meme_image">
<p class="meme_text" id="meme_text___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_TEXT__</p> <p class="meme_text" id="meme_text___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_TEXT__</p>
</div> </div>