From 30417e1cde7b4468a6838b6693c61e501136a5be Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Wed, 9 Nov 2022 14:41:08 -0600
Subject: [PATCH] Change style of user table

---
 resources/base.scss                  |  4 ++++
 resources/blog.scss                  |  1 +
 resources/users.scss                 |  1 -
 templates/contest/ranking-css.html   |  1 +
 templates/organization/users.html    |  4 ++--
 templates/user/base-users-table.html |  2 +-
 templates/user/list.html             |  1 -
 templates/user/users-table.html      | 31 +++++++++++++++-------------
 8 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index 38ba814..3ebe3da 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -35,6 +35,10 @@ img {
     // height: auto
 }
 
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 .full {
     width: 100% !important;
 }
diff --git a/resources/blog.scss b/resources/blog.scss
index aa5e0ab..4883eff 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -220,6 +220,7 @@
     }
 }
 
+
 @media (max-width: 799px) {
     .left-sidebar-header {
         display: none;
diff --git a/resources/users.scss b/resources/users.scss
index 2eecaa8..c69ef9e 100644
--- a/resources/users.scss
+++ b/resources/users.scss
@@ -22,7 +22,6 @@
 }
 
 td.user-name {
-    padding-left: 2em;
     text-align: left;
 }
 
diff --git a/templates/contest/ranking-css.html b/templates/contest/ranking-css.html
index a0a10d6..43215f0 100644
--- a/templates/contest/ranking-css.html
+++ b/templates/contest/ranking-css.html
@@ -98,6 +98,7 @@
 
     .user-name {
         position: relative;
+        padding-left: 2em !important;
     }
 
     .organization-column {
diff --git a/templates/organization/users.html b/templates/organization/users.html
index 4670254..8cd5863 100644
--- a/templates/organization/users.html
+++ b/templates/organization/users.html
@@ -6,7 +6,7 @@
             padding: 3px 12px;
         }
         #users-table td:nth-child(3), #users-table th:nth-child(3) {
-            border-right: none;
+            text-align: left;
         }
         #users-table td:nth-child(2), #users-table th:nth-child(2) {
             border-right: none;
@@ -21,7 +21,7 @@
     </style>
 
     {% if can_edit %}
-        <style>#users-table td:nth-child(4), #users-table th:nth-child(4) {
+        <style>#users-table td:nth-child(3), #users-table th:nth-child(3) {
             border-right: none;
         }
         </style>
diff --git a/templates/user/base-users-table.html b/templates/user/base-users-table.html
index 35c51d0..9d7baba 100644
--- a/templates/user/base-users-table.html
+++ b/templates/user/base-users-table.html
@@ -2,7 +2,7 @@
 <tr>
     <th class="header rank">{{ rank_header or _("Rank") }}</th>
     {% block after_rank_head %}{% endblock %}
-    <th class="header username">{{ _('Username') }}</th>
+    <th class="header username">{{ _('Username') }}{% block username_head_extra %}{% endblock %}</th>
     {% block before_point_head %}{% endblock %}
 
     <th class="header points">
diff --git a/templates/user/list.html b/templates/user/list.html
index 8cc7349..d6742a8 100644
--- a/templates/user/list.html
+++ b/templates/user/list.html
@@ -3,7 +3,6 @@
 {% block users_media %}
     <style>
         #users-table td:nth-child(3), #users-table th:nth-child(3) {
-            border-right: none;
             text-align: left;
         }
         #users-table td:nth-child(2), #users-table th:nth-child(2) {
diff --git a/templates/user/users-table.html b/templates/user/users-table.html
index 939f107..90c4d99 100644
--- a/templates/user/users-table.html
+++ b/templates/user/users-table.html
@@ -2,25 +2,15 @@
 
 {% block after_rank_head %}
     <th></th>
-    <th class="header rank">
-        {% if sort_links %}<a href="{{ sort_links.rating }}">{% endif %}
-        <span class="rate-group">
-            <svg class="rate-box" viewBox="0 0 16 16">
-                <circle cx="8" cy="8" r="7" stroke="white"></circle>
-                <path clip-path="url(#rating-clip)" d="M0 16v-4.8h16 0v16z" fill="white"></path>
-            </svg>
-        </span>
-        {%- if sort_links %}{{ sort_order.rating }}</a>{% endif %}
-    </th>
 {% endblock %}
 
 {% block after_rank %}
-    <td><img style="border: 2px solid black; max-width: none; border-radius: 50%" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></td>
-    <td class="rating-td">{% if user.rating %}{{ rating_number(user) }}{% endif %}</td>
+    <td><img style="border: 2px solid lightblue; max-width: none; border-radius: 50%" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></td>
 {% endblock %}
 
-{% block user_data %}
-<span style="color: gray; font-weight: 600">{{ "- (" + user.user.first_name + ")" if user.user.first_name else ''}}</span>
+{% block user_footer %}
+<span style="margin-left: 0.5em">{% if user.rating %}{{ rating_number(user) }}{% endif %}</span>
+<div style="color: gray; font-weight: 600; margin-top: 0.2em">{{ user.user.first_name if user.user.first_name else ''}}</div>
 {% endblock %}
 
 {% block after_point_head %}
@@ -32,6 +22,19 @@
     <th class="about-column">{{ _('About') }}</th>
 {% endblock %}
 
+{% block username_head_extra %}
+    <span style="margin-left: 0.5em" class="header rank">
+        {% if sort_links %}<a href="{{ sort_links.rating }}">{% endif %}
+        <span class="rate-group">
+            <svg class="rate-box" viewBox="0 0 16 16">
+                <circle cx="8" cy="8" r="7" stroke="white"></circle>
+                <path clip-path="url(#rating-clip)" d="M0 16v-4.8h16 0v16z" fill="white"></path>
+            </svg>
+        </span>
+        {%- if sort_links %}{{ sort_order.rating }}</a>{% endif %}
+    </span>
+{% endblock %}
+
 {% block after_point %}
     <td class="user-problem-count">{{ user.problem_count }}</td>
     <td>