blob: c7fe2e89f433eaa1cd465c5bd2481089ad0937d7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
{% extends 'base/base.html' %}
{% load as_icon %}
{% load to_kebabcase %}
{% load get_category_icon %}
{% load static %}
{% block title %}Resources{% endblock %}
{% block head %}
{# Inject a JSON object of all valid filter types from the view #}
<script>
const validFilters = {{ valid_filters | safe }}
</script>
<link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
<link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script defer src="{% static "js/resources/resources.js" %}"></script>
<script defer src="{% static "js/collapsibles.js" %}"></script>
<script defer src="{% static "js/fuzzysort/fuzzysort.js" %}"></script>
{% endblock %}
{% block content %}
{% include "base/navbar.html" %}
<input type="hidden" id="resource-type-input" value="{{ resource_type }}">
<section class="section has-text-danger">
<div class="columns is-variable is-6 is-centered">
{# Filtering toolbox #}
<div class="column filtering-column is-one-third">
<div class="content is-justify-content-center">
<nav id="resource-filtering-panel" class="panel is-primary">
<p class="panel-heading has-text-centered" id="filter-panel-header">Filter resources</p>
{# Search bar #}
<p id="resource-search" class="control has-icons-left">
<input class="input" placeholder="Search resources ">
<span class="icon is-small is-left">
<i class="fas fa-magnifying-glass"></i>
</span>
</p>
{# Filter box tags #}
<div class="card filter-tags is-white has-background-white">
<div class="is-flex ml-auto">
<div id="tag-pool">
{# A filter tag for when there are no filters active #}
<span class="tag no-tags-selected is-secondary ml-2 mt-2 has-background-white-ter">
<i class="fas fa-fw fa-ban mr-1"></i>
No filters selected
</span>
{# A filter tag for search queries #}
<span class="tag search-query is-secondary ml-2 mt-2">
<i class="fas fa-fw fa-magnifying-glass mr-1"></i>
<span class="tag inner">Search: ...</span>
</span>
{% for filter_name, filter_data in filters.items %}
{% for filter_item in filter_data.filters %}
{% if filter_name == "Difficulty" %}
<span
class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
data-filter-name="{{ filter_name|to_kebabcase }}"
data-filter-item="{{ filter_item|to_kebabcase }}"
>
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
{{ filter_item|title }}
<button class="delete is-small is-info has-background-info-light"></button>
</span>
{% endif %}
{% if filter_name == "Type" %}
<span
class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
data-filter-name="{{ filter_name|to_kebabcase }}"
data-filter-item="{{ filter_item|to_kebabcase }}"
>
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
{{ filter_item|title }}
<button class="delete is-small is-success has-background-success-light"></button>
</span>
{% endif %}
{% if filter_name == "Payment tiers" %}
<span
class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
data-filter-name="{{ filter_name|to_kebabcase }}"
data-filter-item="{{ filter_item|to_kebabcase }}"
>
<i class="{{ filter_item|title|get_category_icon }} mr-1 is-danger"></i>
{{ filter_item|title }}
<button class="delete is-small is-danger has-background-danger-light"></button>
</span>
{% endif %}
{% if filter_name == "Topics" %}
<span
class="filter-box-tag tag is-primary is-light ml-2 mt-2"
data-filter-name="{{ filter_name|to_kebabcase }}"
data-filter-item="{{ filter_item|to_kebabcase }}"
>
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
{{ filter_item|title }}
<button class="delete is-small is-primary has-background-primary-light"></button>
</span>
{% endif %}
{% endfor %}
{% endfor %}
</div>
<div class="close-filters-button">
{# A little x in the top right, visible only when filters are active, which removes all filters. #}
<a class="icon">
<i class="fas fa-window-close"></i>
</a>
</div>
</div>
</div>
{# Filter checkboxes #}
{% for filter_name, filter_data in filters.items %}
<div class="card filter-category-header has-background-white">
<button type="button" class="card-header collapsible">
<span class="card-header-title subtitle is-6 my-2 ml-2">
<i class="fa-fw {{ filter_data.icon }} is-primary" aria-hidden="true"></i>  {{ filter_name }}
</span>
<span class="card-header-icon">
{% if not filter_data.hidden %}
<i class="far fa-fw fa-window-minimize is-6 title" aria-hidden="true"></i>
{% else %}
<i class="fas fa-fw fa-angle-down is-6 title" aria-hidden="true"></i>
{% endif %}
</span>
</button>
{# Checkboxes #}
{% if filter_data.hidden %}
<div class="collapsible-content collapsed">
{% else %}
<div class="collapsible-content">
{% endif %}
<div class="card-content">
{% for filter_item in filter_data.filters %}
<a class="panel-block filter-panel panel-primary">
<label class="checkbox">
<input
class="filter-checkbox"
type="checkbox"
data-filter-name="{{ filter_name|to_kebabcase }}"
data-filter-item="{{ filter_item|to_kebabcase }}"
>
{{ filter_item }}
</label>
</a>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</nav>
</div>
<div class="content has-text-grey is-hidden-mobile">
<p>Want to suggest more resources? <a href="https://github.com/python-discord/meta/issues/new?assignees=&labels=area%3A+resources&projects=&template=resource-request.yaml">Open an issue on GitHub</a>.</p>
</div>
</div>
<div class="column is-two-thirds">
{# Message to display when there are no hits #}
<div class="no-resources-found">
<h2 class="title is-3 has-text-centered pt-0 pb-6">No matching resources found!</h2>
<img src="{% static "images/resources/duck_pond_404.jpg" %}">
</div>
{# Resource cards #}
<div class="content is-flex is-justify-content-center">
<div class="container is-fullwidth">
{% for resource in resources.values %}
{% include "resources/resource_box.html" %}
{% endfor %}
</div>
</div>
<div class="content has-text-grey is-hidden-tablet">
<p>Want to suggest more resources? <a href="https://github.com/python-discord/meta/issues/new?assignees=&labels=area%3A+resources&projects=&template=resource-request.yaml">Open an issue on GitHub</a>.</p>
</div>
</div>
</div>
</section>
{% endblock %}
|
