Clean up actionbar

resources/blog.scss

@@ -259,6 +259,10 @@
 
 
 @media (max-width: 799px) {
+    .actionbar-box {
+        margin: 8px 0;
+    }
+
     .left-sidebar-header {
         display: none;
     }
@@ -284,6 +288,7 @@
     .blog-box {
         padding-left: 5%;
         padding-right: 5%;
+        margin-bottom: 0;
     }
 
     .post-title {

templates/actionbar/list.html

@@ -1,20 +1,20 @@
 {% set logged_in = request.user.is_authenticated %}
 {% set profile = request.profile if logged_in else None %}
 {% if logged_in %}
-{% if include_hr %}
+  {% if include_hr %}
-<hr>{% endif %}
+    <hr>{% endif %}
-<div class="page-vote actionbar">
+  <div class="page-vote actionbar">
     <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 }})">
+        onclick="javascript:pagevote_upvote({{ pagevote.id }}, event)">
         <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 }})">
+        onclick="javascript:pagevote_downvote({{ pagevote.id }}, event)">
         <i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
       </span>
     </span>
@@ -30,7 +30,7 @@
             <span class="actionbar-block">
               <span id="bookmark-button-{{bookmark.id}}"
                 class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
-      onclick="javascript:bookmark({{ bookmark.id }})">
+                onclick="javascript:bookmark({{ bookmark.id }}, event)">
                 <i class="fa fa-bookmark-o" style="font-size: large;"></i>
                 <span class="actionbar-text">{{_("Bookmark")}}</span>
               </span>
@@ -50,5 +50,5 @@
                 </a>
               </span>
             {% endif %}
-</div>
+          </div>
-{% endif %}
+    {% endif %}

templates/actionbar/media-css.html

@@ -1,7 +0,0 @@
-<style>
-  @media (max-width: 799px) {
-    .actionbar-text {
-      display: none;
-    }
-  }
-</style>

templates/actionbar/media-js.html

@@ -37,7 +37,8 @@
         });
       }
 
-      window.bookmark = function(id) {
+      window.bookmark = function(id, e) {
+        e.stopPropagation();
         var $bookmark = $('#bookmark-button-' + id);
         if ($bookmark.hasClass('bookmarked')) {
           ajax_bookmark('{{ url('undobookmark') }}', id, function () {
@@ -61,7 +62,8 @@
         };
       };
 
-      window.pagevote_upvote = function (id) {
+      window.pagevote_upvote = function (id, e) {
+        e.stopPropagation();
         var $votes = get_$votes(id);
         if ($votes.upvote.hasClass('voted')) {
           ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () {
@@ -83,7 +85,8 @@
         }
       };
 
-      window.pagevote_downvote = function (id) {
+      window.pagevote_downvote = function (id, e) {
+        e.stopPropagation();
         var $votes = get_$votes(id);
         if ($votes.downvote.hasClass('voted')) {
           ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () {
@@ -104,7 +107,8 @@
           }
         }
       };
-      $(".actionbar-share").click( function() {
+      $(".actionbar-share").click(function(e) {
+        e.stopPropagation();
         link = $(this).attr("share-url") || window.location.href;
         navigator.clipboard
           .writeText(link)

templates/blog/blog.html

@@ -7,7 +7,6 @@
 
 {% block media %}
   {% include "comments/media-css.html" %}
-  {% include "actionbar/media-css.html" %}
 {% endblock %}
 
 {% block title_row %}

templates/blog/list.html

@@ -1,7 +1,6 @@
 {% 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 {

templates/contest/contest.html

@@ -18,7 +18,6 @@
 
 {% block two_col_media %}
   {% include "comments/media-css.html" %}
-  {% include "actionbar/media-css.html" %}
 {% endblock %}
 
 {% block middle_content %}

templates/organization/home.html

@@ -6,10 +6,6 @@
   {% include "actionbar/media-js.html" %}
 {% endblock %}
 
-{% block three_col_media %}
-  {% include "actionbar/media-css.html" %}
-{% endblock %}
-
 {% block middle_title %}
   <div class="page-title">
     <div class="tabs" style="border: none;">

templates/problem/editorial.html

@@ -7,7 +7,6 @@
 
 {% block content_media %}
   {% include "comments/media-css.html" %}
-  {% include "actionbar/media-css.html" %}
 {% endblock %}
 
 {% block header %}

templates/problem/feed.html

@@ -1,10 +1,10 @@
 {% extends "problem/list-base.html" %}
 {% block left_sidebar %}
-{% include "problem/left-sidebar.html" %}
+  {% include "problem/left-sidebar.html" %}
 {% endblock %}
 
 {% block middle_content %}
-<div class="problem-feed-option">
+  <div class="problem-feed-option">
     <a href="{{url('problem_feed')}}"
       class="button small {{'btn-midnightblue' if feed_type=='for_you' else 'btn-gray'}}">
       {{_('FOR YOU')}}
@@ -18,14 +18,14 @@
         {{_('VOLUNTEER')}}
       </a>
     {% endif %}
-</div>
+  </div>
-{% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
+  {% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
-<ul style="margin-bottom: 1em; margin-left: auto">
+    <ul style="margin-bottom: 1em; margin-left: auto">
       <li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
-</ul>
+    </ul>
-{% endif %}
+  {% endif %}
-{% for problem in problems %}
+  {% for problem in problems %}
-<div class="blog-box">
+    <div class="blog-box">
       <h3 class="problem-feed-name">
         <a href="{{ url('problem_detail', problem.code) }}">
           {{ problem.i18n_name }}
@@ -142,9 +142,9 @@
         {% set share_url = request.build_absolute_uri(problem.get_absolute_url()) %}
         {% include "actionbar/list.html" %}
       </div>
-</div>
+    </div>
-{% endfor %}
+  {% endfor %}
-{% if page_obj.num_pages > 1 %}
+  {% if page_obj.num_pages > 1 %}
-<div style="margin-top:10px;">{% include "list-pages.html" %}</div>
+    <div style="margin-top:10px;">{% include "list-pages.html" %}</div>
-{% endif %}
+  {% endif %}
 {% endblock %}

templates/problem/list-base.html

@@ -51,7 +51,6 @@
       }
     </style>
   {% endif %}
-  {% include "actionbar/media-css.html" %}
 {% endblock %}
 
 {% block three_col_js %}

templates/problem/problem.html

@@ -1,7 +1,6 @@
 {% extends "common-content.html" %}
 {% block content_media %}
   {% include "comments/media-css.html" %}
-  {% include "actionbar/media-css.html" %}
   <style>
     .title-state {
       font-size: 2em;