Change style of user table

resources/base.scss

@@ -35,6 +35,10 @@ img {
     // height: auto
 }
 
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 .full {
     width: 100% !important;
 }

resources/blog.scss

@@ -220,6 +220,7 @@
     }
 }
 
+
 @media (max-width: 799px) {
     .left-sidebar-header {
         display: none;

resources/users.scss

@@ -22,7 +22,6 @@
 }
 
 td.user-name {
-    padding-left: 2em;
     text-align: left;
 }
 

templates/contest/ranking-css.html

@@ -98,6 +98,7 @@
 
     .user-name {
         position: relative;
+        padding-left: 2em !important;
     }
 
     .organization-column {

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>

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

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) {

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><img style="border: 2px solid lightblue; 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>
 {% endblock %}
 
-{% block user_data %}
+{% block user_footer %}
-<span style="color: gray; font-weight: 600">{{ "- (" + user.user.first_name + ")" if user.user.first_name else ''}}</span>
+<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>