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

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 KiB

BIN
resources/awards/medals.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 597 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

View file

@ -44,10 +44,6 @@
margin-left: 0.5em;
}
.user {
font-weight: bold;
}
.clear {
clear: both;
}

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

File diff suppressed because it is too large Load diff

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

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

File diff suppressed because one or more lines are too long

View file

@ -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() }}">

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 =

View file

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