From 3542d6ba64c8693f2a7cec6e751e3d66ea98b3e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=B5=20Trung=20Ho=C3=A0ng=20H=C6=B0ng?=
 <89190591+HungBacktracking@users.noreply.github.com>
Date: Fri, 8 Sep 2023 23:22:57 +0700
Subject: [PATCH] new contest ui (#80)

---
 judge/views/contests.py            |   2 +-
 locale/vi/LC_MESSAGES/django.po    | 106 +++++-----
 locale/vi/LC_MESSAGES/dmoj-user.po |   7 +-
 resources/contest.scss             |  35 ++++
 resources/widgets.scss             |  57 +++---
 templates/contest/list.html        | 302 ++++++++++++++---------------
 6 files changed, 269 insertions(+), 240 deletions(-)

diff --git a/judge/views/contests.py b/judge/views/contests.py
index c183435..f209030 100644
--- a/judge/views/contests.py
+++ b/judge/views/contests.py
@@ -134,7 +134,7 @@ class ContestList(
     QueryStringSortMixin, DiggPaginatorMixin, TitleMixin, ContestListMixin, ListView
 ):
     model = Contest
-    paginate_by = 20
+    paginate_by = 10
     template_name = "contest/list.html"
     title = gettext_lazy("Contests")
     context_object_name = "past_contests"
diff --git a/locale/vi/LC_MESSAGES/django.po b/locale/vi/LC_MESSAGES/django.po
index f5c2204..1432864 100644
--- a/locale/vi/LC_MESSAGES/django.po
+++ b/locale/vi/LC_MESSAGES/django.po
@@ -2,7 +2,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: lqdoj2\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-09-02 07:40+0700\n"
+"POT-Creation-Date: 2023-09-08 22:40+0700\n"
 "PO-Revision-Date: 2021-07-20 03:44\n"
 "Last-Translator: Icyene\n"
 "Language-Team: Vietnamese\n"
@@ -21,7 +21,7 @@ msgstr ""
 #: chat_box/models.py:39 chat_box/models.py:64 chat_box/models.py:79
 #: judge/admin/interface.py:150 judge/models/contest.py:636
 #: judge/models/contest.py:842 judge/models/course.py:115
-#: judge/models/profile.py:384 judge/models/profile.py:462
+#: judge/models/profile.py:390 judge/models/profile.py:468
 msgid "user"
 msgstr "người dùng"
 
@@ -1993,7 +1993,7 @@ msgid ""
 msgstr "Ảnh này sẽ thay thế logo mặc định khi ở trong tổ chức."
 
 #: judge/models/profile.py:143 judge/models/profile.py:172
-#: judge/models/profile.py:390 judge/models/profile.py:469
+#: judge/models/profile.py:396 judge/models/profile.py:475
 msgid "organization"
 msgstr ""
 
@@ -2099,43 +2099,43 @@ msgstr "ghi chú nội bộ"
 msgid "Notes for administrators regarding this user."
 msgstr "Ghi chú riêng cho quản trị viên."
 
-#: judge/models/profile.py:249
+#: judge/models/profile.py:250
 msgid "Custom background"
 msgstr "Background tự chọn"
 
-#: judge/models/profile.py:249
+#: judge/models/profile.py:253
 msgid "CSS custom background properties: url(\"image_url\"), color, etc"
 msgstr "CSS background tự chọn. Ví dụ: url(\"image_url\"), white, ..."
 
-#: judge/models/profile.py:377
+#: judge/models/profile.py:383
 msgid "user profile"
 msgstr "thông tin người dùng"
 
-#: judge/models/profile.py:378
+#: judge/models/profile.py:384
 msgid "user profiles"
 msgstr "thông tin người dùng"
 
-#: judge/models/profile.py:394
+#: judge/models/profile.py:400
 msgid "request time"
 msgstr "thời gian đăng ký"
 
-#: judge/models/profile.py:397
+#: judge/models/profile.py:403
 msgid "state"
 msgstr "trạng thái"
 
-#: judge/models/profile.py:404
+#: judge/models/profile.py:410
 msgid "reason"
 msgstr "lý do"
 
-#: judge/models/profile.py:407
+#: judge/models/profile.py:413
 msgid "organization join request"
 msgstr "đơn đăng ký tham gia"
 
-#: judge/models/profile.py:408
+#: judge/models/profile.py:414
 msgid "organization join requests"
 msgstr "đơn đăng ký tham gia"
 
-#: judge/models/profile.py:474
+#: judge/models/profile.py:480
 #, fuzzy
 #| msgid "last seen"
 msgid "last visit"
@@ -2983,7 +2983,7 @@ msgid "You are not allowed to access this organization."
 msgstr "Bạn không được phép chỉnh sửa tổ chức này."
 
 #: judge/views/organization.py:230 judge/views/stats.py:184
-#: templates/contest/list.html:89 templates/problem/list-base.html:97
+#: templates/contest/list.html:93 templates/problem/list-base.html:97
 #: templates/stats/site.html:33 templates/user/user-left-sidebar.html:4
 #: templates/user/user-list-tabs.html:6
 msgid "Groups"
@@ -3400,8 +3400,8 @@ msgstr "Phải qua một kỳ thi"
 #: judge/views/submission.py:914
 #, python-brace-format
 msgid ""
-"<a href=\"{1}\">{0}</a>'s submissions for <a href=\"{3}\">{2}</a> in <a href="
-"\"{5}\">{4}</a>"
+"<a href=\"{1}\">{0}</a>'s submissions for <a href=\"{3}\">{2}</a> in <a "
+"href=\"{5}\">{4}</a>"
 msgstr ""
 "Các bài nộp của <a href=\"{1}\">{0}</a> cho <a href=\"{3}\">{2}</a> trong <a "
 "href=\"{5}\">{4}</a>"
@@ -3673,7 +3673,7 @@ msgstr "đã đăng vào %(time)s"
 
 #: templates/blog/blog.html:31 templates/comments/content-list.html:62
 #: templates/comments/content-list.html:76
-#: templates/contest/contest-tabs.html:35 templates/contest/list.html:124
+#: templates/contest/contest-tabs.html:35 templates/contest/list.html:129
 #: templates/contest/tag-title.html:9 templates/flatpages/admin_link.html:3
 #: templates/license.html:10 templates/problem/editorial.html:15
 #: templates/problem/feed/problems.html:50
@@ -3949,7 +3949,7 @@ msgstr "Thứ sáu"
 msgid "Saturday"
 msgstr "Thứ bảy"
 
-#: templates/contest/clarification.html:52 templates/contest/list.html:229
+#: templates/contest/clarification.html:52 templates/contest/list.html:232
 #: templates/organization/new.html:10 templates/ticket/new.html:38
 msgid "Create"
 msgstr "Tạo mới"
@@ -4014,8 +4014,8 @@ msgstr "G:i T, j F, Y"
 #: templates/contest/contest-datetime.html:39
 #, python-format
 msgid ""
-"<b>%(time_limit)s</b> window between <b>%(start_time)s</b> and <b>"
-"%(end_time)s</b>"
+"<b>%(time_limit)s</b> window between <b>%(start_time)s</b> and "
+"<b>%(end_time)s</b>"
 msgstr ""
 "Kéo dài <b>%(time_limit)s</b> từ <b>%(start_time)s</b> đến <b>%(end_time)s</"
 "b>"
@@ -4075,7 +4075,7 @@ msgstr "Nhân bản"
 msgid "Leave contest"
 msgstr "Rời kỳ thi"
 
-#: templates/contest/contest.html:42 templates/contest/list.html:408
+#: templates/contest/contest.html:42 templates/contest/list.html:400
 msgid "Virtual join"
 msgstr "Tham gia ảo"
 
@@ -4099,9 +4099,7 @@ msgstr "Đăng nhập để tham gia"
 msgid "AC Rate"
 msgstr "Tỷ lệ AC"
 
-#: templates/contest/contest.html:103 templates/contest/list.html:242
-#: templates/contest/list.html:291 templates/contest/list.html:385
-#: templates/problem/list.html:24
+#: templates/contest/contest.html:103 templates/problem/list.html:24
 msgid "Users"
 msgstr "Người nộp"
 
@@ -4110,11 +4108,11 @@ msgstr "Người nộp"
 msgid "Editorial"
 msgstr "Hướng dẫn"
 
-#: templates/contest/list.html:85 templates/contest/media-js.html:152
+#: templates/contest/list.html:89 templates/contest/media-js.html:152
 msgid "Are you sure you want to join?"
 msgstr "Bạn có chắc tham gia?"
 
-#: templates/contest/list.html:86
+#: templates/contest/list.html:90
 msgid ""
 "Joining a contest for the first time starts your timer, after which it "
 "becomes unstoppable."
@@ -4122,88 +4120,83 @@ msgstr ""
 "Tham gia kỳ thi lần đầu sẽ kích hoạt thời gian đếm ngược, không thể dừng lại "
 "sau đó."
 
-#: templates/contest/list.html:118
+#: templates/contest/list.html:123
 msgid "hidden"
 msgstr "ẩn"
 
-#: templates/contest/list.html:130
+#: templates/contest/list.html:135
 msgid "private"
 msgstr "riêng tư"
 
-#: templates/contest/list.html:146
+#: templates/contest/list.html:151
 msgid "rated"
 msgstr "rated"
 
-#: templates/contest/list.html:172
+#: templates/contest/list.html:177
 #, python-format
 msgid "%(time_limit)s window"
 msgstr "Cửa sổ thi dài %(time_limit)s"
 
-#: templates/contest/list.html:174
+#: templates/contest/list.html:179
 #, python-format
 msgid "%(duration)s long"
 msgstr "Kéo dài %(duration)s"
 
-#: templates/contest/list.html:194
+#: templates/contest/list.html:198
 msgid "Spectate"
 msgstr "Theo dõi"
 
-#: templates/contest/list.html:200 templates/organization/home.html:30
+#: templates/contest/list.html:204 templates/organization/home.html:30
 msgid "Join"
 msgstr "Tham gia"
 
-#: templates/contest/list.html:211
+#: templates/contest/list.html:214
 msgid "Search contests..."
 msgstr "Tìm kiếm kỳ thi..."
 
-#: templates/contest/list.html:221 templates/internal/problem.html:33
+#: templates/contest/list.html:224 templates/internal/problem.html:33
 msgid "Search"
 msgstr "Tìm kiếm"
 
-#: templates/contest/list.html:225
+#: templates/contest/list.html:228
 msgid "Hide organization contests"
 msgstr "Ẩn các kỳ thi riêng tư của nhóm"
 
-#: templates/contest/list.html:235
+#: templates/contest/list.html:238
 msgid "Active Contests"
 msgstr "Kỳ thi bạn đang tham gia"
 
-#: templates/contest/list.html:241 templates/contest/list.html:290
-#: templates/contest/list.html:338 templates/contest/list.html:382
-msgid "Contest"
-msgstr "Kỳ thi"
-
-#: templates/contest/list.html:259
+#: templates/contest/list.html:255
 #, python-format
 msgid "Window ends in %(countdown)s"
 msgstr "Cửa số thi còn %(countdown)s"
 
-#: templates/contest/list.html:262 templates/contest/list.html:306
+#: templates/contest/list.html:258 templates/contest/list.html:299
 #, python-format
 msgid "Ends in %(countdown)s"
 msgstr "Kết thúc trong %(countdown)s"
 
-#: templates/contest/list.html:283
+#: templates/contest/list.html:284
 msgid "Ongoing Contests"
 msgstr "Kỳ thi đang diễn ra"
 
-#: templates/contest/list.html:324
+#: templates/contest/list.html:322
 msgid "There is no ongoing contest at this time."
 msgstr "Không có kỳ thi nào đang diễn ra hiện tại."
 
-#: templates/contest/list.html:331
+#: templates/contest/list.html:329
 msgid "Upcoming Contests"
 msgstr "Kỳ thi sắp tới"
 
-#: templates/contest/list.html:363
+#: templates/contest/list.html:359
 msgid "There is no scheduled contest at this time."
 msgstr "Không có kỳ thi nào được lên lịch hiện tại."
 
-#: templates/contest/list.html:370
+#: templates/contest/list.html:366
 msgid "Past Contests"
 msgstr "Kỳ thi trong quá khứ"
 
-#: templates/contest/list.html:423
+#: templates/contest/list.html:413
 msgid "There is no past contest."
 msgstr "Không có kỳ thi nào trong quá khứ."
 
@@ -4728,7 +4721,7 @@ msgid "Thinking point"
 msgstr "Độ khó nghĩ"
 
 #: templates/problem/feed/problems.html:83
-#: templates/problem/search-form.html:83
+#: templates/problem/search-form.html:68
 msgid "Problem types"
 msgstr "Dạng bài"
 
@@ -4756,7 +4749,7 @@ msgstr "Hệ thống lỗi!"
 msgid "Successful vote! Thank you!"
 msgstr "Đã gửi thành công! Cảm ơn bạn!"
 
-#: templates/problem/list.html:40 templates/problem/search-form.html:67
+#: templates/problem/list.html:40 templates/problem/search-form.html:79
 #: templates/user/user-problems.html:57
 msgid "Category"
 msgstr "Nhóm bài"
@@ -5024,7 +5017,7 @@ msgstr "Hiển thị hướng dẫn"
 msgid "Have editorial"
 msgstr "Có hướng dẫn"
 
-#: templates/problem/search-form.html:70 templates/problem/search-form.html:72
+#: templates/problem/search-form.html:82 templates/problem/search-form.html:84
 #: templates/submission/list.html:381
 #: templates/submission/submission-list-tabs.html:4
 msgid "All"
@@ -5930,6 +5923,9 @@ msgstr "Thông tin"
 msgid "Check all"
 msgstr "Chọn tất cả"
 
+#~ msgid "Contest"
+#~ msgstr "Kỳ thi"
+
 #~ msgid "0 to not show testcases, 1 to show"
 #~ msgstr "0 để ẩn test, 1 để hiện"
 
@@ -5966,8 +5962,8 @@ msgstr "Chọn tất cả"
 #~ msgstr "bình luận nữa"
 
 #~ msgid ""
-#~ "This comment is hidden due to too much negative feedback. Click <a href="
-#~ "\"javascript:comment_show_content(%(id)s)\">here</a> to view it."
+#~ "This comment is hidden due to too much negative feedback. Click <a "
+#~ "href=\"javascript:comment_show_content(%(id)s)\">here</a> to view it."
 #~ msgstr ""
 #~ "Bình luận bị ẩn vì nhiều phản hồi tiêu cực. Nhấp vào <a href=\"javascript:"
 #~ "comment_show_content(%(id)s)\">đây</a> để mở."
diff --git a/locale/vi/LC_MESSAGES/dmoj-user.po b/locale/vi/LC_MESSAGES/dmoj-user.po
index ffd36e9..8202ea2 100644
--- a/locale/vi/LC_MESSAGES/dmoj-user.po
+++ b/locale/vi/LC_MESSAGES/dmoj-user.po
@@ -15,12 +15,15 @@ msgstr "Thành viên"
 msgid "Contests"
 msgstr "Kỳ thi"
 
-msgid "Groups"
-msgstr "Nhóm"
+msgid "Chat"
+msgstr ""
 
 msgid "About"
 msgstr "Giới thiệu"
 
+msgid "Groups"
+msgstr "Nhóm"
+
 msgid "Status"
 msgstr "Máy chấm"
 
diff --git a/resources/contest.scss b/resources/contest.scss
index 95da7a8..2bc2ab1 100644
--- a/resources/contest.scss
+++ b/resources/contest.scss
@@ -1,5 +1,40 @@
 @import "vars";
 
+.list-contest {
+    box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+
+    .info-contest:first-child {
+        margin-right: 15px;
+    }
+
+    .info-contest:nth-child(2) {
+        margin-right: 5px;
+    }
+
+    .info-contest {
+        flex: 1;
+    }
+
+    .participate-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .contest-title {
+        font-size: 17px;
+        font-weight: 600;
+        line-height: 150%;
+        margin-bottom: 10px;
+    }
+}
+
 #contest-calendar {
     border-collapse: collapse;
     width: 100%;
diff --git a/resources/widgets.scss b/resources/widgets.scss
index cea5e5a..18a41b6 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -326,11 +326,14 @@ input {
 // Bootstrap-y pagination
 ul.pagination a:hover {
     color: #FFF;
-    background: rgba(0, 0, 0, 0.55);
+    background: #0aa082;
+    border: none;
 }
 
 ul.pagination {
-    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    display: flex;
     padding-left: 0;
     margin: 0;
     border-radius: $widget_border_radius;
@@ -339,33 +342,35 @@ ul.pagination {
         li {
             display: inline;
 
-            &:first-child > {
-                a, span {
-                    margin-left: 0;
-                    border-top-left-radius: $widget_border_radius;
-                    border-bottom-left-radius: $widget_border_radius;
-                }
-            }
+            // &:first-child > {
+                //     a, span {
+                    //         margin-left: 0;
+                    //         border-top-left-radius: $widget_border_radius;
+                    //         border-bottom-left-radius: $widget_border_radius;
+                    //     }
+                // }
 
-            &:last-child > {
-                a, span {
-                    margin-left: 0;
-                    border-top-right-radius: $widget_border_radius;
-                    border-bottom-right-radius: $widget_border_radius;
-                }
-            }
+            // &:last-child > {
+                //     a, span {
+                    //         margin-left: 0;
+                    //         border-top-right-radius: $widget_border_radius;
+                    //         border-bottom-right-radius: $widget_border_radius;
+                    //     }
+                // }
 
             > {
                 a, span {
                     position: relative;
                     float: left;
                     padding: 4px 12px;
+                    margin-right: 5px;
+                    font-weight: bold;
                     line-height: 1.42857;
                     text-decoration: none;
-                    color: #FFF;
-                    background-color: $widget_black;
-                    border: 1px solid #505050;
-                    margin-left: -1px;
+                    color: #045343;
+                    background-color: white;
+                    border: 2px solid #045343;
+                    border-radius: 10px;
                 }
             }
         }
@@ -373,22 +378,22 @@ ul.pagination {
         .disabled-page > {
             a {
                 color: #888;
-                background-color: $widget_black;
-                border-color: #282828;
+                background-color: #04534380;
+                border-color: #04534380;
             }
 
             span {
                 color: #888;
-                background-color: $widget_black;
-                border-color: #505050;
+                background-color: #04534380;
+                border-color: #04534380;
             }
         }
 
         .active-page > {
             a {
                 z-index: 2;
-                color: black;
-                background-color: #7dc7ff;
+                color: white;
+                background-color: #045343;
                 border-color: transparent;
                 cursor: default;
             }
diff --git a/templates/contest/list.html b/templates/contest/list.html
index 5170594..226b219 100644
--- a/templates/contest/list.html
+++ b/templates/contest/list.html
@@ -5,6 +5,10 @@
 
 {% block two_col_media %}
   <style>
+    .non-padding-top {
+      padding-top: 0;
+    }
+
     .content-description ul {
       padding: 0 !important;
     }
@@ -109,10 +113,11 @@
 
 {% macro contest_head(contest) %}
   {% spaceless %}
-    <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title">
+    <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
       {{- contest.name -}}
     </a>
-    <span class="contest-tags">
+    <br>
+    <div class="contest-tags" style="margin-top: 5px;">
       {% if not contest.is_visible %}
         <span class="contest-tag contest-tag-hidden">
           <i class="fa fa-eye-slash"></i> {{ _('hidden') }}
@@ -155,12 +160,12 @@
           </a>
         </span>
       {% endfor %}
-    </span>
+    </div>
   {% endspaceless %}
 {% endmacro %}
 
-{% macro time_left(contest) %}
-  <div class="time time-left">
+{% macro time_left(contest, padding_top = true) %}
+  <div class="time time-left {{ 'non-padding-top' if padding_top == false }}">
     {% if contest.time_limit %}
       {{ contest.start_time|date(_("M j, Y, G:i")) }} -
       {{ contest.end_time|date(_("M j, Y, G:i")) }}
@@ -186,21 +191,19 @@
 
 {% macro contest_join(contest, request) %}
   {% if not request.in_contest %}
-    <td>
-      {% if request.profile in contest.authors.all() or request.profile in contest.curators.all() or request.profile in contest.testers.all() %}
-        <form action="{{ url('contest_join', contest.key) }}" method="post">
-          {% csrf_token %}
-          <input type="submit" class="unselectable button full small"
-            value="{{ _('Spectate') }}">
-        </form>
-      {% else %}
-        <form action="{{ url('contest_join', contest.key) }}" method="post">
-          {% csrf_token %}
-          <input type="submit" class="unselectable button full small join-warning"
-            value="{{ _('Join') }}">
-        </form>
-      {% endif %}
-    </td>
+    {% if request.profile in contest.authors.all() or request.profile in contest.curators.all() or request.profile in contest.testers.all() %}
+      <form action="{{ url('contest_join', contest.key) }}" method="post">
+        {% csrf_token %}
+        <input type="submit" class="unselectable button full small"
+          value="{{ _('Spectate') }}">
+      </form>
+    {% else %}
+      <form action="{{ url('contest_join', contest.key) }}" method="post">
+        {% csrf_token %}
+        <input type="submit" class="unselectable button full small join-warning"
+          value="{{ _('Join') }}">
+      </form>
+    {% endif %}
   {% endif %}
 {% endmacro %}
 
@@ -235,45 +238,43 @@
         {{ _('Active Contests') }}
       </h3>
       <div class="toggled">
-        <table class="contest-list table striped">
-          <thead>
-            <tr>
-              <th style="width:90%">{{ _('Contest') }}</th>
-              <th>{{ _('Users') }}</th>
-              {% if not request.in_contest %}
-                <th style="width:15%"></th>
-              {% endif %}
-            </tr>
-          </thead>
-          <tbody>
-            {% for participation in active_participations %}
-              {% with contest=participation.contest %}
-                <tr>
-                  <td>
-                    <div class="contest-block">
-                      {{ contest_head(contest) }}
-                      {% if contest.start_time %}
-                        <br>
-                        {% if contest.time_limit %}
-                          <span class="time">
-                            {% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
-                          </span>
-                        {% elif contest.time_before_end %}
-                          <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
-                        {% endif %}
-                        {{ time_left(contest) }}
-                      {% endif %}
-                    </div>
-                  </td>
-                  <td>
-                    {{ user_count(contest, request.user) }}
-                  </td>
-                  {{ contest_join(contest, request) }}
-                </tr>
-              {% endwith %}
-            {% endfor %}
-          </tbody>
-        </table>
+
+        {% for participation in active_participations %}
+          {% with contest=participation.contest %}
+            <div class="list-contest">
+              <div class="info-contest" style="flex: 1.5">
+                <div class="contest-title"> {{ _('Contests') }} </div>
+                {{ contest_head(contest) }}
+              </div>
+              <div class="info-contest" style="flex: 1.5">
+                <div class="contest-title"> {{ _('Time') }} </div>
+                <div class="contest-block">
+                  {% if contest.start_time %}
+                    {% if contest.time_limit %}
+                      <span class="time">
+                        {% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
+                      </span>
+                    {% elif contest.time_before_end %}
+                      <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
+                    {% endif %}
+                    {{ time_left(contest) }}
+                  {% endif %}
+                </div>
+              </div>
+              <div class="info-contest">
+                <div class="contest-title"> {{ _('Format') }} </div>
+                {{ contest.format.name }}
+              </div>
+              <div class="info-contest">
+                <div class="contest-title"> {{ _('Users') }} </div>
+                {{ user_count(contest, request.user) }}
+              </div>
+              <div class="participate-button">
+                {{ contest_join(contest, request) }}
+              </div>
+            </div>
+          {% endwith %}
+        {% endfor %}
       </div>
       <br>
     {% endif %}
@@ -284,39 +285,36 @@
     </h3>
     {% if current_contests %}
       <div id="ongoing-table" class="toggled">
-        <table class="contest-list table striped">
-          <thead>
-            <tr>
-              <th style="width:90%">{{ _('Contest') }}</th>
-              <th>{{ _('Users') }}</th>
-              {% if not request.in_contest %}
-                <th style="width:15%"></th>
-              {% endif %}
-            </tr>
-          </thead>
-          <tbody>
-            {% for contest in current_contests %}
-              <tr>
-                <td>
-                  <div class="contest-block">
-                    {{ contest_head(contest) }}
-                    {% if contest.start_time %}
-                      <br>
-                      {% if contest.time_before_end %}
-                        <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
-                      {% endif %}
-                      {{ time_left(contest) }}
-                    {% endif %}
-                  </div>
-                </td>
-                <td>
-                  {{ user_count(contest, request.user) }}
-                </td>
-                {{ contest_join(contest, request) }}
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
+        {% for contest in current_contests %}
+          <div class="list-contest">
+            <div class="info-contest" style="flex: 1.5">
+              <div class="contest-title"> {{ _('Contests') }} </div>
+              {{ contest_head(contest) }}
+            </div>
+            <div class="info-contest" style="flex: 1.5">
+              <div class="contest-title"> {{ _('Time') }} </div>
+              <div class="contest-block">
+                {% if contest.start_time %}
+                  {% if contest.time_before_end %}
+                    <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
+                  {% endif %}
+                  {{ time_left(contest) }}
+                {% endif %}
+              </div>
+            </div>
+            <div class="info-contest">
+              <div class="contest-title"> {{ _('Format') }} </div>
+              {{ contest.format.name }}
+            </div>
+            <div class="info-contest">
+              <div class="contest-title"> {{ _('Users') }} </div>
+              {{ user_count(contest, request.user) }}
+            </div>
+            <div class="participate-button">
+              {{ contest_join(contest, request) }}
+            </div>
+          </div>
+        {% endfor %}
         <br>
       </div>
     {% else %}
@@ -332,31 +330,29 @@
     </h3>
     {% if future_contests %}
       <div class="toggled">
-        <table class="contest-list table striped">
-          <thead>
-            <tr>
-              <th>{{ _('Contest') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for contest in future_contests %}
-              <tr>
-                <td>
-                  <div class="contest-block">
-                    {{ contest_head(contest) }}
-                    {% if contest.start_time %}
-                      <br>
-                      {% if contest.time_before_start %}
-                        <span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
-                      {% endif %}
-                      {{ time_left(contest) }}
-                    {% endif %}
-                  </div>
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
+        {% for contest in future_contests %}
+          <div class="list-contest">
+            <div class="info-contest" style="flex: 1.5">
+              <div class="contest-title"> {{ _('Contests') }} </div>
+              {{ contest_head(contest) }}
+            </div>
+            <div class="info-contest" style="flex: 1.5">
+              <div class="contest-title"> {{ _('Time') }} </div>
+              <div class="contest-block">
+                {% if contest.start_time %}
+                  {% if contest.time_before_start %}
+                    <span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
+                  {% endif %}
+                  {{ time_left(contest) }}
+                {% endif %}
+              </div>
+            </div>
+            <div class="info-contest">
+              <div class="contest-title"> {{ _('Format') }} </div>
+              {{ contest.format.name }}
+            </div>
+          </div>
+        {% endfor %}
       </div>
     {% else %}
       <div class="toggled">
@@ -371,48 +367,42 @@
     </h3>
     {% if past_contests %}
       {% if page_obj and page_obj.num_pages > 1 %}
-        <div style="margin-bottom: 4px;">
+        <div style="margin-bottom: 10px;">
           {% include "list-pages.html" %}
         </div>
       {% endif %}
-      <table class="contest-list table striped">
-        <thead>
-          <tr>
-            <th style="width:90%">
-              <a class="contest-list-sort" href="{{ sort_links.name }}">{{ _('Contest') }}{{ sort_order.name }}</a>
-            </th>
-            <th>
-              <a class="contest-list-sort" href="{{ sort_links.user_count }}">{{ _('Users') }}{{ sort_order.user_count }}</a>
-            </th>
-            {% if not request.in_contest %}
-              <th style="width:15%"></th>
-            {% endif %}
-          </tr>
-        </thead>
-        <tbody>
-          {% for contest in past_contests %}
-            <tr>
-              <td>
-                <div class="contest-block">
-                  {{ contest_head(contest) }}
-                  {{ time_left(contest) }}
-                </div>
-              </td>
-              <td>
-                {{ user_count(contest, request.user) }}
-              </td>
-              {% if not request.in_contest %}
-                <td><form action="{{ url('contest_join', contest.key) }}" method="post">
-                  {% csrf_token %}
-                  <input type="submit" class="unselectable button full small"
-                    value="{{ _('Virtual join') }}">
-                </form>
-                </td>
-              {% endif %}
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+
+      {% for contest in past_contests %}
+        <div class="list-contest">
+          <div class="info-contest" style="flex: 1.5">
+            <div class="contest-title"> {{ _('Contests') }} </div>
+            {{ contest_head(contest) }}
+          </div>
+          <div class="info-contest" style="flex: 1.5">
+            <div class="contest-title"> {{ _('Time') }} </div>
+            <div class="contest-block">
+              {{ time_left(contest, false) }}
+            </div>
+          </div>
+          <div class="info-contest">
+            <div class="contest-title"> {{ _('Format') }} </div>
+            {{ contest.format.name }}
+          </div>
+          <div class="info-contest">
+            <div class="contest-title"> {{ _('Users') }} </div>
+            {{ user_count(contest, request.user) }}
+          </div>
+          {% if not request.in_contest %}
+            <div class="participate-button">
+              <form action="{{ url('contest_join', contest.key) }}" method="post">
+                {% csrf_token %}
+                <input type="submit" class="unselectable button full small"
+                  value="{{ _('Virtual join') }}">
+              </form>
+            </div>
+          {% endif %}
+        </div>
+      {% endfor %}
       {% if page_obj and page_obj.num_pages > 1 %}
         <div style="margin-top: 10px;">
           {% include "list-pages.html" %}