Skip to content

Commit 3f2c3bc

Browse files
gardenerikgardenerik
authored
feat: frontend UI improvements (#997)
1 parent 356ffbb commit 3f2c3bc

File tree

14 files changed

+284
-235
lines changed

14 files changed

+284
-235
lines changed

‎bullet/bullet_admin/templates/bullet_admin/results/announce.html‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,57 @@
11
{% extends "web/root_base.html" %}
22
{% load results %}
3+
34
{% block title %}
4-
Results announcement
5+
Results announcement
56
{% endblock title %}
67

78
{% block root_content %}
8-
<div class="w-screen h-screen flex items-center justify-center p-16"
9-
id="js-screen"
10-
hx-select="#js-screen"
11-
hx-target="#js-screen"
12-
hx-swap="outerHTML">
13-
{% if not hidden %}
14-
<div class="text-center">
15-
<div class="text-9xl font-bold mb-6 text-gray-600">{{ position }}.</div>
16-
{% if team %}
17-
{% if team.school %}
18-
<div class="text-7xl font-bold mb-4">
19-
{{ team.school.name }}
20-
{% if team.in_school_symbol %}
21-
<span class="text-primary">{{ team.in_school_symbol }}</span>
22-
{% endif %}
23-
</div>
24-
<div class="text-5xl font-bold mb-6">{{ team.school.address }}</div>
25-
{% else %}
26-
<div class="text-5xl font-bold mb-6">{{ team.name }}</div>
27-
{% endif %}
28-
<div class="text-3xl">{{ team.contestants_names }}</div>
29-
<div class="flex justify-center">{% big_squares result_row %}</div>
30-
<div class="text-4xl mt-4">{{ result_row.solved_count }}</div>
31-
{% endif %}
32-
</div>
9+
<div class="w-screen h-screen flex items-center justify-center p-16"
10+
id="js-screen"
11+
hx-select="#js-screen"
12+
hx-target="#js-screen"
13+
hx-swap="outerHTML">
14+
{% if not hidden %}
15+
<div class="text-center">
16+
<div class="text-9xl font-bold mb-6 text-gray-600">{{ position }}.</div>
17+
{% if team %}
18+
{% if team.school %}
19+
{# TODO: #998 Unify team display #}
20+
<div class="text-7xl font-bold mb-4">
21+
{{ team.school.name }}
22+
{% if team.in_school_symbol %}
23+
<span class="text-primary">{{ team.in_school_symbol }}</span>
24+
{% endif %}
25+
</div>
26+
<div class="text-5xl font-bold mb-6">{{ team.school.address }}</div>
27+
{% else %}
28+
<div class="text-5xl font-bold mb-6">{{ team.name }}</div>
3329
{% endif %}
34-
<div class="p-2 fixed bottom-0 right-0 space-x-1">
35-
<span>{{ position }}.</span>
36-
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
37-
hx-get="{{ links.prev }}"
38-
hx-trigger="click, keyup[key=='ArrowDown'||key=='Backspace'] from:body">
39-
<i class="fas fa-arrow-down"></i>
40-
</button>
41-
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
42-
hx-get="{{ links.hide }}"
43-
hx-trigger="click, keyup[key=='h'] from:body">
44-
<i class="fas fa-eye-slash"></i>
45-
</button>
46-
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
47-
hx-get="{{ links.next }}"
48-
hx-trigger="click, keyup[key=='ArrowUp'||key==' '] from:body">
49-
<i class="fas fa-arrow-up"></i>
50-
</button>
51-
</div>
30+
31+
<div class="text-3xl">{{ team.contestants_names }}</div>
32+
<div class="flex justify-center">{% squares result_row big=True %}</div>
33+
<div class="text-4xl mt-4">{{ result_row.solved_count }}</div>
34+
{% endif %}
35+
</div>
36+
{% endif %}
37+
38+
<div class="p-2 fixed bottom-0 right-0 space-x-1">
39+
<span>{{ position }}.</span>
40+
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
41+
hx-get="{{ links.prev }}"
42+
hx-trigger="click, keyup[key=='ArrowDown'||key=='Backspace'] from:body">
43+
<i class="fas fa-arrow-down"></i>
44+
</button>
45+
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
46+
hx-get="{{ links.hide }}"
47+
hx-trigger="click, keyup[key=='h'] from:body">
48+
<i class="fas fa-eye-slash"></i>
49+
</button>
50+
<button class="btn-admin-sm bg-primary hover:bg-primary-dark"
51+
hx-get="{{ links.next }}"
52+
hx-trigger="click, keyup[key=='ArrowUp'||key==' '] from:body">
53+
<i class="fas fa-arrow-up"></i>
54+
</button>
5255
</div>
56+
</div>
5357
{% endblock root_content %}

‎bullet/competitions/templates/teams/list.html‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
{% extends "web/base.html" %}
2-
{% load content_blocks countries country_url i18n static %}
2+
{% load content_blocks countries country_url i18n static teams %}
33
{% block title %}
4-
{% if is_waitinglist %}
5-
{% translate "Waiting list" %}
6-
{% else %}
7-
{% translate "Team list" %}
8-
{% endif %}
4+
{% if is_waitinglist %}
5+
{% translate "Waiting list" %}
6+
{% else %}
7+
{% translate "Team list" %}
8+
{% endif %}
99
{% endblock title %}
1010

1111
{% block hero %}
12-
<h1 class="text-4xl md:text-6xl font-bold mt-8 md:mt-24 mb-4 md:mb-16">
13-
{% if is_waitinglist %}
14-
{% translate "Waiting list" %}
15-
{% else %}
16-
{% translate "Team list" %}
17-
{% endif %}
18-
</h1>
12+
<h1 class="text-4xl md:text-6xl font-bold mt-8 md:mt-24 mb-4 md:mb-16">
13+
{% if is_waitinglist %}
14+
{% translate "Waiting list" %}
15+
{% else %}
16+
{% translate "Team list" %}
17+
{% endif %}
18+
</h1>
1919
{% endblock hero %}
2020

2121
{% block content %}
2222
{% load_blocks "category" %}
23-
<div class="container mx-auto px-2 mt-8">
24-
<div class="flex flex-wrap justify-center gap-1 mb-2">
23+
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-8">
24+
<div class="flex flex-wrap gap-1 mb-2">
2525
{% for c in countries %}
2626
<a href="?country={{ c }}"
2727
class="{% if c == country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded flex gap-2 items-center flex-wrap">
@@ -32,47 +32,45 @@ <h1 class="text-4xl md:text-6xl font-bold mt-8 md:mt-24 mb-4 md:mb-16">
3232
</a>
3333
{% endfor %}
3434
</div>
35-
<div class="mb-4 text-center">
36-
{% if is_waitinglist %}
37-
<a href="{% country_url "team_list" %}?country={{ country }}"
38-
class="link-primary">{% translate "Team list" %}</a>
39-
{% else %}
40-
<a href="{% country_url "waiting_list" %}?country={{ country }}"
41-
class="link-primary">{% translate "Waiting list" %}</a>
42-
{% endif %}
35+
36+
<div class="mb-4">
37+
{% if is_waitinglist %}
38+
<a href="{% country_url "team_list" %}?country={{ country }}" class="link-primary">{% translate "Team list" %}</a>
39+
{% else %}
40+
<a href="{% country_url "waiting_list" %}?country={{ country }}" class="link-primary">{% translate "Waiting list" %}</a>
41+
{% endif %}
4342
</div>
43+
44+
<div class="mb-8">
45+
<ul class="list-disc list-inside">
46+
{% for v in venues %}
47+
<li><a href="#{{ v.venue.shortcode }}" class="link-primary">{{ v.venue.name }} ({% content_block "category:name_"|add:v.venue.category.identifier %})</a></li>
48+
{% endfor %}
49+
</ul>
50+
</div>
51+
4452
{% for v in venues %}
45-
<div class="mb-8">
46-
<div class="flex flex-col md:flex-row md:items-baseline md:justify-between px-4 py-2 rounded">
47-
<h2 class="font-bold text-2xl">
48-
{{ v.venue.name }}
49-
<span class="text-lg text-gray-600">({% content_block "category:name_"|add:v.venue.category.identifier %})</span>
50-
</h2>
51-
{% if not is_waitinglist %}
52-
<div class="shrink-0 text-gray-600">
53-
{% blocktranslate with teams=v.teams|length capacity=v.venue.capacity %}Teams: {{ teams }} / {{ capacity }}{% endblocktranslate %}
54-
</div>
55-
{% endif %}
56-
</div>
57-
{% for team in v.teams %}
58-
<div class="flex flex-col md:flex-row md:items-center px-4 py-2 {% cycle "bg-gray-50" "" %} rounded-md">
59-
<div class="md:w-1/2 mb-1 md:mb-0">
60-
{% if team.school %}
61-
<div class="text-primary font-bold">
62-
{{ team.school.name }}
63-
{% if team.in_school_symbol %}
64-
<span class="text-white bg-primary rounded px-1.5 py-0.5 text-sm">{{ team.in_school_symbol }}</span>
65-
{% endif %}
66-
</div>
67-
<div class="text-sm text-gray-600">{{ team.school.address }}</div>
68-
{% else %}
69-
<div class="text-primary font-bold">{{ team.name }}</div>
70-
{% endif %}
71-
</div>
72-
<div class="md:w-1/2 text-sm">{{ team.contestants.all|join:", " }}</div>
73-
</div>
74-
{% endfor %}
53+
<div class="mb-8">
54+
<h2 class="font-bold text-2xl" id="{{ v.venue.shortcode }}">
55+
{{ v.venue.name }}
56+
<span class="text-lg text-gray-500">({% content_block "category:name_"|add:v.venue.category.identifier %})</span>
57+
</h2>
58+
59+
{% if not is_waitinglist %}
60+
<div class="shrink-0 text-gray-500">
61+
{% blocktranslate with teams=v.teams|length capacity=v.venue.capacity %}Teams: {{ teams }} / {{ capacity }}{% endblocktranslate %}
62+
</div>
63+
{% endif %}
64+
65+
<div class="space-y-3 mt-4">
66+
{% for team in v.teams %}
67+
<div>
68+
{% inline_team_name team %}
69+
<div class="text-xs mt-0.5 text-gray-500">{{ team.contestants.all|join:", " }}</div>
7570
</div>
71+
{% endfor %}
72+
</div>
73+
</div>
7674
{% endfor %}
7775
</div>
7876
{% endblock content %}

‎bullet/problems/templates/problems/results.html‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
{% extends "web/base.html" %}
22
{% load content_blocks country_url i18n utils %}
33
{% block title %}
4-
{% translate "Results" %}
4+
{% translate "Results" %}
55
{% endblock title %}
66

77
{% block extrahead %}
8-
{{ block.super }}
9-
{% if country %}
10-
<link rel="canonical"
11-
href="{% country_url "archive_results_category" competition_number=competition.number category=category.identifier country=country|lower %}">
12-
{% else %}
13-
<link rel="canonical"
14-
href="{% country_url "archive_results_category" competition_number=competition.number category=category.identifier %}">
15-
{% endif %}
8+
{{ block.super }}
9+
10+
{% if country %}
11+
<link rel="canonical" href="{% country_url "archive_results_category" competition_number=competition.number category=category.identifier country=country|lower %}">
12+
{% else %}
13+
<link rel="canonical" href="{% country_url "archive_results_category" competition_number=competition.number category=category.identifier %}">
14+
{% endif %}
1615
{% endblock extrahead %}
1716

1817
{% block hero %}
19-
{% load_blocks "category" %}
20-
<div class="mt-8 md:mt-24 mb-4 md:mb-16">
21-
<h1 class="text-4xl md:text-6xl font-bold">{% translate "Results" %}</h1>
22-
<h2 class="text-2xl md:text-4xl mt-4 font-bold">
23-
{% content_block "category:name_"|add:category.identifier %}, {{ country_name }}, {{ competition.name }}
24-
</h2>
25-
</div>
18+
{% load_blocks "category" %}
19+
<div class="mt-8 md:mt-24 mb-4 md:mb-16">
20+
<h1 class="text-4xl md:text-6xl font-bold">{% translate "Results" %}</h1>
21+
<h2 class="text-2xl md:text-4xl mt-4 font-semibold">
22+
{% content_block "category:name_"|add:category.identifier %}, {{ country_name }}, {{ competition.name }}
23+
</h2>
24+
</div>
2625
{% endblock hero %}
2726

2827
{% block content %}
29-
<div class="container mx-auto px-2 mt-8">
30-
<div class="flex flex-wrap justify-center gap-1 mb-12">
31-
<a href="{% if competition_number %}{% country_url "archive_results_category" category=category.identifier competition_number=competition_number %}{% else %}{% country_url "results_category" category=category.identifier %}{% endif %}{% query_transform %}"
32-
class="{% if not country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded">
33-
{% translate "International" %}
34-
</a>
35-
{% for c in countries %}
36-
<a href="{% if competition_number %}{% country_url "archive_results_category" category=category.identifier competition_number=competition_number country=c.code|lower %}{% else %}{% country_url "results_category" category=category.identifier country=c.code|lower %}{% endif %}{% query_transform %}"
37-
class="{% if c == country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded flex gap-2 items-center flex-wrap">
38-
<span class="iconify shrink-0 shadow-lg"
39-
data-icon="flag:{{ c.code|lower }}-4x3"></span>
40-
{{ c.name }}
41-
</a>
42-
{% endfor %}
43-
</div>
44-
{% include "problems/results/table.html" %}
28+
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-8">
29+
<div class="flex flex-wrap gap-1 mb-8">
30+
<a href="{% if competition_number %}{% country_url "archive_results_category" category=category.identifier competition_number=competition_number %}{% else %}{% country_url "results_category" category=category.identifier %}{% endif %}{% query_transform %}"
31+
class="{% if not country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded">
32+
{% translate "International" %}
33+
</a>
34+
35+
{% for c in countries %}
36+
<a href="{% if competition_number %}{% country_url "archive_results_category" category=category.identifier competition_number=competition_number country=c.code|lower %}{% else %}{% country_url "results_category" category=category.identifier country=c.code|lower %}{% endif %}{% query_transform %}"
37+
class="{% if c == country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded flex gap-2 items-center flex-wrap">
38+
<iconify-icon icon="flag:{{ c.code|lower }}-4x3" width="none" class="h-4"></iconify-icon>
39+
{{ c.name }}
40+
</a>
41+
{% endfor %}
4542
</div>
43+
{% include "problems/results/table.html" %}
44+
</div>
4645
{% endblock content %}

‎bullet/problems/templates/problems/results/squares.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
<div class="flex flex-wrap gap-0.5">
2-
{% for sq in squares %}
3-
<div title="{{ forloop.counter|add:offset }}"
4-
class="shrink-0 rounded {% if big %} w-8 font-medium h-8 flex justify-center items-center {% else %} w-3 h-3 {% endif %} {% if forloop.counter|divisibleby:5 %} me-1 break-after-auto {% else %} break-after-avoid {% endif %} {% if sq == 2 %} bg-primary {% elif sq == 1 %} bg-white ring-inset ring-2 ring-primary {% else %} bg-gray-200 {% endif %}">
5-
{% if big %}{{ forloop.counter|add:offset }}{% endif %}
6-
</div>
1+
{# django #}
2+
<div class="flex flex-wrap {% if big %}gap-2{% else %}gap-1{% endif %}">
3+
{% for group in squares %}
4+
<div class="break-inside-avoid flex gap-0.5 shrink-0">
5+
{% for sq in group %}
6+
<div title="{{ sq.problem }}"
7+
class="shrink-0
8+
{% if big %}size-8 font-semibold flex justify-center items-center rounded{% else %}size-2 rounded-sm{% endif %}
9+
{% if sq.state == 2 %}bg-primary text-white{% elif sq.state == 1 %}text-primary bg-white ring-inset {% if big %}ring-2{% else %}ring-1{% endif %} ring-primary{% else %}text-gray-600 bg-gray-200{% endif %}">
10+
{% if big %}{{ sq.problem }}{% endif %}
11+
</div>
712
{% endfor %}
13+
</div>
14+
{% endfor %}
815
</div>

0 commit comments

Comments
 (0)