Add UI for action bar

judge/migrations/0137_auto_20221116_2201.py

@@ -7,39 +7,78 @@ import django.db.models.deletion
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('judge', '0136_alter_profile_timezone'),
+        ("judge", "0136_alter_profile_timezone"),
     ]
 
     operations = [
         migrations.CreateModel(
-            name='PageVote',
+            name="PageVote",
             fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                (
-                ('page', models.CharField(db_index=True, max_length=30, verbose_name='associated page')),
+                    "id",
-                ('score', models.IntegerField(default=0, verbose_name='votes')),
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "page",
+                    models.CharField(
+                        db_index=True, max_length=30, verbose_name="associated page"
+                    ),
+                ),
+                ("score", models.IntegerField(default=0, verbose_name="votes")),
             ],
             options={
-                'verbose_name': 'pagevote',
+                "verbose_name": "pagevote",
-                'verbose_name_plural': 'pagevotes',
+                "verbose_name_plural": "pagevotes",
             },
         ),
         migrations.AlterField(
-            model_name='problemtranslation',
+            model_name="problemtranslation",
-            name='language',
+            name="language",
-            field=models.CharField(choices=[('vi', 'Vietnamese'), ('en', 'English')], max_length=7, verbose_name='language'),
+            field=models.CharField(
+                choices=[("vi", "Vietnamese"), ("en", "English")],
+                max_length=7,
+                verbose_name="language",
+            ),
         ),
         migrations.CreateModel(
-            name='PageVoteVoter',
+            name="PageVoteVoter",
             fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                (
-                ('score', models.IntegerField()),
+                    "id",
-                ('pagevote', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='votes', to='judge.pagevote')),
+                    models.AutoField(
-                ('voter', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='voted_page', to='judge.profile')),
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("score", models.IntegerField()),
+                (
+                    "pagevote",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="votes",
+                        to="judge.pagevote",
+                    ),
+                ),
+                (
+                    "voter",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="voted_page",
+                        to="judge.profile",
+                    ),
+                ),
             ],
             options={
-                'verbose_name': 'pagevote vote',
+                "verbose_name": "pagevote vote",
-                'verbose_name_plural': 'pagevote votes',
+                "verbose_name_plural": "pagevote votes",
-                'unique_together': {('voter', 'pagevote')},
+                "unique_together": {("voter", "pagevote")},
             },
         ),
     ]

judge/models/pagevote.py

@@ -18,7 +18,7 @@ class PageVote(models.Model):
     class Meta:
         verbose_name = _("pagevote")
         verbose_name_plural = _("pagevotes")
-    
+
     def vote_score(self, user):
         page_vote = PageVoteVoter.objects.filter(pagevote=self, voter=user)
         if page_vote.exists():
@@ -29,6 +29,7 @@ class PageVote(models.Model):
     def __str__(self):
         return f"pagevote for {self.page}"
 
+
 class PageVoteVoter(models.Model):
     voter = models.ForeignKey(Profile, related_name="voted_page", on_delete=CASCADE)
     pagevote = models.ForeignKey(PageVote, related_name="votes", on_delete=CASCADE)
@@ -37,4 +38,4 @@ class PageVoteVoter(models.Model):
     class Meta:
         unique_together = ["voter", "pagevote"]
         verbose_name = _("pagevote vote")
-        verbose_name_plural = _("pagevote votes")
+        verbose_name_plural = _("pagevote votes")

judge/views/blog.py

@@ -7,7 +7,7 @@ from django.utils.translation import ugettext as _
 from django.views.generic import ListView
 
 from judge.comments import CommentedDetailView
