diff options
Diffstat (limited to 'pydis_site/templates')
| -rw-r--r-- | pydis_site/templates/base/base.html | 5 | ||||
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 6 | ||||
| -rw-r--r-- | pydis_site/templates/content/base.html | 3 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resource_box.html | 77 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resource_box_header.html | 3 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 240 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resources_list.html | 52 |
7 files changed, 239 insertions, 147 deletions
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index 906fc577..b7322f12 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -24,10 +24,7 @@ <title>Python Discord | {% block title %}Website{% endblock %}</title> {% bulma %} - - {# Font-awesome here is defined explicitly so that we can have Pro #} - <script src="https://kit.fontawesome.com/ae6a3152d8.js"></script> - + {% font_awesome %} <link rel="stylesheet" href="{% static "css/base/base.css" %}"> {% block head %}{% endblock %} diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 4b68dd6c..d7fb4f4c 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -67,9 +67,6 @@ <a class="navbar-item" href="{% url "resources:index" %}"> Resources </a> - <a class="navbar-item" href="{% url "resources:resources" category="tools" %}"> - Tools - </a> <a class="navbar-item" href="{% url "events:index" %}"> Events </a> @@ -79,6 +76,9 @@ <a class="navbar-item" href="{% url "content:page_category" location="frequently-asked-questions" %}"> FAQ </a> + <a class="navbar-item" href="{% url "content:page_category" location="guides" %}"> + Guides + </a> <a class="navbar-item" href="{% url 'home:timeline' %}"> Timeline </a> diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html index 00f4fce4..4a19a275 100644 --- a/pydis_site/templates/content/base.html +++ b/pydis_site/templates/content/base.html @@ -7,7 +7,8 @@ <meta property="og:type" content="website" /> <meta property="og:description" content="{{ page_description }}" /> <link rel="stylesheet" href="{% static "css/content/page.css" %}"> - <script src="{% static "js/content/page.js" %}"></script> + <link rel="stylesheet" href="{% static "css/collapsibles.css" %}"> + <script src="{% static "js/collapsibles.js" %}"></script> {% endblock %} {% block content %} diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index af7c8d65..5ca46296 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -1,6 +1,8 @@ {% load as_icon %} +{% load to_kebabcase %} +{% load get_category_icon %} -<div class="box" style="max-width: 800px;"> +<div class="box resource-box {{ resource.css_classes }}" data-resource-name="{{ resource.name }}"> {% if 'title_url' in resource %} <a href="{{ resource.title_url }}"> {% include "resources/resource_box_header.html" %} @@ -9,14 +11,69 @@ {% include "resources/resource_box_header.html" %} {% endif %} - <p class="is-italic">{{ resource.description|safe }}</p> + <p>{{ resource.description|safe }}</p> - {# Icons #} - {% for icon in resource.urls %} - <span class="icon is-size-4 is-medium" style="margin: 5px;"> - <a href="{{ icon.url }}"> - <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i> - </a> - </span> - {% endfor %} + <div class="is-flex is-align-items-center"> + {# Add primary link #} + {% if "title_url" in resource %} + <span class="icon is-size-4" style="margin: 5px;"> + <a href="{{ resource.title_url }}"> + <i class="fas fa-external-link-alt fa-fw is-size-4 resource-icon is-hoverable is-primary"></i> + </a> + </span> + {% endif %} + + {# Add all additional icon #} + {% for icon in resource.urls %} + <span class="icon is-size-4" style="margin: 5px;"> + <a href="{{ icon.url }}"> + <i class="{{ icon.icon|as_icon }} fa-fw is-size-4 resource-icon is-hoverable is-{{ icon.color }}"></i> + </a> + </span> + {% endfor %} + + {# Tags #} + <div class="resource-tag-container is-flex ml-auto is-flex-wrap-wrap is-justify-content-end"> + {% for tag in resource.tags.topics %} + <span + class="tag resource-tag is-primary is-light ml-2 mt-2" + data-filter-name="topics" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.type %} + <span + class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2" + data-filter-name="type" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.payment_tiers %} + <span + class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2" + data-filter-name="payment-tiers" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.difficulty %} + <span + class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2" + data-filter-name="difficulty" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + </div> + </div> </div> diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html index 84e1a79b..dfbdd92f 100644 --- a/pydis_site/templates/resources/resource_box_header.html +++ b/pydis_site/templates/resources/resource_box_header.html @@ -17,8 +17,7 @@ <span class="is-size-4 has-text-weight-bold"> {% if 'title_image' in resource %} <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}"> - {% endif %} - {% if 'name' in resource %} + {% elif 'name' in resource %} {{ resource.name }} {% endif %} </span> diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index f1f487cf..101f9965 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,90 +1,180 @@ {% extends 'base/base.html' %} +{% load as_icon %} +{% load to_kebabcase %} +{% load get_category_icon %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} - <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> + {# 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" %} + {% include "base/navbar.html" %} + <input type="hidden" id="resource-type-input" value="{{ resource_type }}"> + <section class="section"> + <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"> + <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"> + <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"></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> - <section class="section"> - <div class="container"> - <div class="content"> - <h1>Resources</h1> + </div> + </div> + </div> - <div class="tile is-ancestor"> - <a class="tile is-parent" href="{% url "content:page_category" location="guides" %}"> - <article class="tile is-child box hero is-primary is-bold"> - <p class="title is-size-1"><i class="fad fa-info-circle" aria-hidden="true"></i> Guides</p> - <p class="subtitle is-size-4">Made by us, for you</p> - </article> - </a> + {# 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> - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="reading" %}"> - <article class="tile is-child box hero is-black" id="readingBlock"> - <p class="title is-size-1"><i class="fad fa-book-alt" aria-hidden="true"></i> Read</p> - <p class="subtitle is-size-4">Lovingly curated books to explore</p> - </article> - </a> + {# 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"> + <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> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="videos" %}"> - <article class="tile is-child box hero is-danger is-bold"> - <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p> - <p class="subtitle is-size-4">Visually engaging</p> - </article> - </a> - </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> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="interactive" %}"> - <article class="tile is-child box hero is-black" id="interactiveBlock"> - <p class="title is-size-1"><i class="fad fa-code" aria-hidden="true"></i> Try</p> - <p class="subtitle is-size-4">Interactively discover the possibilities</p> - </article> - </a> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="courses" %}"> - <article class="tile is-child box hero is-success is-bold"> - <p class="title is-size-1"><i class="fad fa-graduation-cap" aria-hidden="true"></i> Learn</p> - <p class="subtitle is-size-4">Structured courses with clear goals</p> - </article> - </a> - </div> - </div> - </div> - <div class="tile is-ancestor"> - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="communities" %}"> - <article class="tile is-child box hero is-black" id="communitiesBlock"> - <p class="title is-size-1"><i class="fad fa-users" aria-hidden="true"></i> Communities</p> - <p class="subtitle is-size-4">Some of our best friends</p> - </article> - </a> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="podcasts" %}"> - <article class="tile is-child box hero is-black" id="podcastsBlock"> - <p class="title is-size-1"><i class="fad fa-podcast" aria-hidden="true"></i> Listen</p> - <p class="subtitle is-size-4">Regular podcasts to follow</p> - </article> - </a> - </div> - </div> - </div> - <a class="tile is-parent" href="{% url "resources:resources" category="tools" %}"> - <article class="tile is-child box hero is-dark"> - <p class="title is-size-1"><i class="fad fa-tools" aria-hidden="true"></i> Tools</p> - <p class="subtitle is-size-4">Things we love to use</p> - </article> - </a> - </div> - </div> - </div> - </section> + {# 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> + </div> + </section> {% endblock %} diff --git a/pydis_site/templates/resources/resources_list.html b/pydis_site/templates/resources/resources_list.html deleted file mode 100644 index e2be3cb7..00000000 --- a/pydis_site/templates/resources/resources_list.html +++ /dev/null @@ -1,52 +0,0 @@ -{% extends "base/base.html" %} -{% load as_icon %} -{% load static %} - -{% block title %}{{ category_info.name }}{% endblock %} -{% block head %} - <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}"> -{% endblock %} - -{% block content %} - {% include "base/navbar.html" %} - - <section class="section breadcrumb-section"> - <div class="container"> - <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs"> - <ul> - <li><a href="{% url "resources:index" %}">Resources</a></li> - <li class="is-active"><a href="#">{{ category_info.name }}</a></li> - </ul> - </nav> - </div> - </section> - - <section class="section"> - <div class="container"> - <div class="content"> - <h1>{{ category_info.name }}</h1> - <p>{{ category_info.description|safe }}</p> - <div> - {% for resource in resources|dictsort:"position" %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories|dictsort:"category_info.position" %} - <h2 id="{{ subcategory.category_info.raw_name }}"> - <a href="{% url "resources:resources" category=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}"> - {{ subcategory.category_info.name }} - </a> - </h2> - <p>{{ subcategory.category_info.description|safe }}</p> - - {% for resource in subcategory.resources|dictsort:"position" %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %} - </div> - </div> - </div> - </section> -{% endblock %} |