Standardize user image + minor bugs

judge/migrations/0185_rename_org_profile_colum.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.18 on 2024-04-12 05:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("judge", "0184_contest_rate_limit"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="organizationprofile",
+            old_name="users",
+            new_name="profile",
+        ),
+    ]

judge/models/profile.py

@@ -481,7 +481,7 @@ class Friend(models.Model):
 
 
 class OrganizationProfile(models.Model):
-    users = models.ForeignKey(
+    profile = models.ForeignKey(
         Profile,
         verbose_name=_("user"),
         related_name="last_visit",
@@ -500,22 +500,26 @@ class OrganizationProfile(models.Model):
     )
 
     @classmethod
-    def remove_organization(self, users, organization):
+    def remove_organization(self, profile, organization):
-        organizationprofile = self.objects.filter(
+        organization_profile = self.objects.filter(
-            users=users, organization=organization
+            profile=profile, organization=organization
         )
-        if organizationprofile.exists():
+        if organization_profile.exists():
-            organizationprofile.delete()
+            organization_profile.delete()
 
     @classmethod
-    def add_organization(self, users, organization):
+    def add_organization(self, profile, organization):
-        self.remove_organization(users, organization)
+        self.remove_organization(profile, organization)
-        new_organization = OrganizationProfile(users=users, organization=organization)
+        new_row = OrganizationProfile(profile=profile, organization=organization)
-        new_organization.save()
+        new_row.save()
 
     @classmethod
-    def get_most_recent_organizations(self, users):
+    def get_most_recent_organizations(cls, profile):
-        return self.objects.filter(users=users).order_by("-last_visit")[:5]
+        queryset = cls.objects.filter(profile=profile).order_by("-last_visit")[:5]
+        queryset = queryset.select_related("organization").defer("organization__about")
+        organizations = [op.organization for op in queryset]
+
+        return organizations
 
 
 @receiver([post_save], sender=User)

judge/views/organization.py

@@ -242,6 +242,7 @@ class OrganizationList(TitleMixin, ListView, OrganizationBase):
             super(OrganizationList, self)
             .get_queryset()
             .annotate(member_count=Count("member"))
+            .defer("about")
         )
 
     def get_context_data(self, **kwargs):

resources/base.scss

@@ -182,9 +182,6 @@ header {
         cursor: pointer;
         padding: 3.5px;
     }
-    img {
-        border-radius: 50%;
-    }
 }
 
 #nav-shadow {

resources/common.js

@@ -532,6 +532,7 @@ $(function() {
             content = JSON.parse(content);
             $('#content').html(content.html);
             onWindowReady();
+            window.PAGE_FROM_BACK_BUTTON_CACHE = true;
             $(window).scrollTop(content.scrollOffset - 100);
             window.page = content.page;
             window.has_next_page = content.has_next_page;

resources/submission.scss

@@ -85,20 +85,9 @@
         }
     }
     .sub-user-img {
-        flex-shrink: 0;
         width: 70px;
         height: 70px;
-        background-color: #ddd;
-        border-radius: 50%;
-        overflow: hidden;
         margin-right: 15px;
-        display: flex;
-        align-items: center;
-
-        img {
-            width: 100%;
-            height: auto;
-        }
     }
 }
 

resources/users.scss

