Fix mobile UI

judge/views/submission.py

@@ -805,6 +805,7 @@ class UserContestSubmissionsAjax(UserContestSubmissions):
         context["contest"] = self.contest
         context["problem"] = self.problem
         context["profile"] = self.profile
+        context["profile_id"] = self.request.profile.id if self.request.profile else None
 
         contest_problem = self.contest.contest_problems.get(problem=self.problem)
         for s in context["submissions"]:

resources/submission.scss

@@ -363,9 +363,14 @@ label[for="language"], label[for="status"] {
     }
 }
 
-.lightbox-submissions {
+@media (min-width: 800px) {
-    td {
+    .lightbox-submissions {
-        padding-right: 0.2em;
+        .lightbox-submissions-time {
-        font-size: 1.2em;
+            padding-right: 1em;
+        }
+        td {
+            padding-right: 0.2em;
+            font-size: 1.2em;
+        }
     }
-}
+}

templates/contest/ranking-css.html

@@ -0,0 +1,185 @@
+<style>
+    #content-left {
+        overflow-x: auto;
+    }
+
+    #users-table .username {
+        min-width: 15em;
+    }
+
+    #users-table td {
+        height: 2.5em;
+    }
+
+    #users-table a {
+        display: block;
+    }
+
+    .userinfo a, .user-name a, .user-name form {
+        display: inline !important;
+    }
+
+    #users-table th a, #users-table th a:link, #users-table th a:visited {
+        color: white;
+    }
+
+    #users-table th a:hover {
+        color: #0F0;
+    }
+
+    #users-table td a:hover {
+        text-decoration: underline;
+    }
+
+    .first-solve {
+        background: #00f9a1;
+    }
+
+    .rank {
+        min-width: 2.5em
+    }
+
+    .points {
+        min-width: 2.5em;
+    }
+
+    .disqualified {
+        background-color: #ffa8a8 !important;
+    }
+
+    .full-score, .full-score a {
+        font-weight: bold;
+        color: green;
+    }
+
+    .partial-score, .partial-score a {
+        color: green;
+    }
+
+    .failed-score, .failed-score a {
+        font-weight: bold;
+        color: red;
+    }
+
+    .pretest-full-score, .pretest-full-score a {
+        font-weight: bold;
+        color: #2980b9;
+    }
+
+    .pretest-partial-score, .pretest-partial-score a {
+        color: #2980b9;
+    }
+
+    .pretest-failed-score, .pretest-failed-score a {
+        font-weight: bold;
+        color: red;
+    }
+
+    .user-points {
+        font-weight: bold;
+        color: black;
+    }
+
+    .solving-time {
+        color: gray;
+        font-weight: normal;
+        font-size: 0.75em;
+        padding-bottom: -0.75em;
+    }
+
+    .point-denominator {
+        border-top: 1px solid gray;
+        font-size: 0.7em;
+    }
+
+    .start-time {
+        display: none;
+    }
+
+    .user-name {
+        position: relative;
+    }
+
+    .organization-column {
+        display: none;
+        text-align: left !important;
+        border-right: none !important;
+    }
+
+    .organization-column a {
+        color: gray !important;
+        font-weight: 600;
+    }
+
+    .fullname-column {
+        text-align: right !important;
+        border-right: none !important;
+    }
+
+    .fullname-column span {
+        color: gray !important;
+        font-weight: 600;
+    }
+
+    .featherlight-content {
+        border-radius: 10px;
+        height: 80%;
+        width:  60%;
+        overflow: auto;
+    }
+
+    .select2-selection__arrow {
+        display: none;
+    }
+
+    .select2-selection__rendered {
+        cursor: text;
+        overflow: initial !important
+    }
+
+    .select2-results__option--highlighted {
+        background-color: #DEDEDE !important;
+    }
+
+    .select2-results__option {
+        white-space: nowrap;
+    }
+
+    #search-contest, #search-contest + .select2 {
+        margin-top: 0.5em;
+    }
+
+    #search-contest {
+        width: 200px;
+        height: 2.3em;
+    }
+    html.with-featherlight {
+        overflow: unset;
+    }
+    
+    @media (max-width: 799px) {
+        .featherlight-content {
+            width:  95%;
+        }
+        #users-table .username {
+            min-width: fit-content;
+        }
+    }
+</style>
+
+{% if has_rating %}
+    <style>#users-table .rate-box {
+        font-size: 0.85em;
+        float: left;
+    }
+
+    #users-table td:nth-child(1) .rating {
+        margin-left: 1.25em;
+        display: block;
+    }
+
+    #users-table td:nth-child(2) a {
+        display: block;
+    }
+    </style>
+{% endif %}

