Clean up actionbar

This commit is contained in:
cuom1999 2023-02-07 17:22:37 -06:00
parent ec893149d1
commit 5f12afdda9
12 changed files with 201 additions and 209 deletions

View file

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

View file

@ -1,54 +1,54 @@
{% set logged_in = request.user.is_authenticated %} {% set logged_in = request.user.is_authenticated %}
{% set profile = request.profile if logged_in else None %} {% set profile = request.profile if logged_in else None %}
{% if logged_in %} {% 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 class="actionbar-block" style="justify-content: flex-start;">
<span id="like-button-{{pagevote.id}}" <span id="like-button-{{pagevote.id}}"
class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}" 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> <span class="pagevote-score" id="pagevote-score-{{pagevote.id}}">{{ pagevote.score }}</span>
<i class="fa fa-thumbs-o-up" style="font-size: large;"></i> <i class="fa fa-thumbs-o-up" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Like")}}</span> <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 }}, event)">
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
</span>
</span> </span>
<span id="dislike-button-{{pagevote.id}}" {% if not hide_actionbar_comment %}
class="dislike-button actionbar-button {% if pagevote.vote_score(request.profile) == -1 %}voted{% endif %}" <span class="actionbar-block">
onclick="javascript:pagevote_downvote({{ pagevote.id }})"> <span class="actionbar-button actionbar-comment">
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i> <i class="fa fa-comment-o" style="font-size: large;"></i>
</span> <span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif
</span> %}</span>
{% if not hide_actionbar_comment %} </span>
<span class="actionbar-block"> </span>
<span class="actionbar-button actionbar-comment"> {% endif %}
<i class="fa fa-comment-o" style="font-size: large;"></i> <span class="actionbar-block">
<span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif <span id="bookmark-button-{{bookmark.id}}"
%}</span> class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
</span> onclick="javascript:bookmark({{ bookmark.id }}, event)">
</span> <i class="fa fa-bookmark-o" style="font-size: large;"></i>
{% endif %} <span class="actionbar-text">{{_("Bookmark")}}</span>
<span class="actionbar-block"> </span>
<span id="bookmark-button-{{bookmark.id}}" </span>
class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}" <span class="actionbar-block" style="justify-content: flex-end;">
onclick="javascript:bookmark({{ bookmark.id }})"> <span class="actionbar-button actionbar-share" style="position: relative"
<i class="fa fa-bookmark-o" style="font-size: large;"></i> {{"share-url=" + share_url if share_url else ""}}>
<span class="actionbar-text">{{_("Bookmark")}}</span> <i class=" fa fa-share" style="font-size: large;"></i>
</span> <span class="actionbar-text">{{_("Share")}}</span>
</span> </span>
<span class="actionbar-block" style="justify-content: flex-end;"> </span>
<span class="actionbar-button actionbar-share" style="position: relative" {% if actionbar_report_url %}
{{"share-url=" + share_url if share_url else ""}}> <span class="actionbar-block">
<i class=" fa fa-share" style="font-size: large;"></i> <a class="actionbar-button black" href="{{actionbar_report_url}}">
<span class="actionbar-text">{{_("Share")}}</span> <i class="fa fa-flag-o" style="font-size: large;"></i>
</span> <span class="actionbar-text">{{_("Report")}}</span>
</span> </a>
{% if actionbar_report_url %} </span>
<span class="actionbar-block"> {% endif %}
<a class="actionbar-button black" href="{{actionbar_report_url}}"> </div>
<i class="fa fa-flag-o" style="font-size: large;"></i> {% endif %}
<span class="actionbar-text">{{_("Report")}}</span>
</a>
</span>
{% endif %}
</div>
{% endif %}

View file

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

View file

