Rewrite UI for user profile page

judge/utils/views.py

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

judge/views/user.py

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

resources/chatbox.scss

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

templates/base.html

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

templates/user/user-about.html

@@ -9,23 +9,59 @@
 
 {% block user_content %}
     <div class="content-description">
-        {% if request.user != user.user %}
+        <div class="user-info-container">
-        <form method="post">
+            <div class="user-info-card">
-            {% csrf_token %}
+                <div class="user-info">
-            <button class="{{ 'unfollow' if followed else 'follow' }}">
+                    <div class="user-info-header"><i class="fa fa-star {{user.css_class}}"></i> {{_('Rating')}}</div>
-                {% if followed %}
+                    <div class="user-info-body {{user.css_class}}">{{user.rating}}</div>
-                    <i class="fa fa-remove"></i>
+                </div>
-                    {{ _('Unfollow') }}
+            </div>
-                {% else %}
+            <div class="user-info-card">
-                    <i class="fa fa-user-plus"></i>
+                <div class="user-info">
-                    {{ _('Follow') }}
+                    <div class="user-info-header"
-                {% endif %}
+                        title="
-            </button>
+                        {%- trans trimmed counter=user.problem_count %}
-        </form>
+                            {{ 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)
+                        sum_activity + " " + "{{_('submissions in the last year')}}"
-                            .replace("%(cnt)d", sum_activity)
                     )
                 }
 
@@ -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 =

templates/user/user-base.html

@@ -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>
-
+            {% if request.user != user.user %}
-            <div><b>
+            <form method="post">
-                {%- trans trimmed counter=user.problem_count %}
+                {% csrf_token %}
-                    {{ counter }} problem solved
+                <button style="width:135px" class="{{ 'unfollow' if followed else 'follow' }}">
-                {% pluralize %}
+                    {% if followed %}
-                    {{ counter }} problems solved
+                        <i class="fa fa-remove"></i>
-                {% endtrans -%}
+                        {{ _('Unfollow') }}
-            </b></div>
+                    {% else %}
-
+                        <i class="fa fa-user-plus"></i>
-            {% if not user.is_unlisted %}
+                        {{ _('Follow') }}
-                <div><b class="semibold">{{ _('Rank by points:') }}</b> #{{ rank }}</div>
+                    {% 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>
+                <div style="border: 3px dashed darkgray; padding: 0.3em; margin-right: 15px; border-radius: 6px;">
-                {% if not user.is_unlisted %}
+                    <div class="user-stat-container">
-                    <div><b class="semibold">{{ _('Rank by rating:') }}</b> #{{ rating_rank }}</div>
+                        <div class="user-stat-header">{{_('Contests written')}}:</div>
-                {% endif %}
+                        <div class="user-stat">{{ratings|length}}</div>
-                <div><b class="semibold">{{ _('Rating:') }}</b> {{ rating_number(rating) }}</div>
+                    </div>
-                <div><b class="semibold">{{ _('Volatility:') }}</b> {{ rating.volatility }}</div>
+                    <div class="user-stat-container">
-                <div><b class="semibold">{{ _('Min. rating:') }}</b> {{ rating_number(min_rating) }}</div>
+                        <div class="user-stat-header">{{ _('Volatility:') }}</div>
-                <div><b class="semibold">{{ _('Max rating:') }}</b> {{ rating_number(max_rating) }}</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>