{% extends "common-content.html" %} {% block meta %} <meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future."> {% endblock %} {% block media %} <style> .time-left { text-align: left; color: #777; padding-top: 0.5em; } .content-description ul { padding: 0 !important; } .btn-contest { display: inline-block; padding: 1px 6px; } {% if page_obj and page_obj.number > 1%} #ongoing-table { display: none; } {% 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; } } @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; } } </style> {% endblock %} {% block js_media %} <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('.time-remaining').each(function () { count_down($(this)); }); $('.contest-tag').find('a[data-featherlight]').featherlight(); $('.join-warning').click(function () { return confirm('{{ _('Are you sure you want to join?') }}\n' + '{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}'); }); function makeToggleBtn(btn, divElement) { btn.click(function() { divElement.toggle(300); if (btn.html().trim() === '{{ _('Hide')}}') { btn.html('{{ _('Show')}}'); } else { btn.html('{{ _('Hide')}}'); } }); } makeToggleBtn($("#ongoing-btn"), $("#ongoing-table")); $('#search-org').select2({multiple: 1, placeholder: '{{ _('Organizations...') }}'}) .css({'visibility': 'visible'}); // var tooltip_classes = 'tooltipped tooltipped-e'; // // $('.contest-tag').each(function () { // var link = $(this);// // link.mouseenter(function (e) { // link.addClass(tooltip_classes).attr('aria-label', link.attr('data-description')); // }).mouseleave(function (e) { // link.removeClass(tooltip_classes).removeAttr('aria-label'); // }); // }); }); </script> {% endblock %} {% block title_ruler %}{% endblock %} {% block title_row %} {% set tab = 'list' %} {% set title = 'Contests' %} {% include "contest/contest-list-tabs.html" %} {% endblock %} {% macro contest_head(contest) %} {% spaceless %} <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title"> {{- contest.name -}} </a> <span class="contest-tags"> {% if not contest.is_visible %} <span style="background-color: #000000; color: #ffffff" class="contest-tag"> <i class="fa fa-eye-slash"></i> {{ _('hidden') }} </span> {% endif %} {% if contest.is_private %} <span style="background-color: #666666; color: #ffffff" class="contest-tag"> <i class="fa fa-lock"></i> {{ _('private') }} </span> {% endif %} {% if contest.is_organization_private %} {% for org in contest.organizations.all() %} <span style="background-color: #cccccc" class="contest-tag"> <a href="{{ org.get_absolute_url() }}" style="color: #000000"> <i class="fa fa-lock"></i> {{ org.name }} </a> </span> {% endfor %} {% endif %} {% if contest.is_rated %} <span style="background-color: #e54c14; color: #ffffff" class="contest-tag"> <i class="fa fa-bar-chart"></i> {{ _('rated') }} </span> {% endif %} {% for tag in contest.tags.all() %} <span style="background-color: {{ tag.color }}" class="contest-tag"> <a href="{{ url('contest_tag', tag.name) }}" style="color: {{ tag.text_color }}" data-featherlight="{{ url('contest_tag_ajax', tag.name) }}"> {{- tag.name -}} </a> </span> {% endfor %} </span> {% endspaceless %} {% endmacro %} {% macro time_left(contest) %} <div class="time time-left"> {% if contest.time_limit %} {{ contest.start_time|date(_("M j, Y, G:i")) }} - {{ contest.end_time|date(_("M j, Y, G:i")) }} {% else %} {{ contest.start_time|date(_("M j, Y, G:i")) }} {% endif %} <br> {% if contest.time_limit %} {{ _('%(time_limit)s window', time_limit=contest.time_limit|timedelta('localized-no-seconds')) }} {% else %} {{ _('%(duration)s long', duration=contest.contest_window_length|timedelta('localized-no-seconds')) }} {% endif %} </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> {% else %} {{ contest.user_count }} {% endif %} {% endmacro %} {% 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 participate-button" value="{{ _('Spectate') }}"> </form> {% else %} <form action="{{ url('contest_join', contest.key) }}" method="post"> {% csrf_token %} <input type="submit" class="unselectable button full participate-button join-warning" value="{{ _('Join') }}"> </form> {% endif %} </td> {% endif %} {% endmacro %} {% block body %} <div class="content-description"> <form id="filter-form"> <input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}" placeholder="{{ _('Search contests...') }}"> <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> <button id="search-btn"> {{ _('Search')}} </button> </form> {% if active_participations %} <h4>{{ _('Active Contests') }}</h4> <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">{{ _('Window ends in %(countdown)s', countdown=participation.time_remaining|as_countdown)}} {% elif contest.time_before_end %} <span class="time">{{ _('Ends in %(countdown)s', countdown=contest.time_before_end|as_countdown) }}</span> {% endif %} {{ time_left(contest) }} {% endif %} </div> </td> <td> {{ user_count(contest, request.user) }} </td> {{ contest_join(contest, request) }} </tr> {% endwith %} {% endfor %} </tbody> </table> <br> {% endif %} {% if current_contests %} <h4> {{ _('Ongoing Contests') }} <button class="btn-contest" id="ongoing-btn"> {% if page_obj and page_obj.number > 1%} {{_('Show')}} {% else %} {{_('Hide')}} {% endif %} </button> </h4> <div id="ongoing-table"> <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">{{ _('Ends in %(countdown)s', countdown=contest.time_before_end|as_countdown) }}</span> {% endif %} {{ time_left(contest) }} {% endif %} </div> </td> <td> {{ user_count(contest, request.user) }} </td> {{ contest_join(contest, request) }} </tr> {% endfor %} </tbody> </table> <br> </div> {% endif %} <h4>{{ _('Upcoming Contests') }}</h4> {% if future_contests %} <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.time_before_start|as_countdown) }}</span> {% endif %} {{ time_left(contest) }} {% endif %} </div> </td> </tr> {% endfor %} </tbody> </table> {% else %} <i>{{ _('There are no scheduled contests at this time.') }}</i> <br> {% endif %} <br> {% if past_contests %} <h4>{{ _('Past Contests') }}</h4> {% if page_obj and page_obj.num_pages > 1 %} <div style="margin-bottom: 4px;"> {% include "list-pages.html" %} </div> {% endif %} <table class="contest-list table striped"> <thead> <tr> <th style="width:90%"> <a style="color: #7dc7ff" href="{{ sort_links.name }}">{{ _('Contest') }}{{ sort_order.name }}</a> </th> <th> <a style="color: #7dc7ff" 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 participate-button" value="{{ _('Virtual join') }}"> </form></td> {% endif %} </tr> {% endfor %} </tbody> </table> {% if page_obj and page_obj.num_pages > 1 %} <div style="margin-top: 10px;"> {% include "list-pages.html" %} </div> {% endif %} {% endif %} </div> {% endblock %}