Rewrite UI for user profile page
This commit is contained in:
cuom1999
parent
ef218ccef0
commit
988a96b3dd
19 changed files with 32010 additions and 49 deletions
|
|
@ -4,7 +4,7 @@ from django.views.generic import FormView
|
|||
from django.views.generic.detail import SingleObjectMixin
|
||||
|
||||
from judge.utils.diggpaginator import DiggPaginator
|
||||
|
||||
from django.utils.html import mark_safe
|
||||
|
||||
def class_view_decorator(function_decorator):
|
||||
"""Convert a function based decorator into a class based decorator usable
|
||||
|
|
|
|||
|
|
@ -74,6 +74,11 @@ class UserPage(TitleMixin, UserMixin, DetailView):
|
|||
return (_('My account') if self.request.user == self.object.user else
|
||||
_('User %s') % self.object.user.username)
|
||||
|
||||
def get_content_title(self):
|
||||
username = self.object.user.username
|
||||
css_class = self.object.css_class
|
||||
return mark_safe(f'<span class="{css_class}">{username}</span>')
|
||||
|
||||
# TODO: the same code exists in problem.py, maybe move to problems.py?
|
||||
@cached_property
|
||||
def profile(self):
|
||||
|
|
@ -126,6 +131,28 @@ EPOCH = datetime(1970, 1, 1, tzinfo=timezone.utc)
|
|||
class UserAboutPage(UserPage):
|
||||
template_name = 'user/user-about.html'
|
||||
|
||||
def get_awards(self, ratings):
|
||||
result = {}
|
||||
|
||||
sorted_ratings = sorted(ratings,
|
||||
key=lambda x: (x.rank, -x.contest.end_time.timestamp()))
|
||||
|
||||
result['medals'] = [{
|
||||
'label': rating.contest.name,
|
||||
'ranking': rating.rank,
|
||||
'link': reverse('contest_ranking', args=(rating.contest.key,)) + '#!' + self.object.username,
|
||||
'date': date_format(rating.contest.end_time, _('M j, Y')),
|
||||
} for rating in sorted_ratings if rating.rank <= 3]
|
||||
|
||||
num_awards = 0
|
||||
for i in result:
|
||||
num_awards += len(result[i])
|
||||
|
||||
if num_awards == 0:
|
||||
result = None
|
||||
|
||||
return result
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super(UserAboutPage, self).get_context_data(**kwargs)
|
||||
ratings = context['ratings'] = self.object.ratings.order_by('-contest__end_time').select_related('contest') \
|
||||
|
|
@ -142,6 +169,8 @@ class UserAboutPage(UserPage):
|
|||
'height': '%.3fem' % rating_progress(rating.rating),
|
||||
} for rating in ratings]))
|
||||
|
||||
context['awards'] = self.get_awards(ratings)
|
||||
|
||||
if ratings:
|
||||
user_data = self.object.ratings.aggregate(Min('rating'), Max('rating'))
|
||||
global_data = Rating.objects.aggregate(Min('rating'), Max('rating'))
|
||||
|
|
|
|||
BIN
resources/awards/bronze-medal.png
Normal file
BIN
resources/awards/bronze-medal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
resources/awards/gold-medal.png
Normal file
BIN
resources/awards/gold-medal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
resources/awards/medals.png
Normal file
BIN
resources/awards/medals.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
BIN
resources/awards/silver-medal.png
Normal file
BIN
resources/awards/silver-medal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
|
|
@ -44,10 +44,6 @@
|
|||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.user {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
|
|
|||
7
resources/icofont.min.css
vendored
Normal file
7
resources/icofont.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
18942
resources/icofont/demo.html
Normal file
18942
resources/icofont/demo.html
Normal file
File diff suppressed because it is too large
Load diff
BIN
resources/icofont/fonts/icofont.eot
Normal file
BIN
resources/icofont/fonts/icofont.eot
Normal file
Binary file not shown.
2105
resources/icofont/fonts/icofont.svg
Normal file
2105
resources/icofont/fonts/icofont.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.3 MiB |
BIN
resources/icofont/fonts/icofont.ttf
Normal file
BIN
resources/icofont/fonts/icofont.ttf
Normal file
Binary file not shown.
BIN
resources/icofont/fonts/icofont.woff
Normal file
BIN
resources/icofont/fonts/icofont.woff
Normal file
Binary file not shown.
BIN
resources/icofont/fonts/icofont.woff2
Normal file
BIN
resources/icofont/fonts/icofont.woff2
Normal file
Binary file not shown.
10757
resources/icofont/icofont.css
Normal file
10757
resources/icofont/icofont.css
Normal file
File diff suppressed because it is too large
Load diff
7
resources/icofont/icofont.min.css
vendored
Normal file
7
resources/icofont/icofont.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -56,6 +56,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{ static('libs/featherlight/featherlight.min.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('libs/clipboard/tooltip.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('libs/select2/select2.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('icofont/icofont.min.css') }}">
|
||||
{% endcompress %}
|
||||
<link rel="canonical"
|
||||
href="{{ DMOJ_SCHEME }}://{{ DMOJ_CANONICAL|default(site.domain) }}{{ request.get_full_path() }}">
|
||||
|
|
|
|||
|
|
@ -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') }}
|
||||
<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 %}
|
||||
</button>
|
||||
</form>
|
||||
<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 =
|
||||
|
|
|
|||
|
|
@ -23,6 +23,61 @@
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.225;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info-header {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.user-info-container {
|
||||
display: grid;
|
||||
grid-column-gap: .5rem;
|
||||
grid-row-gap: 1rem;
|
||||
grid-template-columns: repeat(6, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-info-body {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.user-info-container {
|
||||
grid-template-columns: repeat(2, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.user-stat {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.user-stat-container {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.user-stat-header {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#awards img {
|
||||
height: 105px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -37,40 +92,47 @@
|
|||
<img src="{{ gravatar(user, 135) }}" width="135px" height="135px">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div><b>
|
||||
{%- trans trimmed counter=user.problem_count %}
|
||||
{{ counter }} problem solved
|
||||
{% pluralize %}
|
||||
{{ counter }} problems solved
|
||||
{% endtrans -%}
|
||||
</b></div>
|
||||
|
||||
{% if not user.is_unlisted %}
|
||||
<div><b class="semibold">{{ _('Rank by points:') }}</b> #{{ rank }}</div>
|
||||
{% if request.user != user.user %}
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<button style="width:135px" 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>
|
||||
{% endif %}
|
||||
<div>
|
||||
<b class="semibold">{{ _('Total points:') }}</b>
|
||||
<span title="{{ user.performance_points|floatformat(2) }}">
|
||||
{{ user.performance_points|floatformat(0) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div>
|
||||
<a href="{{ url('all_user_submissions', user.user.username) }}">{{ _('View submissions') }}</a>
|
||||
<form action="{{ url('all_user_submissions', user.user.username) }}">
|
||||
<input type="submit" value="{{ _('View submissions') }}" style="width:135px">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if ratings %}
|
||||
<br>
|
||||
<div><b>{% trans num=ratings|length %}{{ num }} contests written{% endtrans %}</b></div>
|
||||
{% if not user.is_unlisted %}
|
||||
<div><b class="semibold">{{ _('Rank by rating:') }}</b> #{{ rating_rank }}</div>
|
||||
{% endif %}
|
||||
<div><b class="semibold">{{ _('Rating:') }}</b> {{ rating_number(rating) }}</div>
|
||||
<div><b class="semibold">{{ _('Volatility:') }}</b> {{ rating.volatility }}</div>
|
||||
<div><b class="semibold">{{ _('Min. rating:') }}</b> {{ rating_number(min_rating) }}</div>
|
||||
<div><b class="semibold">{{ _('Max rating:') }}</b> {{ rating_number(max_rating) }}</div>
|
||||
<div style="border: 3px dashed darkgray; padding: 0.3em; margin-right: 15px; border-radius: 6px;">
|
||||
<div class="user-stat-container">
|
||||
<div class="user-stat-header">{{_('Contests written')}}:</div>
|
||||
<div class="user-stat">{{ratings|length}}</div>
|
||||
</div>
|
||||
<div class="user-stat-container">
|
||||
<div class="user-stat-header">{{ _('Volatility:') }}</div>
|
||||
<div class="user-stat">{{ rating.volatility }}</div>
|
||||
</div>
|
||||
<div class="user-stat-container">
|
||||
<div class="user-stat-header">{{ _('Min. rating:') }}</div>
|
||||
<div class="user-stat">{{ rating_number(min_rating) }}</div>
|
||||
</div>
|
||||
<div class="user-stat-container">
|
||||
<div class="user-stat-header">{{ _('Max rating:') }}</div>
|
||||
<div class="user-stat">{{ rating_number(max_rating) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="user-content">{% block user_content %}{% endblock %}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue