User table UI

resources/users.scss

@@ -53,7 +53,10 @@ th.header.rank {
 
 #users-table {
     .username {
-        width: 100%;
+    }
+
+    .about-column {
+        width: 30%;
     }
 
     .header {

templates/organization/users.html

@@ -5,13 +5,25 @@
             margin: -8px 0;
             padding: 3px 12px;
         }
-        #users-table td:nth-child(4), #users-table th:nth-child(4) {
+        #users-table td:nth-child(3), #users-table th:nth-child(3) {
             border-right: none;
         }
+        .rank-td {
+            font-family: "Jersey M54";
+            font-size: large;
+        }
+        .user-points, .user-problem-count, .rating-td {
+            font-family: cursive;
+        }
+        .about-td {
+            max-height: 45px;
+            overflow:hidden;
+            cursor: pointer;
+        }
     </style>
 
     {% if is_admin %}
-        <style>#users-table td:nth-child(3), #users-table th:nth-child(3) {
+        <style>#users-table td:nth-child(4), #users-table th:nth-child(4) {
             border-right: none;
         }
         </style>

templates/user/base-users-table.html

@@ -17,7 +17,7 @@
 <tbody>
 {% for rank, user in users %}
     <tr id="user-{{ user.user.username }}" {% block row_extra scoped %}{% endblock %}>
-        <td>{{ rank }}</td>
+        <td class="rank-td">{{ rank }}</td>
         {% block after_rank scoped %}{% endblock %}
         <td class="user-name">{{ link_user(user) }} {% block user_data scoped %}{% endblock %}</td>
         {% block before_point scoped %}{% endblock %}

templates/user/base-users.html

@@ -50,11 +50,22 @@
                     }
                 }
             }).trigger('hashchange');
+
+            $('.about-td').on('click', function() {
+                var max_height = $(this).css('max-height');
+                if (max_height !== 'fit-content') {
+                    $(this).css('max-height', 'fit-content');
+                }
+                else {
+                    $(this).css('max-height', '45px');   
+                }
+            })
         });
     </script>
 {% endblock %}
 
 {% block media %}
+    <link href="http://fonts.cdnfonts.com/css/jersey-m54" rel="stylesheet">
     {% block users_media %}{% endblock %}
 {% endblock %}
 

templates/user/list.html

@@ -2,10 +2,22 @@
 
 {% block users_media %}
     <style>
-        #users-table td:nth-child(2), #users-table th:nth-child(2) {
+        #users-table td:nth-child(3), #users-table th:nth-child(3) {
             border-right: none;
             text-align: left;
         }
+        .rank-td {
+            font-family: "Jersey M54";
+            font-size: large;
+        }
+        .user-points, .user-problem-count, .rating-td {
+            font-family: cursive;
+        }
+        .about-td {
+            max-height: 45px;
+            overflow:hidden;
+            cursor: pointer;
+        }
     </style>
 {% endblock %}
 

templates/user/users-table.html

@@ -1,6 +1,7 @@
 {% extends "user/base-users-table.html" %}
 
 {% block after_rank_head %}
+    <th></th>
     <th class="header rank">
         {% if sort_links %}<a href="{{ sort_links.rating }}">{% endif %}
         <span class="rate-group">
@@ -10,19 +11,16 @@
             </svg>
         </span>
         {%- if sort_links %}{{ sort_order.rating }}</a>{% endif %}
-        <th class="fullname-column">{{ _('Full Name') }}</th>
     </th>
 {% endblock %}
 
 {% block after_rank %}
-    <td>{% if user.rating %}{{ rating_number(user) }}{% endif %}</td>
+    <td><img style="max-width: none; border-radius: 50%" src="{{ gravatar(user, 45) }}" height="45px" width="45px"></td>
-    <td class="fullname-column"> 
+    <td class="rating-td">{% if user.rating %}{{ rating_number(user) }}{% endif %}</td>
-        {% if user.user.first_name %}
+{% endblock %}
-            <span class="fullname">
+
-                {{ user.user.first_name }}
+{% block user_data %}
-            </span>
+<span style="color: gray; font-weight: 600">{{ "- (" + user.user.first_name + ")" if user.user.first_name else ''}}</span>
-        {% endif %}
-    </td>
 {% endblock %}
 
 {% block after_point_head %}
@@ -31,8 +29,18 @@
         {{ _('Problems') }}
         {%- if sort_links %}{{ sort_order.problem_count }}</a>{% endif %}
     </th>
+    <th class="about-column">{{ _('About') }}</th>
 {% endblock %}
 
 {% block after_point %}
-    <td>{{ user.problem_count }}</td>
+    <td class="user-problem-count">{{ user.problem_count }}</td>
+    <td>
+        <div class="about-td">
+            {% if user.about %}
+                {% cache 86400 'user_about' user.id MATH_ENGINE %}
+                    {{ user.about|markdown('self-description', MATH_ENGINE)|reference|str|safe }}
+                {% endcache %}
+            {% endif %}
+        </div>
+    </td>
 {% endblock %}