-from judge.views.pagevote import PageVoteDetailView
+from judge.views.pagevote import PageVoteDetailView, PageVoteListView
 from judge.models import (
     BlogPost,
     Comment,
@@ -93,7 +93,7 @@ class FeedView(ListView):
         return context
 
 
-class PostList(FeedView):
+class PostList(FeedView, PageVoteListView):
     model = BlogPost
     paginate_by = 10
     context_object_name = "posts"
@@ -130,6 +130,9 @@ class PostList(FeedView):
 
         return context
 
+    def get_comment_page(self, post):
+        return "b:%s" % post.id
+
 
 class TicketFeed(FeedView):
     model = Ticket

judge/views/contests.py

@@ -82,6 +82,8 @@ from judge.utils.views import (
     generic_message,
 )
 from judge.widgets import HeavyPreviewPageDownWidget
+from judge.views.pagevote import PageVoteDetailView
+
 
 __all__ = [
     "ContestList",
@@ -380,7 +382,7 @@ class ContestMixin(object):
             )
 
 
-class ContestDetail(ContestMixin, TitleMixin, CommentedDetailView):
+class ContestDetail(ContestMixin, TitleMixin, CommentedDetailView, PageVoteDetailView):
     template_name = "contest/contest.html"
 
     def get_comment_page(self):

judge/views/pagevote.py

@@ -13,7 +13,7 @@ from django.views.generic.base import TemplateResponseMixin
 from django.views.generic.detail import SingleObjectMixin
 
 from judge.dblock import LockModel
-from django.views.generic import View
+from django.views.generic import View, ListView
 
 
 __all__ = [
@@ -21,6 +21,7 @@ __all__ = [
     "downvote_page",
 ]
 
+
 @login_required
 def vote_page(request, delta):
     if abs(delta) != 1:
@@ -75,7 +76,9 @@ def vote_page(request, delta):
                         _("You already voted."), content_type="text/plain"
                     )
                 vote.delete()
-            PageVote.objects.filter(id=pagevote_id).update(score=F("score") - vote.score)
+            PageVote.objects.filter(id=pagevote_id).update(
+                score=F("score") - vote.score
+            )
         else:
             PageVote.objects.filter(id=pagevote_id).update(score=F("score") + delta)
         break
@@ -89,6 +92,7 @@ def upvote_page(request):
 def downvote_page(request):
     return vote_page(request, -1)
 
+
 class PageVoteDetailView(TemplateResponseMixin, SingleObjectMixin, View):
     pagevote_page = None
 
@@ -108,13 +112,21 @@ class PageVoteDetailView(TemplateResponseMixin, SingleObjectMixin, View):
     def get_context_data(self, **kwargs):
         context = super(PageVoteDetailView, self).get_context_data(**kwargs)
         queryset = PageVote.objects.filter(page=self.get_comment_page())
-        if (queryset.exists() == False):
+        if queryset.exists() == False:
-            pagevote = PageVote(
+            pagevote = PageVote(page=self.get_comment_page(), score=0)
-                page=self.get_comment_page(), score=0
-            )
             pagevote.save()
         context["pagevote"] = queryset.first()
         return context
 
-    
 
+class PageVoteListView(ListView):
+    pagevote_page = None
+
+    def get_context_data(self, **kwargs):
+        context = super(PageVoteListView, self).get_context_data(**kwargs)
+        for item in context["object_list"]:
+            pagevote, _ = PageVote.objects.get_or_create(
+                page=self.get_comment_page(item)
+            )
+            setattr(item, "pagevote", pagevote)
+        return context

judge/views/problem.py

@@ -86,6 +86,7 @@ from judge.utils.views import (
     generic_message,
 )
 from judge.ml.collab_filter import CollabFilter
+from judge.views.pagevote import PageVoteDetailView, PageVoteListView
 
 
 def get_contest_problem(problem, profile):
@@ -172,7 +173,11 @@ class SolvedProblemMixin(object):
 
 
 class ProblemSolution(
-    SolvedProblemMixin, ProblemMixin, TitleMixin, CommentedDetailView
+    SolvedProblemMixin,
+    ProblemMixin,
+    TitleMixin,
+    CommentedDetailView,
+    PageVoteDetailView,
 ):
     context_object_name = "problem"
     template_name = "problem/editorial.html"
@@ -237,7 +242,9 @@ class ProblemRaw(
             )
 
 
-class ProblemDetail(ProblemMixin, SolvedProblemMixin, CommentedDetailView):
+class ProblemDetail(
+    ProblemMixin, SolvedProblemMixin, CommentedDetailView, PageVoteDetailView
+):
     context_object_name = "problem"
     template_name = "problem/problem.html"
 
@@ -806,7 +813,7 @@ class ProblemList(QueryStringSortMixin, TitleMixin, SolvedProblemMixin, ListView
         return HttpResponseRedirect(request.get_full_path())
 
 
-class ProblemFeed(ProblemList):
+class ProblemFeed(ProblemList, PageVoteListView):
     model = Problem
     context_object_name = "problems"
     template_name = "problem/feed.html"
@@ -832,6 +839,9 @@ class ProblemFeed(ProblemList):
             **kwargs
         )
 
+    def get_comment_page(self, problem):
+        return "p:%s" % problem.code
+
     # arr = [[], [], ..]
     def merge_recommendation(self, arr):
         seed = datetime.now().strftime("%d%m%Y")

templates/actionbar/list.html

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

templates/actionbar/media-css.html

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

templates/actionbar/media-js.html

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

templates/blog/blog.html

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

templates/blog/content.html

@@ -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">
+    <div class="blog-description">
-        {% cache 86400 'post_summary' post.id %}
+        <div class="summary content-description">
-            {{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
+            {% cache 86400 'post_summary' post.id %}
-        {% endcache %}
+                {{ 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>

templates/blog/list.html

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

templates/common-content.html

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

templates/contest/contest.html

@@ -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 %}
-
+    {% include "actionbar/list.html" %}
-    <hr>
+    <br>
-    <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 "comments/list.html" %}
 {% endblock %}
 

templates/pagevotes/list.html

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

templates/pagevotes/media-css.html

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

templates/pagevotes/media-js.html

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

templates/problem/editorial.html

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

templates/problem/feed.html

@@ -52,14 +52,22 @@
                     {% endfor %}, *{{problem.points | int}}
                 </div>
             {% endif %}
-            <div class='blog-description content-description'>
+            <div class="blog-description">
-                {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
+                <div class='content-description'>
-                    {{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
+                    {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
-                {% endcache %}
+                        {{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
-                {% if problem.pdf_description %}
+                    {% endcache %}
-                    <embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" style="margin-top: 0.5em">
+                    {% if problem.pdf_description %}
-                {% endif %}
+                        <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>

templates/problem/list-base.html

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

templates/problem/problem.html

@@ -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">
+        {%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
-            <i class="fa fa-flag" style="margin-right:0.5em"></i>
+            <a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
-            {%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
+                <i class="fa fa-flag" style="margin-right:0.5em"></i>
                 {{ _('Request clarification') }}
-            {%- else -%}
+            </a>
-                {{ _('Report an issue') }}
+            <div style="clear: both"></div>
-            {%- endif -%}
+        {%- else -%}
-        </a>
+            {% set actionbar_report_url = url('new_problem_ticket', problem.code) %}
-        <div style="clear: both"></div>
+            {% include "actionbar/list.html" %}
+            <br>
+        {%- endif -%}
     {% endif %}
     {% if not (contest_problem and contest_problem.contest.use_clarifications) %}
         <div id="comment-announcement-container">