@@ -267,7 +267,7 @@ a.edit-profile {
 
 .user-sidebar {
     flex: 0 0 150px;
-    padding-left: 1em;
+    padding-right: 1em;
 }
 
 .user-content {
@@ -276,6 +276,20 @@ a.edit-profile {
     word-wrap: break-word;
 }
 
+.user-img {
+    flex-shrink: 0;
+    background-color: #ddd;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}
+
 @media not all and (min-width: 600px) {
     .user-info-page {
         display: block;

templates/base.html

@@ -179,7 +179,7 @@
           </span>
           {% if request.user.is_authenticated %}
             <span id="user-links">
-              <img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">
+              <img class="user-img" src="{{ gravatar(request.profile, 32) }}" height="24" width="24">
               <i class="fa fa-angle-down" style="font-size: 18px; padding-top: 8px;"></i>
             </span>
             <div class="dropdown" id="userlink_dropdown" role="tooptip">
@@ -277,9 +277,9 @@
         <div id="announcement">{{ i18n_config.announcement|safe }}</div>
       {% endif %}
 
-      <script src="https://unpkg.com/@popperjs/core@2"></script>
       {% compress js %}
         <script>{{ inlinei18n(LANGUAGE_CODE)|safe }}</script>
+        <script src="{{ static('libs/popper.min.js') }}"></script>
         <script src="{{ static('libs/jquery-cookie.js') }}"></script>
         <script src="{{ static('libs/jquery-taphold.js') }}"></script>
         <script src="{{ static('libs/jquery.unveil.js') }}"></script>

templates/blog/content.html

@@ -1,10 +1,12 @@
 {% for post in posts%}
   <section class="{% if post.sticky %}sticky {% endif %}blog-box">
     <div style="margin-bottom: 0.5em">
-      <span class="time">
+      <span class="item-header time">
         {% with authors=post.authors.all() %}
           {%- if authors -%}
-            <img src="{{gravatar(authors[0])}}" style="width: 1.5em; border-radius: 50%; margin-bottom: -0.3em">
+            <span class="user-img" style="width: 1.5em; height: 1.5em">
+              <img src="{{gravatar(authors[0])}}">
+            </span>
             <span class="post-authors">{{ link_users(authors) }}</span>
           {%- endif -%}
         {% endwith %}

templates/blog/list.html

@@ -7,8 +7,11 @@
         clear: both;
       }
     }
-    .time {
+    .item-header {
       margin-left: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.2em;
     }
 
     .no-clarifications-message {

templates/chat/chat_css.html

@@ -66,7 +66,6 @@
     .profile-pic {
       height: 2.6em;
       width: 2.6em;
-      border-radius: 50%;
       margin-top: 0.1em;
       float: left;
     }

templates/chat/message.html

@@ -1,6 +1,6 @@
 <li class="message" id="message-{{ message.id }}" message-id="{{ message.id }}">
   <a href="{{ url('user_page', message.author.username) }}">
-    <img src="{{ gravatar(message.author, 135) }}" class="profile-pic">
+    <img src="{{ gravatar(message.author, 135) }}" class="profile-pic user-img">
   </a>
   <div class="body-message">
     <div class="user-time">

templates/chat/online_status.html

@@ -1,6 +1,6 @@
 <li class="status-row" id="lobby_row">
   <div class="status-container">
-    <img src="{{ static('icons/logo.svg') }}" style="height:1.3em">
+    <img src="{{ static('icons/icon.svg') }}" style="height:32px">
   </div>
   <span style="padding-left:0.5em">
     <b>{{_('Lobby')}}</b>
@@ -23,7 +23,7 @@
       {% for user in section.user_list %}
         <li class="click_space status-row" id="click_space_{{user.user.id}}" value="{{user.url}}">
           <div class="status-container">
-            <img src="{{ gravatar(user.user, 135) }}" class="status-pic">
+            <img src="{{ gravatar(user.user, 135) }}" class="status-pic user-img">
             <svg style="position:absolute;" height="32" width="32">
               <circle class="status-circle" fill="{{'green' if user.is_online else 'red'}}"/>
             </svg>

templates/chat/user_online_status.html

@@ -3,7 +3,7 @@
 </div>
 {% if other_user %}
   <div class="status-container" style="height: 3em; width: 3em;">
-    <img src="{{ gravatar(other_user, 135) }}" class="info-pic">
+    <img src="{{ gravatar(other_user, 135) }}" class="info-pic user-img">
     <svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
       <circle class="info-circle"
         fill="{{'green' if other_online else 'red'}}"/>
@@ -11,7 +11,7 @@
   </div>
 {% else %}
   <div class="status-container" style="height: 3em;">
-    <img src="{{ static('icons/logo.svg') }}" class="info-pic" style="border-radius: 0px;">
+    <img src="{{ static('icons/icon.svg') }}" class="info-pic" style="border-radius: 0px;">
   </div>
 {% endif %}
 <span class="info-name username">

templates/comments/content-list.html

@@ -25,8 +25,8 @@
       <div class="detail">
         <div class="header">
           {% with author=node.author, user=node.author.user %}
-            <a href="{{ url('user_page', user.username) }}" class="user comment-img">
+            <a href="{{ url('user_page', user.username) }}" class="user comment-img user-img">
-              <img src="{{ gravatar(author, 135) }}" class="gravatar">
+              <img src="{{ gravatar(author, 135) }}">
             </a>
           {% endwith %}
           {{ link_user(node.author) }},&nbsp;

templates/organization/list.html

@@ -5,12 +5,9 @@
     .organization-container .organization-row:last-child {
       border-bottom: none;
     }
-
     .org-logo {
-      vertical-align: middle;
       height: 2em;
       width: 2em;
-      display: inline-block;
       margin-right: 1em;
       margin-left: 0.5em;
     }
@@ -31,8 +28,12 @@
     <h3 style="padding-bottom: 1em" class="toggle open"><i class="fa fa-chevron-right fa-fw"></i> {{title}} ({{queryset.count()}})</h3>
     <div class="organization-container toggled">
       {% for org in queryset %}
-        <a href="{{ org.get_absolute_url() }}" class="organization-row" title="{{org.about}}">
+        <a href="{{ org.get_absolute_url() }}" class="organization-row">
-          <img class="org-logo" loading="lazy" src="{{ org.logo_override_image or static('icons/icon.svg') }}" onerror="{{static('icons/logo.svg')}}">
+          {% if org.logo_override_image %}
+            <img class="user-img org-logo" loading="lazy" src="{{ org.logo_override_image }}">
+          {% else %}
+            <img class="org-logo" loading="lazy" src="{{ static('icons/icon.svg') }}" onerror="{{static('icons/logo.svg')}}">
+          {% endif %}
           <span style="margin-right: auto">{{ org.name }}</span>
           <span style="font-weight: normal"><i>{{ org.member_count }} {{_('members')}}</i></span>
         </a>

templates/problem/data.html

@@ -10,32 +10,35 @@
   <script type="text/javascript" src="{{ static('fine-uploader/jquery.fine-uploader.js') }}"></script>
   <script type="text/javascript">
     $(function () {
-      $("#problem-data-zipfile_fine_uploader").fineUploader({
+      if (!window.PAGE_FROM_BACK_BUTTON_CACHE) {
-        request: {
+        $("#problem-data-zipfile_fine_uploader").fineUploader({
-          endpoint: "{{url('problem_zip_upload', problem.code)}}",
+          request: {
-          params: {
+            endpoint: "{{url('problem_zip_upload', problem.code)}}",
-            'csrfmiddlewaretoken': '{{ csrf_token }}'
+            params: {
+              'csrfmiddlewaretoken': '{{ csrf_token }}'
+            }
+          },
+          chunking: {
+            enabled: true,
+            partSize: 40000000,
+          },
+          resume: {
+            enabled: true
+          },
+          validation: {
+            allowedExtensions: ['zip'],
+          },
+        }).on('complete', function (event, id, name, responseJSON) {
+          console.log(responseJSON);
+          if (!responseJSON.success) {
+            alert('Fail to upload: ' + responseJSON.error);
           }
-        },
+          else {
-        chunking: {
+            $('#submit-button').click();
-          enabled: true,
+          }
-          partSize: 40000000,
+        });
-        },
+        toggle_custom();
-        resume: {
+      }
-          enabled: true
-        },
-        validation: {
-          allowedExtensions: ['zip'],
-        },
-      }).on('complete', function (event, id, name, responseJSON) {
-        console.log(responseJSON);
-        if (!responseJSON.success) {
-          alert('Fail to upload: ' + responseJSON.error);
-        }
-        else {
-          $('#submit-button').click();
-        }
-      });;
 
       function update_select2() {
         $('tbody:not(.extra-row-body) .type-column select').select2({
@@ -133,7 +136,7 @@
         }).change();
       }
 
-      (function toggle_custom() {
+      function toggle_custom() {
         let $checker = $('#id_problem-data-checker')
 
         let $custom_checker = $('#id_problem-data-custom_checker');
@@ -175,7 +178,7 @@
           $tr_sig_header.toggle($ioi_signature.is(':checked')).change();
           $tr_sig_handler.toggle($ioi_signature.is(':checked')).change();
         }).change();
-      })();
+      };
 
       checker_precision($('#id_problem-data-checker'));
 

templates/recent-organization.html

@@ -1,10 +1,8 @@
 {% block two_col_media %}
   <style>
     .org-logo {
-      vertical-align: middle;
       height: 2em;
       width: 2em;
-      display: inline-block;
       margin-right: 0.5em;
     }
     .toggle {
@@ -21,9 +19,13 @@
     <h3 class="bold-text colored-text"><i class="fa fa-users"></i>{{ _('Recent groups') }}</h3>
     <div class="toggled sidebox-content">
       {% for organization in recent_organizations %}
-        <a href="{{ url('organization_home', organization.organization.pk, organization.organization.slug) }}" class="organization-row" title="{{organization.organization.about}}">
+        <a href="{{ url('organization_home', organization.pk, organization.slug) }}" class="organization-row">
-          <img class="org-logo" loading="lazy" src="{{ organization.organization.logo_override_image or static('icons/icon.svg') }}">
+          {% if organization.logo_override_image %}
-          <span style="word-break: break-word;">{{ organization.organization }}</span>
+            <img class="org-logo user-img" loading="lazy" src="{{ organization.logo_override_image }}">
+          {% else %}
+            <img class="org-logo" loading="lazy" src="{{ static('icons/icon.svg') }}" onerror="{{static('icons/logo.svg')}}">
+          {% endif %}
+          <span style="word-break: break-word;">{{ organization.name }}</span>
         </a>
       {% endfor %}
     </div>

templates/submission/row.html

@@ -1,5 +1,5 @@
 {% set can_view = submission.is_accessible_by(profile) %}
-<div class="sub-user-img">
+<div class="sub-user-img user-img">
   <img src="{{gravatar(submission.user)}}">
 </div>
 <div class="sub-details">

templates/user/user-base.html

@@ -4,19 +4,10 @@
   {% block user_media %}{% endblock %}
 
   <style>
-    .user-gravatar {
+    .user-profile-img {
-      display: block;
+      width: 150px;
-      padding-right: 15px;
+      height: 150px;
-      width: 145px;
     }
-
-    .user-gravatar img {
-      width: 145px;
-      height: 145px;
-      display: block;
-      border-radius: 6px;
-    }
-
     .page-title {
       display: -webkit-box;
       display: -webkit-flex;
@@ -100,14 +91,14 @@
 {% block body %}
   <div class="user-info-page">
     <div class="user-sidebar">
-      <div class="user-gravatar">
+      <div class="user-img user-profile-img">
-        <img src="{{ gravatar(user, 145) }}" width="145px" height="145px">
+        <img src="{{ gravatar(user, 145) }}">
       </div>
       <br>
       {% if request.user.is_authenticated and request.profile != user %}
         <form method="post" action="{{ url('user_toggle_follow', user.username) }}">
           {% csrf_token %}
-          <button class="small {{ 'unfollow' if followed else 'follow' }}" style="width:145px">
+          <button class="small {{ 'unfollow' if followed else 'follow' }}" style="width:100%">
             {% if followed %}
               <i class="fa fa-remove"></i>
               {{ _('Unfollow') }}
@@ -118,16 +109,16 @@
           </button>
         </form>
       {% endif %}
-      {% if request.user.is_authenticated %}
+      {% if request.user.is_authenticated and request.profile != user %}
         <br>
-        <button class="small btn-midnightblue" style="width:145px" id="message-button">
+        <button class="small btn-midnightblue" style="width:100%" id="message-button">
           {{ _('Send message') }}
         </button>
       {% endif %}
 
       {% if ratings %}
         <br>
-        <div style="border: 3px dashed darkgray; padding: 0.3em; margin-right: 15px; border-radius: 6px;">
+        <div style="border: 3px dashed darkgray; padding: 0.3em; border-radius: 6px;">
           <div class="user-stat-container">
             <div class="user-stat-header">{{_('Contests written')}}:</div>
             <div class="user-stat">{{ratings|length}}</div>

templates/user/users-table.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block after_rank %}
-  <td><img style="border: 2px solid lightblue; max-width: none; border-radius: 50%" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></td>
+  <td><img style="border: 2px solid lightblue; max-width: none;" class="user-img" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></td>
 {% endblock %}
 
 {% block user_footer %}