Change layout of contest list
This commit is contained in:
parent
fae8422508
commit
4549d57ee1
9 changed files with 414 additions and 434 deletions
|
@ -158,15 +158,6 @@ class ContestList(
|
||||||
return request.session.get(key, False)
|
return request.session.get(key, False)
|
||||||
return request.GET.get(key, None) == "1"
|
return request.GET.get(key, None) == "1"
|
||||||
|
|
||||||
def update_session(self, request):
|
|
||||||
to_update = ("show_orgs",)
|
|
||||||
for key in to_update:
|
|
||||||
if key in request.GET:
|
|
||||||
val = request.GET.get(key) == "1"
|
|
||||||
request.session[key] = val
|
|
||||||
else:
|
|
||||||
request.session[key] = False
|
|
||||||
|
|
||||||
def get(self, request, *args, **kwargs):
|
def get(self, request, *args, **kwargs):
|
||||||
self.contest_query = None
|
self.contest_query = None
|
||||||
self.org_query = []
|
self.org_query = []
|
||||||
|
@ -191,9 +182,18 @@ class ContestList(
|
||||||
except ValueError:
|
except ValueError:
|
||||||
pass
|
pass
|
||||||
|
|
||||||
self.update_session(request)
|
|
||||||
return super(ContestList, self).get(request, *args, **kwargs)
|
return super(ContestList, self).get(request, *args, **kwargs)
|
||||||
|
|
||||||
|
def post(self, request, *args, **kwargs):
|
||||||
|
to_update = ("show_orgs",)
|
||||||
|
for key in to_update:
|
||||||
|
if key in request.GET:
|
||||||
|
val = request.GET.get(key) == "1"
|
||||||
|
request.session[key] = val
|
||||||
|
else:
|
||||||
|
request.session[key] = False
|
||||||
|
return HttpResponseRedirect(request.get_full_path())
|
||||||
|
|
||||||
def _get_queryset(self):
|
def _get_queryset(self):
|
||||||
queryset = (
|
queryset = (
|
||||||
super(ContestList, self)
|
super(ContestList, self)
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -863,6 +863,8 @@ noscript #noscript {
|
||||||
|
|
||||||
.margin-label{
|
.margin-label{
|
||||||
margin-bottom: 2.5px;
|
margin-bottom: 2.5px;
|
||||||
|
padding-bottom: 0.25em;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
background: white;
|
||||||
|
|
||||||
.info-contest:first-child, .info-contest:nth-child(2) {
|
.info-contest:first-child, .info-contest:nth-child(2) {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
@ -24,10 +25,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contest-title {
|
.contest-title {
|
||||||
font-size: 17px;
|
font-size: 1.1em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 150%;
|
margin-bottom: 5px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -206,7 +206,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contest-list-title {
|
.contest-list-title {
|
||||||
font-size: 18px;
|
font-size: 1.1em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -97,11 +97,6 @@
|
||||||
height: 2.3em;
|
height: 2.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[for="category"], label[for="type"] {
|
|
||||||
padding-bottom: 0.25em;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#category {
|
#category {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
{% extends "two-column-content.html" %}
|
{% extends "three-column-content.html" %}
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
<meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
|
<meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block two_col_media %}
|
{% block three_col_media %}
|
||||||
<style>
|
<style>
|
||||||
.non-padding-top {
|
.non-padding-top {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
@ -15,8 +15,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contest-group-header {
|
.contest-group-header {
|
||||||
padding-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
{% if page_obj and page_obj.number > 1%}
|
{% if page_obj and page_obj.number > 1%}
|
||||||
|
@ -25,55 +24,28 @@
|
||||||
}
|
}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
#search-contest {
|
||||||
#search-contest, #search-org, #search-btn {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
#search-contest {
|
|
||||||
height: 2.5em;
|
|
||||||
}
|
|
||||||
#search-btn {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
#filter-form input {
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
height: 2.3em;
|
||||||
margin-right: 1em;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-top: 4px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-org {
|
#search-org {
|
||||||
width: 40%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
#search-btn {
|
|
||||||
display: inline-block;
|
|
||||||
height: 2.3em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block two_col_js %}
|
{% block three_col_js %}
|
||||||
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
|
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
var $form = $('form#filter-form');
|
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();
|
$form.submit();
|
||||||
});
|
});
|
||||||
$('.time-remaining').each(function () {
|
$('.time-remaining').each(function () {
|
||||||
|
@ -91,8 +63,12 @@
|
||||||
return confirm(q);
|
return confirm(q);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
|
$('#search-contest').keypress(function (e) {
|
||||||
.css({'visibility': 'visible'});
|
if (e.keyCode == 13)
|
||||||
|
$('#go').click();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
|
||||||
|
|
||||||
// var tooltip_classes = 'tooltipped tooltipped-e';
|
// var tooltip_classes = 'tooltipped tooltipped-e';
|
||||||
//
|
//
|
||||||
|
@ -112,6 +88,12 @@
|
||||||
{% include "contest/contest-list-tabs.html" %}
|
{% include "contest/contest-list-tabs.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block right_sidebar %}
|
||||||
|
<div class="right-sidebar">
|
||||||
|
{% include "contest/search-form.html" %}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% macro contest_head(contest) %}
|
{% macro contest_head(contest) %}
|
||||||
<a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
|
<a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
|
||||||
{{contest.name}}
|
{{contest.name}}
|
||||||
|
@ -162,31 +144,32 @@
|
||||||
<div class="time-left">
|
<div class="time-left">
|
||||||
{% if contest.time_limit %}
|
{% if contest.time_limit %}
|
||||||
<div>
|
<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>
|
||||||
<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>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div>
|
<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>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
<div>
|
||||||
<div class="time">
|
<b>{{_("Length")}}</b>:
|
||||||
{% if contest.time_limit %}
|
{% if contest.time_limit %}
|
||||||
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }} window{% endtrans %}
|
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }}{% endtrans %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }} long{% endtrans %}
|
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }}{% endtrans %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% macro user_count(contest, user) %}
|
{% macro user_count(contest, user) %}
|
||||||
{% if contest.can_see_own_scoreboard(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 %}
|
{% else %}
|
||||||
{{ contest.user_count }}
|
<i class="fa fa-users"></i>{{ contest.user_count }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
|
@ -208,31 +191,17 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% block middle_content %}
|
{% macro contest_format_user(contest, show_user=True) %}
|
||||||
<form id="filter-form">
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||||
<input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}"
|
<div class="contest-title"> {{ _('Format') }} </div>
|
||||||
placeholder="{{ _('Search contests...') }}">
|
<div style="flex-grow: 1">{{ contest.format.name }}</div>
|
||||||
{% if organizations %}
|
{% if show_user %}
|
||||||
<select id="search-org" name="orgs" multiple>
|
<div class="contest-title">{{ user_count(contest, request.user) }}</div>
|
||||||
{% for org in organizations %}
|
|
||||||
<option value="{{ org.id }}"{% if org.id in org_query %} selected{% endif %}>
|
|
||||||
{{ org.name }}
|
|
||||||
</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
{% endif %}
|
{% endmacro %}
|
||||||
{% if create_url %}
|
|
||||||
<a href="{{create_url}}" class="button small" style="float: right"><i class="fa fa-plus"></i> {{ _('Create')}}</a>
|
|
||||||
{% endif %}
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
{% block middle_content %}
|
||||||
<div id="ongoing-table">
|
<div id="ongoing-table">
|
||||||
{% if active_participations %}
|
{% if active_participations %}
|
||||||
<h3 class="toggle open contest-group-header">
|
<h3 class="toggle open contest-group-header">
|
||||||
|
@ -263,12 +232,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
<div class="info-contest" style="flex: 0.5;">
|
||||||
<div class="contest-title"> {{ _('Format') }} </div>
|
{{ contest_format_user(contest) }}
|
||||||
{{ contest.format.name }}
|
|
||||||
</div>
|
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
|
||||||
<div class="contest-title"> {{ _('Users') }} </div>
|
|
||||||
{{ user_count(contest, request.user) }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="participate-button">
|
<div class="participate-button">
|
||||||
{{ contest_join(contest, request) }}
|
{{ contest_join(contest, request) }}
|
||||||
|
@ -303,12 +267,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
<div class="info-contest" style="flex: 0.5;">
|
||||||
<div class="contest-title"> {{ _('Format') }} </div>
|
{{ contest_format_user(contest) }}
|
||||||
{{ contest.format.name }}
|
|
||||||
</div>
|
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
|
||||||
<div class="contest-title"> {{ _('Users') }} </div>
|
|
||||||
{{ user_count(contest, request.user) }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="participate-button">
|
<div class="participate-button">
|
||||||
{{ contest_join(contest, request) }}
|
{{ contest_join(contest, request) }}
|
||||||
|
@ -347,8 +306,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
<div class="info-contest" style="flex: 0.5;">
|
||||||
<div class="contest-title"> {{ _('Format') }} </div>
|
{{ contest_format_user(contest, show_user=False) }}
|
||||||
{{ contest.format.name }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -384,12 +342,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
<div class="info-contest" style="flex: 0.5;">
|
||||||
<div class="contest-title"> {{ _('Format') }} </div>
|
{{ contest_format_user(contest) }}
|
||||||
{{ contest.format.name }}
|
|
||||||
</div>
|
|
||||||
<div class="info-contest" style="flex: 0.5;">
|
|
||||||
<div class="contest-title"> {{ _('Users') }} </div>
|
|
||||||
{{ user_count(contest, request.user) }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="participate-button">
|
<div class="participate-button">
|
||||||
{% if request.in_contest and request.participation.contest == contest %}
|
{% 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>
|
|
@ -86,10 +86,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$category.select2().css({'visibility': 'visible'}).change(clean_submit);
|
$category.select2().css({'visibility': 'visible'}).change(clean_submit);
|
||||||
$('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'})
|
$('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'});
|
||||||
.css({'visibility': 'visible'});
|
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
|
||||||
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
|
|
||||||
.css({'visibility': 'visible'});
|
|
||||||
$('#search-author').select2({
|
$('#search-author').select2({
|
||||||
multiple: 1,
|
multiple: 1,
|
||||||
placeholder: '{{ _('Authors') }}...',
|
placeholder: '{{ _('Authors') }}...',
|
||||||
|
@ -98,8 +96,7 @@
|
||||||
delay: 250,
|
delay: 250,
|
||||||
cache: true,
|
cache: true,
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
.css({'visibility': 'visible'});
|
|
||||||
|
|
||||||
// This is incredibly nasty to do but it's needed because otherwise the select2 steals the focus
|
// This is incredibly nasty to do but it's needed because otherwise the select2 steals the focus
|
||||||
$search.keypress(function (e) {
|
$search.keypress(function (e) {
|
||||||
|
@ -157,8 +154,7 @@
|
||||||
$(".edit-btn").on('click', function() {
|
$(".edit-btn").on('click', function() {
|
||||||
var pid = $(this).attr('pid');
|
var pid = $(this).attr('pid');
|
||||||
$('#volunteer-types-' + pid).css({'width': '100%'});
|
$('#volunteer-types-' + pid).css({'width': '100%'});
|
||||||
$('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'})
|
$('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'});
|
||||||
.css({'visibility': 'visible'});
|
|
||||||
|
|
||||||
$('#form-' + pid).show();
|
$('#form-' + pid).show();
|
||||||
$('#submit-' + pid).show();
|
$('#submit-' + pid).show();
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="filter-form-group">
|
<div class="filter-form-group">
|
||||||
<label class="bold-text margin-label" for="type"><i class="non-italics">{{ _('Author') }}</i></label>
|
<label class="bold-text margin-label" for="search-author"><i class="non-italics">{{ _('Author') }}</i></label>
|
||||||
<select id="search-author" name="authors" multiple>
|
<select id="search-author" name="authors" multiple>
|
||||||
{% for author in author_query %}
|
{% for author in author_query %}
|
||||||
<option value="{{ author.id }}" selected>
|
<option value="{{ author.id }}" selected>
|
||||||
|
|
Loading…
Reference in a new issue