Rewrite UI for user profile page

This commit is contained in:
cuom1999 2021-07-22 22:54:48 -05:00
parent ef218ccef0
commit 988a96b3dd
19 changed files with 32010 additions and 49 deletions

View file

@ -9,23 +9,59 @@
{% block user_content %}
<div class="content-description">
{% if request.user != user.user %}
<form method="post">
{% csrf_token %}
<button class="{{ 'unfollow' if followed else 'follow' }}">
{% if followed %}
<i class="fa fa-remove"></i>
{{ _('Unfollow') }}
{% else %}
<i class="fa fa-user-plus"></i>
{{ _('Follow') }}
{% endif %}
</button>
</form>
<div class="user-info-container">
<div class="user-info-card">
<div class="user-info">
<div class="user-info-header"><i class="fa fa-star {{user.css_class}}"></i> {{_('Rating')}}</div>
<div class="user-info-body {{user.css_class}}">{{user.rating}}</div>
</div>
</div>
<div class="user-info-card">
<div class="user-info">
<div class="user-info-header"
title="
{%- trans trimmed counter=user.problem_count %}
{{ counter }} problem solved
{% pluralize %}
{{ counter }} problems solved
{% endtrans -%}"
><i style="color: darkcyan;" class="fa fa-slack"></i> {{_('Problems')}}</div>
<div class="user-info-body">{{user.problem_count}}</div>
</div>
</div>
<div class="user-info-card">
<div class="user-info">
<div class="user-info-header"
title="{{_('Total points')}}"
><i style="color:green" class="icofont-tick-mark"></i> {{_('Points')}}</div>
<div class="user-info-body"><span title="{{ user.performance_points|floatformat(2) }}">
{{ user.performance_points|floatformat(0) }}
</span></div>
</div>
</div>
{% if not user.is_unlisted %}
<div class="user-info-card">
<div class="user-info">
<div class="user-info-header" title="{{_('Rank by rating')}}"><i style="color: peru" class="fa fa-globe" ></i> {{_('Rating')}}</div>
<div class="user-info-body">{{rating_rank}}</div>
</div>
</div>
{% endif %}
<div class="user-info-card">
<div class="user-info">
<div class="user-info-header" title="{{_('Rank by points')}}"><i style="color: blue" class="fa fa-globe" ></i> {{_('Points')}}</div>
<div class="user-info-body">{{rank}}</div>
</div>
</div>
</div>
{% if user.user.first_name %}
<p style="font-size:1.4em; text-align: center;">
{{user.user.first_name}}{% if user.user.last_name %} ({{user.user.last_name}}){% endif %}
</p>
{% endif %}
{% with orgs=user.organizations.all() %}
{% if orgs %}
<p style="margin-top: 0"><b>{{ _('From') }}</b>
<p style="margin-top: 0"><i class="fa fa-university"></i> {{ _('From') }}
{% for org in orgs -%}
<a href="{{ org.get_absolute_url() }}">{{ org.name }}</a>
{%- if not loop.last %}, {% endif %}
@ -59,6 +95,26 @@
<br>
{% endif %}
{% if awards %}
<br>
<div id="awards">
<h4>{{_('Awards')}}</h4>
{% for medal in awards.medals %}
{% if medal.ranking == 1 %}
{% set medal_url = static('awards/gold-medal.png') %}
{% elif medal.ranking == 2%}
{% set medal_url = static('awards/silver-medal.png') %}
{% else %}
{% set medal_url = static('awards/bronze-medal.png') %}
{% endif %}
<a href={{medal.link}}>
<img src="{{medal_url}}"
title="{% trans label=medal.label, date=medal.date%}{{label}} ({{date}}){% endtrans %}">
</a>
{% endfor%}
</div>
{% endif %}
<br>
<h4 id="submission-activity-header"></h4>
<div id="submission-activity" style="display: none;">
@ -124,6 +180,7 @@
</div>
{% if rating %}
<br>
<h4>{{_('Rating History')}}</h4>
<div id="rating-chart">
<canvas></canvas>
@ -216,8 +273,7 @@
)
if (year == current_year) {
$('#submission-activity-header').text(
ngettext("%(cnt)d submission in the last year", "%(cnt)d submissions in the last year", sum_activity)
.replace("%(cnt)d", sum_activity)
sum_activity + " " + "{{_('submissions in the last year')}}"
)
}
@ -229,7 +285,6 @@
$div.find('#submission-' + current_weekday)
.append($('<td>').addClass('activity-blank').append('<div>'));
}
days.forEach(obj => {
var level = activity_breakdown.findIndex(x => x >= obj.activity);
var text =