Change layout of contest list

This commit is contained in:
cuom1999 2024-05-05 22:47:57 -05:00
parent fae8422508
commit 4549d57ee1
9 changed files with 414 additions and 434 deletions

View file

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

View file

@ -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+ */

View file

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

View file

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

View file

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

View 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>

View file

@ -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();

View file

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