blob: 4dd0727048a08b1c14e8748305288b897afffa26 (
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
|
{% extends 'base/base.html' %}
{% load as_icon %}
{% load as_css_class %}
{% load get_category_icon %}
{% load static %}
{% block title %}Resources{% endblock %}
{% block head %}
<link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
<link rel="stylesheet" href="{% static "css/content/page.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script defer src="{% static "js/resources.js" %}"></script>
<script defer src="{% static "js/content/page.js" %}"></script>
{% endblock %}
{% block content %}
{% include "base/navbar.html" %}
<input type="hidden" id="resource-type-input" value="{{ resource_type }}">
<section class="section">
<div class="columns is-centered">
{# Filtering toolbox #}
<div class="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>
{# Filter box tags #}
<div class="card filter-tags">
<div class="is-flex ml-auto is-flex-wrap-wrap">
{% 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|as_css_class }}"
data-filter-item="{{ filter_item|as_css_class }}"
>
<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|as_css_class }}"
data-filter-item="{{ filter_item|as_css_class }}"
>
<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|as_css_class }}"
data-filter-item="{{ filter_item|as_css_class }}"
>
<i class="{{ filter_item|title|get_category_icon }} mr-1"></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|as_css_class }}"
data-filter-item="{{ filter_item|as_css_class }}"
>
<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>
{# Filter checkboxes #}
{% for filter_name, filter_data in filters.items %}
<div class="card filter-category-header">
<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">
{% else %}
<div class="collapsible-content" style="max-height: 480px;">
{% endif %}
<div class="card-content">
{% for filter_item in filter_data.filters %}
<a class="panel-block filter-panel">
<label class="checkbox">
<input
class="filter-checkbox"
type="checkbox"
data-filter-name="{{ filter_name|as_css_class }}"
data-filter-item="{{ filter_item|as_css_class }}"
>
{{ filter_item }}
</label>
</a>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</nav>
</div>
</div>
<div class="column is-two-thirds">
{# Message to display when there are no hits #}
<h2 class="title is-3 has-text-centered pt-0 pb-6 no-resources-found">No matching resources found!</h2>
{# Resource cards #}
<div class="content is-flex is-justify-content-center">
<div>
{% for resource in resources.values %}
{% include "resources/resource_box.html" %}
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
|
