Fix mobile UI

This commit is contained in:
cuom1999 2022-06-01 15:18:52 -05:00
parent 78b818901e
commit 76b631366b
5 changed files with 198 additions and 189 deletions

View file

@ -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"]:

View file

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

View file

@ -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 %}

View file

@ -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" />
<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>
{% include "contest/ranking-css.html" %}
{% endblock %}
{% block users_js_media %}

View file

@ -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 %}