@ -37,7 +37,8 @@
}); });
} }
window.bookmark = function(id) { window.bookmark = function(id, e) {
e.stopPropagation();
var $bookmark = $('#bookmark-button-' + id); var $bookmark = $('#bookmark-button-' + id);
if ($bookmark.hasClass('bookmarked')) { if ($bookmark.hasClass('bookmarked')) {
ajax_bookmark('{{ url('undobookmark') }}', id, function () { 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); var $votes = get_$votes(id);
if ($votes.upvote.hasClass('voted')) { if ($votes.upvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () { 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); var $votes = get_$votes(id);
if ($votes.downvote.hasClass('voted')) { if ($votes.downvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () { 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; link = $(this).attr("share-url") || window.location.href;
navigator.clipboard navigator.clipboard
.writeText(link) .writeText(link)

View file

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

View file

@ -1,7 +1,6 @@
{% extends "three-column-content.html" %} {% extends "three-column-content.html" %}
{% block three_col_media %} {% block three_col_media %}
{% include "blog/media-css.html" %} {% include "blog/media-css.html" %}
{% include "actionbar/media-css.html" %}
<style> <style>
@media (max-width: 799px) { @media (max-width: 799px) {
.title { .title {

View file

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

View file

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

View file

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

View file

@ -1,150 +1,150 @@
{% extends "problem/list-base.html" %} {% extends "problem/list-base.html" %}
{% block left_sidebar %} {% block left_sidebar %}
{% include "problem/left-sidebar.html" %} {% include "problem/left-sidebar.html" %}
{% endblock %} {% endblock %}
{% block middle_content %} {% block middle_content %}
<div class="problem-feed-option"> <div class="problem-feed-option">
<a href="{{url('problem_feed')}}" <a href="{{url('problem_feed')}}"
class="button small {{'btn-midnightblue' if feed_type=='for_you' else 'btn-gray'}}"> class="button small {{'btn-midnightblue' if feed_type=='for_you' else 'btn-gray'}}">
{{_('FOR YOU')}} {{_('FOR YOU')}}
</a>
<a href="{{url('problem_feed_new')}}" class="button small {{'btn-midnightblue' if feed_type=='new' else 'btn-gray'}}">
{{_('NEW')}}
</a>
{% if request.user.has_perm('judge.suggest_problem_changes') %}
<a href="{{url('problem_feed_volunteer')}}"
class="button small {{'btn-midnightblue' if feed_type=='volunteer' else 'btn-gray'}}">
{{_('VOLUNTEER')}}
</a>
{% endif %}
</div>
{% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
<ul style="margin-bottom: 1em; margin-left: auto">
<li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
</ul>
{% endif %}
{% for problem in problems %}
<div class="blog-box">
<h3 class="problem-feed-name">
<a href="{{ url('problem_detail', problem.code) }}">
{{ problem.i18n_name }}
</a> </a>
{% if problem.id in completed_problem_ids %} <a href="{{url('problem_feed_new')}}" class="button small {{'btn-midnightblue' if feed_type=='new' else 'btn-gray'}}">
<i class="solved-problem-color fa fa-check-circle"></i> {{_('NEW')}}
{% elif problem.id in attempted_problems %} </a>
<i class="attempted-problem-color fa fa-minus-circle"></i> {% if request.user.has_perm('judge.suggest_problem_changes') %}
{% else %} <a href="{{url('problem_feed_volunteer')}}"
<i class="unsolved-problem-color fa fa-minus-circle"></i> class="button small {{'btn-midnightblue' if feed_type=='volunteer' else 'btn-gray'}}">
{{_('VOLUNTEER')}}
</a>
{% endif %} {% endif %}
</h3>
{% with authors=problem.authors.all() %}
{% if authors %}
<div class="problem-feed-info-entry">
<i class="fa fa-pencil-square-o fa-fw"></i>
<span class="pi-value">{{ link_users(authors) }}</span>
</div> </div>
{% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
<ul style="margin-bottom: 1em; margin-left: auto">
<li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
</ul>
{% endif %} {% endif %}
{% endwith %} {% for problem in problems %}
{% if show_types %} <div class="blog-box">
<div class="problem-feed-types"> <h3 class="problem-feed-name">
<i class="fa fa-tag"></i> <a href="{{ url('problem_detail', problem.code) }}">
{% for type in problem.types_list %} {{ problem.i18n_name }}
<span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %} </a>
{% endfor %}, *{{problem.points | int}} {% if problem.id in completed_problem_ids %}
</div> <i class="solved-problem-color fa fa-check-circle"></i>
{% endif %} {% elif problem.id in attempted_problems %}
<div class="blog-description"> <i class="attempted-problem-color fa fa-minus-circle"></i>
<div class='content-description'> {% else %}
{% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %} <i class="unsolved-problem-color fa fa-minus-circle"></i>
{{ problem.description|markdown(lazy_load=True)|reference|str|safe }} {% endif %}
{% endcache %} </h3>
{% if problem.pdf_description %} {% with authors=problem.authors.all() %}
<embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" {% if authors %}
style="margin-top: 0.5em"> <div class="problem-feed-info-entry">
<i class="fa fa-pencil-square-o fa-fw"></i>
<span class="pi-value">{{ link_users(authors) }}</span>
</div>
{% endif %}
{% endwith %}
{% if show_types %}
<div class="problem-feed-types">
<i class="fa fa-tag"></i>
{% for type in problem.types_list %}
<span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %}
{% endfor %}, *{{problem.points | int}}
</div>
{% endif %} {% 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>
{% 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>
<center>
<h3>{{_('Volunteer form')}}</h3>
</center>
<br>
<button class="edit-btn" id="edit-{{problem.id}}" pid="{{problem.id}}" style="float: right">{{_('Edit')}}</button>
<form class="volunteer-form" id="form-{{problem.id}}" pid="{{problem.id}}" style="display: none;" method="POST">
<input type="submit" class="volunteer-submit-btn" id="submit-{{problem.id}}" pid="{{problem.id}}"
pcode="{{problem.code}}" style="float: right" value="{{_('Submit')}}">
<table class="table">
<thead>
<tr>
<th>
</th>
<th>
{{_('Value')}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="30%">
<label for="knowledge_point-{{problem.id}}"><i>{{ _('Knowledge point') }}</i></label>
</td>
<td>
<input id="knowledge_point-{{problem.id}}" type="number" class="point-input" required>
</td>
</tr>
<tr>
<td width="30%">
<label for="thinking_point-{{problem.id}}"><i>{{ _('Thinking point') }}</i></label>
</td>
<td>
<input id="thinking_point-{{problem.id}}" type="number" class="point-input" required>
</td>
</tr>
<tr>
<td width="30%">
<label for="types"><i>{{ _('Problem types') }}</i></label>
</td>
<td>
<select id="volunteer-types-{{problem.id}}" name="types" multiple>
{% for type in problem_types %}
<option value="{{ type.id }}" {% if type in problem.types.all() %} selected{% endif %}>
{{ type.full_name }}
</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td width="30%">
<label for="feedback"><i>{{ _('Feedback') }}</i></label>
</td>
<td>
<textarea id="feedback-{{problem.id}}" rows="2" style="width: 100%"
placeholder="{{_('Any additional note here')}}"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
<center id="thank-{{problem.id}}" style="display: none; margin-top: 3em"></center>
{% endif %}
<div class="show-more"> {{_("...More")}} </div>
</div>
<div class="actionbar-box">
{% set pagevote = problem.pagevote %}
{% set bookmark = problem.bookmark %}
{% set hide_actionbar_comment = True %}
{% set include_hr = False %}
{% set share_url = request.build_absolute_uri(problem.get_absolute_url()) %}
{% include "actionbar/list.html" %}
</div>
</div> </div>
{% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %} {% endfor %}
<br> {% if page_obj.num_pages > 1 %}
<a href="#" class="view-statement-src">{{ _('View source') }}</a> <div style="margin-top:10px;">{% include "list-pages.html" %}</div>
<pre class="statement-src" style="display: none">{{ problem.description|str }}</pre> {% endif %}
<hr>
<center>
<h3>{{_('Volunteer form')}}</h3>
</center>
<br>
<button class="edit-btn" id="edit-{{problem.id}}" pid="{{problem.id}}" style="float: right">{{_('Edit')}}</button>
<form class="volunteer-form" id="form-{{problem.id}}" pid="{{problem.id}}" style="display: none;" method="POST">
<input type="submit" class="volunteer-submit-btn" id="submit-{{problem.id}}" pid="{{problem.id}}"
pcode="{{problem.code}}" style="float: right" value="{{_('Submit')}}">
<table class="table">
<thead>
<tr>
<th>
</th>
<th>
{{_('Value')}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="30%">
<label for="knowledge_point-{{problem.id}}"><i>{{ _('Knowledge point') }}</i></label>
</td>
<td>
<input id="knowledge_point-{{problem.id}}" type="number" class="point-input" required>
</td>
</tr>
<tr>
<td width="30%">
<label for="thinking_point-{{problem.id}}"><i>{{ _('Thinking point') }}</i></label>
</td>
<td>
<input id="thinking_point-{{problem.id}}" type="number" class="point-input" required>
</td>
</tr>
<tr>
<td width="30%">
<label for="types"><i>{{ _('Problem types') }}</i></label>
</td>
<td>
<select id="volunteer-types-{{problem.id}}" name="types" multiple>
{% for type in problem_types %}
<option value="{{ type.id }}" {% if type in problem.types.all() %} selected{% endif %}>
{{ type.full_name }}
</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td width="30%">
<label for="feedback"><i>{{ _('Feedback') }}</i></label>
</td>
<td>
<textarea id="feedback-{{problem.id}}" rows="2" style="width: 100%"
placeholder="{{_('Any additional note here')}}"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
<center id="thank-{{problem.id}}" style="display: none; margin-top: 3em"></center>
{% endif %}
<div class="show-more"> {{_("...More")}} </div>
</div>
<div class="actionbar-box">
{% set pagevote = problem.pagevote %}
{% set bookmark = problem.bookmark %}
{% set hide_actionbar_comment = True %}
{% set include_hr = False %}
{% set share_url = request.build_absolute_uri(problem.get_absolute_url()) %}
{% include "actionbar/list.html" %}
</div>
</div>
{% endfor %}
{% if page_obj.num_pages > 1 %}
<div style="margin-top:10px;">{% include "list-pages.html" %}</div>
{% endif %}
{% endblock %} {% endblock %}

View file

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

View file

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