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 %}

11
templates/blog/blog.html
View file

@ -2,12 +2,12 @@
{% block js_media %}
{% include "comments/media-js.html" %}
{% include "pagevotes/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% endblock %}
{% block media %}
{% include "comments/media-css.html" %}
{% include "pagevotes/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block title_row %}
@ -41,14 +41,9 @@
{{ post.content|markdown|reference|str|safe}}
{% endcache %}
</div>
{% include "actionbar/list.html" %}
</div>
<hr style="width: 60%; margin:4em auto;">
<span class="social">
{{ post_to_gplus(request, post, '<i class="fa fa-google-plus-square"></i>') }}
{{ post_to_facebook(request, post, '<i class="fa fa-facebook-official"></i>') }}
{{ post_to_twitter(request, SITE_NAME + ':', post, '<i class="fa fa-twitter"></i>') }}
</span>
{% include "pagevotes/list.html" %}
{% include "comments/list.html" %}
{% endblock %}

14
templates/blog/content.html
View file

@ -36,9 +36,15 @@
<h2 class="title">
<a href="{{ url('blog_post', post.id, post.slug) }}">{{ post.title }}</a>
</h2>
<div class="summary content-description blog-description">
{% cache 86400 'post_summary' post.id %}
{{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
<div class="blog-description">
<div class="summary content-description">
{% cache 86400 'post_summary' post.id %}
{{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
</div>
{% set pagevote = post.pagevote %}
{% set hide_actionbar_comment = True %}
{% set include_hr = True %}
{% include "actionbar/list.html" %}
</div>
</section>

2
templates/blog/list.html
View file

@ -1,6 +1,7 @@
{% extends "three-column-content.html" %}
{% block three_col_media %}
{% include "blog/media-css.html" %}
{% include "actionbar/media-css.html" %}
<style>
@media (max-width: 799px) {
.title {
@ -32,6 +33,7 @@
{% endblock %}
{% block three_col_js %}
{% include "actionbar/media-js.html" %}
<script type="text/javascript">
$(document).ready(function () {
$('.time-remaining').each(function () {

2
templates/common-content.html
View file

@ -67,8 +67,8 @@
{% block description_end %}
<hr>
{% endblock %}
{% block post_description_end %}{% endblock %}
</div>
{% block post_description_end %}{% endblock %}
{% block comments %}{% endblock %}
</div>
</div>

13
templates/contest/contest.html
View file

@ -18,10 +18,12 @@
</script>
{% include "contest/media-js.html" %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block body %}
@ -116,15 +118,10 @@
</tbody>
</table>
</div>
<hr>
{% endif %}
<hr>
<span class="social">
{{ post_to_gplus(request, contest, '<i class="fa fa-google-plus-square"></i>') }}
{{ post_to_facebook(request, contest, '<i class="fa fa-facebook-official"></i>') }}
{{ post_to_twitter(request, SITE_NAME + ':', contest, '<i class="fa fa-twitter"></i>') }}
</span>
{% include "actionbar/list.html" %}
<br>
{% include "comments/list.html" %}
{% endblock %}

22
templates/pagevotes/list.html
View file

@ -1,22 +0,0 @@
{% set logged_in = request.user.is_authenticated %}
{% set profile = request.profile if logged_in else None %}
<div class="page-vote">
<div class="page-vote-full" style="margin-right: 5px;">
{% if logged_in %}
<a href="javascript:pagevote_upvote({{ pagevote.id }})"
class="upvote-link fa fa-chevron-up fa-fw{% if pagevote.vote_score(request.profile) == 1 %} voted{% endif %}"></a>
{% else %}
<a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
class="upvote-link fa fa-chevron-up fa-fw"></a>
{% endif %}
<br>
<div class="pagevote-score"> {{ pagevote.score }} </div>
{% if logged_in %}
<a href="javascript:pagevote_downvote({{ pagevote.id }})"
class="downvote-link fa fa-chevron-down fa-fw{% if pagevote.vote_score(request.profile) == -1 %} voted{% endif %}"></a>
{% else %}
<a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
class="downvote-link fa fa-chevron-down fa-fw"></a>
{% endif %}
</div>
</div>

19
templates/pagevotes/media-css.html
View file

@ -1,19 +0,0 @@
<style>
.page-vote {
border: 1px solid #ccc;
display: flex;
justify-content: center;
}
.pagevote-score {
text-align: center;
font-weight: bold;
}
.upvote-link, .downvote-link {
color: black;
}
.voted {
text-shadow: 0 0 4px black, 0 0 9px blue;
}
</style>

54
templates/pagevotes/media-js.html
View file

@ -1,54 +0,0 @@
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
{% 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 = $('.page-vote-full' + ' .pagevote-score').first();
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 () {
var $post = $('.page-vote-full');
return {
upvote: $post.find('.upvote-link').first(),
downvote: $post.find('.downvote-link').first()
};
};
window.pagevote_upvote = function (id) {
ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () {
var $votes = get_$votes();
if ($votes.downvote.hasClass('voted'))
$votes.downvote.removeClass('voted');
else
$votes.upvote.addClass('voted');
});
};
window.pagevote_downvote = function (id) {
ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () {
var $votes = get_$votes();
if ($votes.upvote.hasClass('voted'))
$votes.upvote.removeClass('voted');
else
$votes.downvote.addClass('voted');
});
};
});
</script>
{% endcompress %}

4
templates/problem/editorial.html
View file

@ -2,10 +2,12 @@
{% block content_js_media %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% endblock %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block header %}
@ -29,6 +31,8 @@
{{ solution.content|markdown|reference|str|safe }}
</div>
<hr>
{% include "actionbar/list.html" %}
<br>
{% include "comments/list.html" %}
{% endblock %}

22
templates/problem/feed.html
View file

@ -52,14 +52,22 @@
{% endfor %}, *{{problem.points | int}}
</div>
{% endif %}
<div class='blog-description content-description'>
{% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
{{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
{% if problem.pdf_description %}
<embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" style="margin-top: 0.5em">
{% endif %}
<div class="blog-description">
<div class='content-description'>
{% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
{{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
{% if problem.pdf_description %}
<embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" style="margin-top: 0.5em">
{% endif %}
</div>
{% set include_hr = True %}
{% set hide_actionbar_comment = True %}
{% set pagevote = problem.pagevote %}
{% include "actionbar/list.html" %}
{% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
<br>
<a href="#" class="view-statement-src">{{ _('View source') }}</a>
<pre class="statement-src" style="display: none">{{ problem.description|str }}</pre>
<hr>

2
templates/problem/list-base.html
View file

@ -59,9 +59,11 @@
}
</style>
{% endif %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block three_col_js %}
{% include "actionbar/media-js.html" %}
<script>
window.point_start = {{point_start}};
window.point_end = {{point_end}};

20
templates/problem/problem.html
View file

@ -1,6 +1,7 @@
{% extends "common-content.html" %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
<style>
.title-state {
font-size: 2em;
@ -79,6 +80,7 @@
{% block content_js_media %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% if request.in_contest_mode %}
<script type="text/javascript">
window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");
@ -394,15 +396,17 @@
{% block post_description_end %}
{% if request.user.is_authenticated and not request.profile.mute %}
<a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
<i class="fa fa-flag" style="margin-right:0.5em"></i>
{%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
{%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
<a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
<i class="fa fa-flag" style="margin-right:0.5em"></i>
{{ _('Request clarification') }}
{%- else -%}
{{ _('Report an issue') }}
{%- endif -%}
</a>
<div style="clear: both"></div>
</a>
<div style="clear: both"></div>
{%- else -%}
{% set actionbar_report_url = url('new_problem_ticket', problem.code) %}
{% include "actionbar/list.html" %}
<br>
{%- endif -%}
{% endif %}
{% if not (contest_problem and contest_problem.contest.use_clarifications) %}
<div id="comment-announcement-container">