lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add UI for action bar

Browse source
This commit is contained in:
cuom1999 2022-11-16 18:48:32 -06:00
parent f9e9df6056
commit b75a52fe74
22 changed files with 543 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

48
templates/actionbar/list.html Normal file
View file

@ -0,0 +1,48 @@
{% set logged_in = request.user.is_authenticated %}
{% set profile = request.profile if logged_in else None %}
{% if logged_in %}
{% if include_hr %}<hr>{% endif %}
<div class="page-vote">
<span class="actionbar-block" style="justify-content: flex-start;">
<span id="like-button-{{pagevote.id}}"
class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
onclick="javascript:pagevote_upvote({{ pagevote.id }})"
>
<span class="pagevote-score" id="pagevote-score-{{pagevote.id}}">{{ pagevote.score }}</span>
<i class="fa fa-thumbs-o-up" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Like")}}</span>
</span>
<span id="dislike-button-{{pagevote.id}}" class="dislike-button actionbar-button {% if pagevote.vote_score(request.profile) == -1 %}voted{% endif %}" onclick="javascript:pagevote_downvote({{ pagevote.id }})">
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
</span>
</span>
{% if not hide_actionbar_comment %}
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-comment-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Comment")}}</span>
</span>
</span>
{% endif %}
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-bookmark-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Bookmark")}}</span>
</span>
</span>
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-share" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Share")}}</span>
</span>
</span>
{% if actionbar_report_url %}
<span class="actionbar-block">
<a class="actionbar-button" href="{{actionbar_report_url}}" style="color: black">
<i class="fa fa-flag-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Report")}}</span>
</a>
</span>
{% endif %}
</div>
{% endif %}

47
templates/actionbar/media-css.html Normal file
View file

@ -0,0 +1,47 @@
<style>
.actionbar-button {
cursor: pointer;
padding: 0.8em;
border: 0.2px solid lightgray;
border-radius: 5em;
font-weight: bold;
display: inherit;
}
.actionbar-block {
display: flex;
flex: 1;
justify-content: center;
}
.page-vote {
display: flex;
}
.pagevote-score {
margin-right: 0.3em;
}
.like-button {
padding-right: 0.5em;
border-radius: 5em 0 0 5em;
}
.actionbar-button:hover {
background: lightgray;
}
.dislike-button {
padding-left: 0.5em;
border-radius: 0 5em 5em 0;
border-left: 0;
}
.like-button.voted {
color: blue;
}
.dislike-button.voted {
color: red;
}
.actionbar-text {
padding-left: 0.4em;
}
@media (max-width: 799px) {
.actionbar-text {
display: none;
}
}
</style>

74
templates/actionbar/media-js.html Normal file
View file

@ -0,0 +1,74 @@
{% compress js %}
<script type="text/javascript">
$(document).ready(function () {
function ajax_vote(url, id, delta, on_success) {
return $.ajax({
url: url,
type: 'POST',
data: {
id: id
},
success: function (data, textStatus, jqXHR) {
var score = $('#pagevote-score-' + id);
score.text(parseInt(score.text()) + delta);
if (typeof on_success !== 'undefined')
on_success();
},
error: function (data, textStatus, jqXHR) {
alert('Could not vote: ' + data.responseText);
}
});
}
var get_$votes = function (id) {
var $post = $('#page-vote-' + id);
return {
upvote: $('#like-button-' + id),
downvote: $('#dislike-button-' + id),
};
};
window.pagevote_upvote = function (id) {
var $votes = get_$votes(id);
console.log($votes.upvote, $votes.downvote);
if ($votes.upvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () {
$votes.upvote.removeClass('voted');
});
}
else {
var delta = 1;
if ($votes.downvote.hasClass('voted')) {
delta = 2;
}
ajax_vote('{{ url('pagevote_upvote') }}', id, delta, function () {
if ($votes.downvote.hasClass('voted'))
$votes.downvote.removeClass('voted');
$votes.upvote.addClass('voted');
});
}
};
window.pagevote_downvote = function (id) {
var $votes = get_$votes(id);
if ($votes.downvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () {
$votes.downvote.removeClass('voted');
});
}
else {
var delta = -1;
if ($votes.upvote.hasClass('voted')) {
delta = -2;
}
ajax_vote('{{ url('pagevote_downvote') }}', id, delta, function () {
if ($votes.upvote.hasClass('voted'))
$votes.upvote.removeClass('voted');
$votes.downvote.addClass('voted');
});
}
};
});
</script>
{% endcompress %}