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.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):
self.contest_query = None
self.org_query = []
@ -191,9 +182,18 @@ class ContestList(
except ValueError:
pass
self.update_session(request)
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):
queryset = (
super(ContestList, self)

File diff suppressed because it is too large Load diff

View file

@ -863,6 +863,8 @@ noscript #noscript {
.margin-label{
margin-bottom: 2.5px;
padding-bottom: 0.25em;
display: block;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

View file

@ -8,6 +8,7 @@
width: 100%;
box-sizing: border-box;
display: flex;
background: white;
.info-contest:first-child, .info-contest:nth-child(2) {
margin-right: 15px;
@ -24,10 +25,9 @@
}
.contest-title {
font-size: 17px;
font-size: 1.1em;
font-weight: 600;
line-height: 150%;
margin-bottom: 10px;
margin-bottom: 5px;
}
}
@ -206,7 +206,7 @@
}
.contest-list-title {
font-size: 18px;
font-size: 1.1em;
font-weight: 600;
}

View file

@ -97,11 +97,6 @@
height: 2.3em;
}
label[for="category"], label[for="type"] {
padding-bottom: 0.25em;
display: block;
}
#category {
margin-top: 0.5em;
width: 100%;

View file

@ -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 {
#search-contest {
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;
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;
}
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">
<div>
<b>{{_("Length")}}</b>:
{% 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 %}
{% 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 %}
</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>
{% 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 %}

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);
$('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'})
.css({'visibility': 'visible'});
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
.css({'visibility': 'visible'});
$('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'});
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
$('#search-author').select2({
multiple: 1,
placeholder: '{{ _('Authors') }}...',
@ -98,8 +96,7 @@
delay: 250,
cache: true,
}
})
.css({'visibility': 'visible'});
});
// This is incredibly nasty to do but it's needed because otherwise the select2 steals the focus
$search.keypress(function (e) {
@ -157,8 +154,7 @@
$(".edit-btn").on('click', function() {
var pid = $(this).attr('pid');
$('#volunteer-types-' + pid).css({'width': '100%'});
$('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'})
.css({'visibility': 'visible'});
$('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'});
$('#form-' + pid).show();
$('#submit-' + pid).show();

View file

@ -47,7 +47,7 @@
</div>
{% endif %}
<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>
{% for author in author_query %}
<option value="{{ author.id }}" selected>