templates/contest/ranking.html

@@ -9,189 +9,7 @@
 
 {% block users_media %}
     <link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
-
+    {% include "contest/ranking-css.html" %}
-    <style>
-        #content-left {
-            overflow-x: auto;
-        }
-
-        #users-table .username {
-            min-width: 20em;
-        }
-
-        #users-table td {
-            height: 2.5em;
-        }
-
-        #users-table a {
-            display: block;
-        }
-
-        .userinfo a, .user-name a, .user-name form {
-            display: inline !important;
-        }
-
-        #users-table th a, #users-table th a:link, #users-table th a:visited {
-            color: white;
-        }
-
-        #users-table th a:hover {
-            color: #0F0;
-        }
-
-        #users-table td a:hover {
-            text-decoration: underline;
-        }
-
-        .first-solve {
-            background: #00f9a1;
-        }
-
-        .rank {
-            min-width: 2.5em
-        }
-
-        .points {
-            min-width: 2.5em;
-        }
-
-        .disqualified {
-            background-color: #ffa8a8 !important;
-        }
-
-        .full-score, .full-score a {
-            font-weight: bold;
-            color: green;
-        }
-
-        .partial-score, .partial-score a {
-            color: green;
-        }
-
-        .failed-score, .failed-score a {
-            font-weight: bold;
-            color: red;
-        }
-
-        .pretest-full-score, .pretest-full-score a {
-            font-weight: bold;
-            color: #2980b9;
-        }
-
-        .pretest-partial-score, .pretest-partial-score a {
-            color: #2980b9;
-        }
-
-        .pretest-failed-score, .pretest-failed-score a {
-            font-weight: bold;
-            color: red;
-        }
-
-        .user-points {
-            font-weight: bold;
-            color: black;
-        }
-
-        .solving-time {
-            color: gray;
-            font-weight: normal;
-            font-size: 0.75em;
-            padding-bottom: -0.75em;
-        }
-
-        .point-denominator {
-            border-top: 1px solid gray;
-            font-size: 0.7em;
-        }
-
-        .start-time {
-            display: none;
-        }
-
-        .user-name {
-            position: relative;
-        }
-
-        .organization-column {
-            display: none;
-            text-align: left !important;
-            border-right: none !important;
-        }
-
-        .organization-column a {
-            color: gray !important;
-            font-weight: 600;
-        }
-
-        .fullname-column {
-            text-align: right !important;
-            border-right: none !important;
-        }
-
-        .fullname-column span {
-            color: gray !important;
-            font-weight: 600;
-        }
-
-        .featherlight-content {
-            border-radius: 10px;
-            height: 80%;
-            width:  60%;
-            overflow: auto;
-        }
-
-        .featherlight {
-            /*position: re;*/
-        }
-    </style>
-
-    {% if has_rating %}
-        <style>#users-table .rate-box {
-            font-size: 0.85em;
-            float: left;
-        }
-
-        #users-table td:nth-child(1) .rating {
-            margin-left: 1.25em;
-            display: block;
-        }
-
-        #users-table td:nth-child(2) a {
-            display: block;
-        }
-        </style>
-    {% endif %}
-
-    <style>
-        .select2-selection__arrow {
-            display: none;
-        }
-
-        .select2-selection__rendered {
-            cursor: text;
-            overflow: initial !important
-        }
-
-        .select2-results__option--highlighted {
-            background-color: #DEDEDE !important;
-        }
-
-        .select2-results__option {
-            white-space: nowrap;
-        }
-
-        #search-contest, #search-contest + .select2 {
-            margin-top: 0.5em;
-        }
-
-        #search-contest {
-            width: 200px;
-            height: 2.3em;
-        }
-        html.with-featherlight {
-            overflow: unset;
-        }
-    </style>
 {% endblock %}
 
 {% block users_js_media %}

templates/submission/user-ajax.html

@@ -6,7 +6,7 @@
 {% for submission in submissions %}
     <tr>
         {% set can_view = submission_layout(submission, profile_id, request.user, editable_problem_ids, completed_problem_ids) %}
-        <td style="padding-right: 1em">
+        <td class="lightbox-submissions-time">
             {% if submission.contest_time %}
                 {{submission.contest_time}}
             {% else %}