Change layout of contest list
This commit is contained in:
cuom1999
parent
fae8422508
commit
4549d57ee1
9 changed files with 414 additions and 434 deletions
|
|
@ -1,9 +1,9 @@
|
|||
{% extends "two-column-content.html" %}
|
||||
{% extends "three-column-content.html" %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
|
||||
{% endblock %}
|
||||
|
||||
{% block two_col_media %}
|
||||
{% block three_col_media %}
|
||||
<style>
|
||||
.non-padding-top {
|
||||
padding-top: 0;
|
||||
|
|
@ -15,8 +15,7 @@
|
|||
}
|
||||
|
||||
.contest-group-header {
|
||||
padding-bottom: 1em;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
{% if page_obj and page_obj.number > 1%}
|
||||
|
|
@ -25,55 +24,28 @@
|
|||
}
|
||||
{% endif %}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#search-contest, #search-org, #search-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#search-contest {
|
||||
height: 2.5em;
|
||||
}
|
||||
#search-btn {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#filter-form input {
|
||||
padding-left: 8px;
|
||||
}
|
||||
#search-contest {
|
||||
width: 100%;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
#filter-form input {
|
||||
margin: 0 0.5em 0 0!important;
|
||||
padding-left: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
#search-contest {
|
||||
width: 30%;
|
||||
height: 2.3em;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
#search-org {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#search-btn {
|
||||
display: inline-block;
|
||||
height: 2.3em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
#search-org {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block two_col_js %}
|
||||
{% block three_col_js %}
|
||||
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
var $form = $('form#filter-form');
|
||||
$('input#show_orgs').click(function () {
|
||||
$('#show_orgs').click(function () {
|
||||
($('<form>').attr('action', window.location.pathname + '?' + $form.serialize())
|
||||
.append($('<input>').attr('type', 'hidden').attr('name', 'csrfmiddlewaretoken')
|
||||
.attr('value', $.cookie('csrftoken')))
|
||||
.attr('method', 'POST').appendTo($('body')).submit());
|
||||
});
|
||||
$('#go').click(function() {
|
||||
$form.submit();
|
||||
});
|
||||
$('.time-remaining').each(function () {
|
||||
|
|
@ -91,8 +63,12 @@
|
|||
return confirm(q);
|
||||
});
|
||||
|
||||
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
|
||||
.css({'visibility': 'visible'});
|
||||
$('#search-contest').keypress(function (e) {
|
||||
if (e.keyCode == 13)
|
||||
$('#go').click();
|
||||
});
|
||||
|
||||
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
|
||||
|
||||
// var tooltip_classes = 'tooltipped tooltipped-e';
|
||||
//
|
||||
|
|
@ -112,6 +88,12 @@
|
|||
{% include "contest/contest-list-tabs.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block right_sidebar %}
|
||||
<div class="right-sidebar">
|
||||
{% include "contest/search-form.html" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% macro contest_head(contest) %}
|
||||
<a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
|
||||
{{contest.name}}
|
||||
|
|
@ -162,31 +144,32 @@
|
|||
<div class="time-left">
|
||||
{% if contest.time_limit %}
|
||||
<div>
|
||||
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("g:i a d/m/Y")) }}
|
||||
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
|
||||
</div>
|
||||
<div>
|
||||
<b>{{_("End")}}</b>: {{ contest.end_time|date(_("g:i a d/m/Y")) }}
|
||||
<b>{{_("End")}}</b>: {{ contest.end_time|date(_("H:i d/m/Y")) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div>
|
||||
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("g:i a d/m/Y")) }}
|
||||
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="time">
|
||||
{% if contest.time_limit %}
|
||||
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }} window{% endtrans %}
|
||||
{% else %}
|
||||
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }} long{% endtrans %}
|
||||
{% endif %}
|
||||
<div>
|
||||
<b>{{_("Length")}}</b>:
|
||||
{% if contest.time_limit %}
|
||||
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }}{% endtrans %}
|
||||
{% else %}
|
||||
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }}{% endtrans %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro user_count(contest, user) %}
|
||||
{% if contest.can_see_own_scoreboard(user) %}
|
||||
<a href="{{ url('contest_ranking', contest.key) }}">{{ contest.user_count }}</a>
|
||||
<a href="{{ url('contest_ranking', contest.key) }}"><i class="fa fa-users"></i> {{ contest.user_count }}</a>
|
||||
{% else %}
|
||||
{{ contest.user_count }}
|
||||
<i class="fa fa-users"></i>{{ contest.user_count }}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
|
@ -208,31 +191,17 @@
|
|||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% block middle_content %}
|
||||
<form id="filter-form">
|
||||
<input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}"
|
||||
placeholder="{{ _('Search contests...') }}">
|
||||
{% if organizations %}
|
||||
<select id="search-org" name="orgs" multiple>
|
||||
{% for org in organizations %}
|
||||
<option value="{{ org.id }}"{% if org.id in org_query %} selected{% endif %}>
|
||||
{{ org.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% macro contest_format_user(contest, show_user=True) %}
|
||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||
<div class="contest-title"> {{ _('Format') }} </div>
|
||||
<div style="flex-grow: 1">{{ contest.format.name }}</div>
|
||||
{% if show_user %}
|
||||
<div class="contest-title">{{ user_count(contest, request.user) }}</div>
|
||||
{% endif %}
|
||||
<button id="search-btn" class="btn-green small"> {{ _('Search')}} </button>
|
||||
{% if organizations %}
|
||||
<div>
|
||||
<input id="show_orgs" type="checkbox" name="show_orgs" value="1" {% if show_orgs %}checked{% endif %}>
|
||||
<label for="show_orgs">{{ _('Hide organization contests') }}</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if create_url %}
|
||||
<a href="{{create_url}}" class="button small" style="float: right"><i class="fa fa-plus"></i> {{ _('Create')}}</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% block middle_content %}
|
||||
<div id="ongoing-table">
|
||||
{% if active_participations %}
|
||||
<h3 class="toggle open contest-group-header">
|
||||
|
|
@ -263,12 +232,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Format') }} </div>
|
||||
{{ contest.format.name }}
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Users') }} </div>
|
||||
{{ user_count(contest, request.user) }}
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{{ contest_join(contest, request) }}
|
||||
|
|
@ -303,12 +267,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Format') }} </div>
|
||||
{{ contest.format.name }}
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Users') }} </div>
|
||||
{{ user_count(contest, request.user) }}
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{{ contest_join(contest, request) }}
|
||||
|
|
@ -347,8 +306,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Format') }} </div>
|
||||
{{ contest.format.name }}
|
||||
{{ contest_format_user(contest, show_user=False) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -384,12 +342,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Format') }} </div>
|
||||
{{ contest.format.name }}
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
<div class="contest-title"> {{ _('Users') }} </div>
|
||||
{{ user_count(contest, request.user) }}
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{% if request.in_contest and request.participation.contest == contest %}
|
||||
|
|
|
|||
29
templates/contest/search-form.html
Normal file
29
templates/contest/search-form.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="sidebox">
|
||||
<h3 class="colored-text"><i class="fa fa-search"></i>{{ _('Contest search') }}</h3>
|
||||
<div class="sidebox-content">
|
||||
<form id="filter-form" method="GET">
|
||||
<input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}"
|
||||
placeholder="{{ _('Search contests...') }}">
|
||||
{% if organizations %}
|
||||
<div style="margin-bottom: 1em;">
|
||||
<input id="show_orgs" type="checkbox" name="show_orgs" value="1" {% if show_orgs %}checked{% endif %}>
|
||||
<label for="show_orgs">{{ _('Hide organization contests') }}</label>
|
||||
</div>
|
||||
<label for="search-org" class="bold-text margin-label">{{ _('Group') }}</label>
|
||||
<select id="search-org" name="orgs" multiple>
|
||||
{% for org in organizations %}
|
||||
<option value="{{ org.id }}"{% if org.id in org_query %} selected{% endif %}>
|
||||
{{ org.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
<div class="form-submit-group">
|
||||
<a id="go" class="button small">{{ _('Go') }}</a>
|
||||
{% if create_url %}
|
||||
<a href="{{ create_url }}" class="button small"><i class="fa fa-plus"></i> {{ _('Create') }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue