Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remake contest ui #80

Merged
merged 5 commits into from
Sep 8, 2023
Merged

remake contest ui #80

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eb9c155
remake contest ui
HungBacktracking Sep 7, 2023
79e86c7
move html-class 'list-contest' to contest.scss because of transformin…
HungBacktracking Sep 7, 2023
e6fb05a
Add new ui for active-contest
HungBacktracking Sep 8, 2023
426bed8
beautify the ui
HungBacktracking Sep 8, 2023
dcd4185
Add translation and fix ui
HungBacktracking Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion judge/views/contests.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
59 changes: 32 additions & 27 deletions resources/widgets.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -339,56 +342,58 @@ 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;
}
}

&:last-child > {
a, span {
margin-left: 0;
border-top-right-radius: $widget_border_radius;
border-bottom-right-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;
// }
// }

> {
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;
}
}
}

.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;
}
Expand Down
242 changes: 131 additions & 111 deletions templates/contest/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,33 @@

{% block two_col_media %}
<style>
.list-contest {
box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
HungBacktracking marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
display: flex;
}

.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;
}

.content-description ul {
padding: 0 !important;
}
Expand Down Expand Up @@ -109,7 +136,7 @@

{% 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">
Expand Down Expand Up @@ -186,21 +213,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 %}

Expand Down Expand Up @@ -284,39 +309,38 @@ <h3 class="toggle open contest-group-header">
</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>
{% for contest in current_contests %}
<div class="list-contest">
<div class="info-contest" style="flex: 1.5">
<div class="contest-title">Kì thi:</div>
{{ contest_head(contest) }}
</div>
<div class="info-contest" style="flex: 1.5">
<div class="contest-title">Thời gian:</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">Định dạng:</div>
HungBacktracking marked this conversation as resolved.
Show resolved Hide resolved
{% if contest.format_name == "default" %} IOI
HungBacktracking marked this conversation as resolved.
Show resolved Hide resolved
{% else %} {{ contest.format_name|upper }}
{% 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>
</div>
<div class="info-contest">
<div class="contest-title">Người tham gia:</div>
{{ user_count(contest, request.user) }}
</div>
<div class="participate-button">
{{ contest_join(contest, request) }}
</div>
</div>
{% endfor %}
<br>
</div>
{% else %}
Expand All @@ -332,31 +356,31 @@ <h3 class="toggle open contest-group-header">
</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">Kì thi:</div>
{{ contest_head(contest) }}
</div>
<div class="info-contest" style="flex: 1.5">
<div class="contest-title">Thời gian:</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">Định dạng:</div>
{% if contest.format_name == "default" %} IOI
{% else %} {{ contest.format_name|upper }}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="toggled">
Expand All @@ -371,48 +395,44 @@ <h3 class="toggle open contest-group-header">
</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>

{% for contest in past_contests %}
<div class="list-contest">
<div class="info-contest" style="flex: 1.5">
<div class="contest-title">Kì thi:</div>
{{ contest_head(contest) }}
</div>
<div class="info-contest" style="flex: 1.5">
<div class="contest-title">Thời gian:</div>
<div class="contest-block">
{{ time_left(contest) }}
</div>
</div>
<div class="info-contest">
<div class="contest-title">Định dạng:</div>
{% if contest.format_name == "default" %} IOI
{% else %} {{ contest.format_name|upper }}
{% 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>
</div>
<div class="info-contest">
<div class="contest-title">Người tham gia:</div>
HungBacktracking marked this conversation as resolved.
Show resolved Hide resolved
{{ 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" %}
Expand Down
Loading