diff options
Diffstat (limited to 'pydis_site/templates/resources/resources.html')
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 123 |
1 files changed, 86 insertions, 37 deletions
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 134c826b..87c28153 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,74 +1,123 @@ {% extends 'base/base.html' %} {% load as_icon %} {% load as_css_class %} +{% load get_category_icon %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> - <script src="{% static "js/resources.js" %}"></script> - <script src="{% static "js/content/page.js" %}"></script> <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> <link rel="stylesheet" href="{% static "css/resources/resources_list.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" %} {% if resources|length > 0 %} <section class="section"> - {# Headline #} - <div class="content"> - <h1 class="resource-title has-text-centered">Resources</h1> - <hr/> - </div> - <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">Filters</p> + <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 == "Complexity" %} + <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"> - <button type="button" class="card-header collapsible"> + <div class="card"> + <button type="button" class="card-header collapsible"> <span class="card-header-title subtitle is-6 my-2 ml-2"> <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>  {{ filter_name }} </span> - <span class="card-header-icon"> + <span class="card-header-icon"> {% if not filter_data.hidden %} <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i> {% else %} <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i> {% endif %} </span> - </button> + </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> + {# 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> |