new contest ui (#80)
This commit is contained in:
Võ Trung Hoàng Hưng
GitHub
parent
6c64e42322
commit
3542d6ba64
6 changed files with 269 additions and 240 deletions
|
|
@ -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" %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue