From 8c4aa671f74307289e0805ef3becda239c5db37d Mon Sep 17 00:00:00 2001 From: lemonsaurus Date: Sun, 6 Jun 2021 13:33:56 +0200 Subject: Update templates with new resource urls. --- pydis_site/templates/base/navbar.html | 2 +- pydis_site/templates/resources/resources.html | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 4cc49dc6..9c492f35 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -67,7 +67,7 @@ Resources - + Tools diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index f1f487cf..04744f90 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -24,7 +24,7 @@
- +

Read

Lovingly curated books to explore

@@ -32,7 +32,7 @@
- +

Watch

Visually engaging

@@ -42,13 +42,13 @@
- +

Try

Interactively discover the possibilities

 - +

Learn

Structured courses with clear goals

@@ -61,14 +61,14 @@
- +

Communities

Some of our best friends
- +

Listen

Regular podcasts to follow

@@ -77,7 +77,7 @@
- +

Tools

Things we love to use

-- cgit v1.2.3 From c781ed1f80188ffb274eeada974172f4aa07c0b5 Mon Sep 17 00:00:00 2001 From: fisher60 Date: Fri, 23 Jul 2021 20:20:10 -0500 Subject: change resources to prepare for smart resource search --- pydis_site/apps/resources/urls.py | 2 +- pydis_site/apps/resources/views/__init__.py | 4 +- pydis_site/apps/resources/views/resources.py | 10 +- pydis_site/static/css/resources/resources.css | 51 +++++----- pydis_site/templates/resources/resources.html | 131 ++++++++++++++------------ 5 files changed, 105 insertions(+), 93 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py index cd4f53e7..c8d441df 100644 --- a/pydis_site/apps/resources/urls.py +++ b/pydis_site/apps/resources/urls.py @@ -4,6 +4,6 @@ from pydis_site.apps.resources import views app_name = "resources" urlpatterns = [ - path("", views.ResourcesView.as_view(), name="index"), + path("", views.resources.resource_view, name="index"), path("list/", views.ResourcesListView.as_view(), name="resources") ] diff --git a/pydis_site/apps/resources/views/__init__.py b/pydis_site/apps/resources/views/__init__.py index 8eb383b5..c89071c5 100644 --- a/pydis_site/apps/resources/views/__init__.py +++ b/pydis_site/apps/resources/views/__init__.py @@ -1,4 +1,4 @@ -from .resources import ResourcesView +from .resources import resource_view from .resources_list import ResourcesListView -__all__ = ["ResourcesView", "ResourcesListView"] +__all__ = ["resource_view", "ResourcesListView"] diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index 25ce3e50..dfd21682 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -1,7 +1,11 @@ from django.views.generic import TemplateView +from django.shortcuts import render +# class ResourcesView(TemplateView): +# """View for resources index page.""" +# +# template_name = "resources/resources.html" -class ResourcesView(TemplateView): - """View for resources index page.""" - template_name = "resources/resources.html" +def resource_view(request): + return render(request, template_name="resources/resources.html") diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index cf4cb472..a9226647 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -1,29 +1,30 @@ -.box, .tile.is-parent { - transition: 0.1s ease-out; -} -.box { - min-height: 15vh; -} -.tile.is-parent:hover .box { - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); -} -.tile.is-parent:hover { - padding: 0.65rem 0.85rem 0.85rem 0.65rem; - filter: saturate(1.1) brightness(1.1); -} +/*.box, .tile.is-parent {*/ +/* transition: 0.1s ease-out;*/ +/*}*/ +/*.box {*/ +/* min-height: 15vh;*/ +/*}*/ +/*.tile.is-parent:hover .box {*/ +/* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/ +/*}*/ +/*.tile.is-parent:hover {*/ +/* padding: 0.65rem 0.85rem 0.85rem 0.65rem;*/ +/* filter: saturate(1.1) brightness(1.1);*/ +/*}*/ -#readingBlock { - background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%); -} +/*#readingBlock {*/ +/* background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/ +/*}*/ -#interactiveBlock { - background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%); -} +/*#interactiveBlock {*/ +/* background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/ +/*}*/ -#communitiesBlock { - background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%); -} +/*#communitiesBlock {*/ +/* background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/ +/*}*/ + +/*#podcastsBlock {*/ +/* background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/ +/*}*/ -#podcastsBlock { - background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%); -} diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 04744f90..7eb21432 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -12,79 +12,86 @@
-

Resources

+

Resources

+
+
+
+

Search Options

-
- -
-

Guides

-

Made by us, for you

-
- +
+
+
+ Topic -
-
- -
-

Read

-

Lovingly curated books to explore

-
- +
+ +
-
- -
-

Watch

-

Visually engaging

-
- +
+
-
-
- -
-

Try

-

Interactively discover the possibilities

-
- - -
-

Learn

-

Structured courses with clear goals

-
-
-
-
-
-
-
- -
-

Communities

-

Some of our best friends

-
- -
- -
-

Listen

-

Regular podcasts to follow

-
- +
+ Type +
+
-
+
+ +
+ Payment +
+ +
+
+ +
+ Level +
+ +
+
- -
-

Tools

-

Things we love to use

-
- + +
+ +
+
+ {% endblock %} -- cgit v1.2.3 From 156951f12c05146650a84d4ac9d45e7a8a085023 Mon Sep 17 00:00:00 2001 From: fisher60 Date: Sat, 24 Jul 2021 18:22:59 -0500 Subject: add constant for resource tags. Add Functional front end This change adds a fully functional front end menu for testing. This is a very rough outline and will need a bit of UI and UX love to get working fully. Should act as an example of functionality --- pydis_site/apps/resources/views/resources.py | 25 +++++++-- pydis_site/templates/resources/resources.html | 81 +++++++++++++++++---------- 2 files changed, 71 insertions(+), 35 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index dfd21682..f88a23fb 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -1,11 +1,24 @@ -from django.views.generic import TemplateView from django.shortcuts import render -# class ResourcesView(TemplateView): -# """View for resources index page.""" -# -# template_name = "resources/resources.html" +from pydis_site.apps.resources.utils import get_resources_meta + +RESOURCE_META_TAGS = get_resources_meta() + + +def format_checkbox_options(options: str) -> list: + """Split up the comma separated parameters into a list.""" + if options: + return options.split(",")[:-1] + return list() def resource_view(request): - return render(request, template_name="resources/resources.html") + """View for resources index page.""" + context = { + "checkboxOptions": format_checkbox_options(request.GET.get("checkboxOptions")), + "topics": RESOURCE_META_TAGS.get("topics"), + "tag_types": RESOURCE_META_TAGS.get("type"), + "payment_tiers": RESOURCE_META_TAGS.get("payment_tiers"), + "complexities": RESOURCE_META_TAGS.get("complexity") + } + return render(request, template_name="resources/resources.html", context=context) diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 7eb21432..fca3d0da 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -23,55 +23,66 @@
Topic -
- -
- -
-
+ {% endfor %}
Type + + {% for tag_type in tag_types %}
-
+
+ {% endfor %}
Payment + + {% for payment_tier in payment_tiers %}
-
+
+ {% endfor %}
Level + + {% for complexity in complexities %}
-
+
+ {% endfor %}
-
- +
+ + + + + + + + +
@@ -79,9 +90,18 @@ {% endblock %} -- cgit v1.2.3 From 95e7b11df812e09baffe9ef16807e7d02a5e6f1d Mon Sep 17 00:00:00 2001 From: fisher60 Date: Sun, 25 Jul 2021 19:49:01 -0500 Subject: working demo of smart resources search I have incorporated a search that allows users to check boxes to filter resources. This is a working version, but the algo for searching likely needs to be modified. The frontend also needs some style updates. All necessary functionality should be present now though. --- pydis_site/apps/resources/utils.py | 25 ++++++++++++-- pydis_site/apps/resources/views/resources.py | 10 +++--- pydis_site/apps/resources/views/resources_list.py | 4 +-- pydis_site/templates/resources/resources.html | 41 +++++++++++++++++++++-- 4 files changed, 69 insertions(+), 11 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/utils.py b/pydis_site/apps/resources/utils.py index bb812ec0..7f238431 100644 --- a/pydis_site/apps/resources/utils.py +++ b/pydis_site/apps/resources/utils.py @@ -15,7 +15,28 @@ default_categories = [ ] -def get_resources() -> list[dict[str, t.Union[list[str], str]]]: +def yaml_file_matches_search(yaml_data: dict[str, t.Union[list[str], str]], search_terms: list[str]) -> bool: + match_count = 0 + search_len = len(search_terms) + for search in search_terms: + for _, values in yaml_data["tags"].items(): + if search.lower() in values: + match_count += 1 + if match_count >= search_len: + return True + return False + + +def get_resources_from_search(search_categories: list[str]) -> list[dict[str, t.Union[list[str], str]]]: + out = [] + for item in RESOURCES_PATH.rglob("*.yaml"): + this_dict = yaml.safe_load(item.read_text()) + if yaml_file_matches_search(this_dict, search_categories): + out.append(this_dict) + return out + + +def get_all_resources() -> list[dict[str, t.Union[list[str], str]]]: """Loads resource YAMLs from provided path.""" return [yaml.safe_load(item.read_text()) for item in RESOURCES_PATH.rglob("*.yaml")] @@ -24,7 +45,7 @@ def get_resources_meta() -> dict[str, list[str]]: """Combines the tags from each resource into one dictionary of unique tags.""" resource_meta_tags = {x: set() for x in default_categories} - for resource in get_resources(): + for resource in get_all_resources(): for tag_key, tag_values in resource.get("tags").items(): for tag_item in tag_values: resource_meta_tags[tag_key].add(tag_item.title().replace('And', 'and', -1)) diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index 2414e48b..ffb4f4a8 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -1,26 +1,28 @@ from django.http import HttpRequest, HttpResponse from django.shortcuts import render -from pydis_site.apps.resources.utils import get_resources_meta +from pydis_site.apps.resources.utils import get_all_resources, get_resources_from_search, get_resources_meta RESOURCE_META_TAGS = get_resources_meta() def format_checkbox_options(options: str) -> list[str]: - """Split up the comma separated parameters into a list.""" + """Split up the comma separated query parameters for checkbox options into a list.""" return options.split(",")[:-1] if options else [] def resource_view(request: HttpRequest) -> HttpResponse: """View for resources index page.""" + checkbox_options = format_checkbox_options(request.GET.get("checkboxOptions")) return render( request, template_name="resources/resources.html", context={ - "checkboxOptions": format_checkbox_options(request.GET.get("checkboxOptions")), + "checkboxOptions": checkbox_options, "topics": RESOURCE_META_TAGS.get("topics"), "tag_types": RESOURCE_META_TAGS.get("type"), "payment_tiers": RESOURCE_META_TAGS.get("payment_tiers"), - "complexities": RESOURCE_META_TAGS.get("complexity") + "complexities": RESOURCE_META_TAGS.get("complexity"), + "resources": get_resources_from_search(checkbox_options) } ) diff --git a/pydis_site/apps/resources/views/resources_list.py b/pydis_site/apps/resources/views/resources_list.py index 0ec74d78..bd43be33 100644 --- a/pydis_site/apps/resources/views/resources_list.py +++ b/pydis_site/apps/resources/views/resources_list.py @@ -2,7 +2,7 @@ from typing import Any, Dict from django.views.generic import TemplateView -from pydis_site.apps.resources.utils import get_resources +from pydis_site.apps.resources.utils import get_all_resources class ResourcesListView(TemplateView): @@ -13,6 +13,6 @@ class ResourcesListView(TemplateView): def get_context_data(self, **kwargs) -> Dict[str, Any]: """Add resources and subcategories data into context.""" context = super().get_context_data(**kwargs) - context["resources"] = get_resources() + context["resources"] = get_all_resources() return context diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index fca3d0da..e2275e89 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,9 +1,11 @@ {% extends 'base/base.html' %} +{% load as_icon %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} - + + {% endblock %} {% block content %} @@ -89,16 +91,49 @@ + + {% if resources|length > 0 %} +
+
+
+
+ {% for resource in resources %} + {% include "resources/resource_box.html" %} + {% endfor %} + + {% for subcategory in subcategories %} +

+ + {{ subcategory.category_info.name }} + +

+

{{ subcategory.category_info.description|safe }}

+ + {% for resource in subcategory.resources %} + {% with category_info=subcategory.category_info %} + {% include "resources/resource_box.html" %} + {% endwith %} + {% endfor %} + {% endfor %} +
+
+
+
+ {% else %} +

No resources matching search.

+ {% endif %} + {% endblock %} -- cgit v1.2.3 From 1dbe8046c38d43bc87fe6a78b1bfc61a3599de01 Mon Sep 17 00:00:00 2001 From: dawnofmidnight Date: Tue, 3 Aug 2021 14:53:17 -0400 Subject: styles: filtering resources page --- pydis_site/apps/resources/utils.py | 2 +- pydis_site/static/css/resources/resources_list.css | 9 ++++++ pydis_site/templates/resources/resources.html | 34 ++++++++++------------ 3 files changed, 25 insertions(+), 20 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/utils.py b/pydis_site/apps/resources/utils.py index 623dd7b6..bc444df4 100644 --- a/pydis_site/apps/resources/utils.py +++ b/pydis_site/apps/resources/utils.py @@ -21,7 +21,7 @@ RESOURCES: dict[str, Resource] = {path.stem: yaml.safe_load(path.read_text()) fo RESOURCE_TABLE = {category: defaultdict(set) for category in ( "topics", - "payment_tiers", + "payment_tiers", "complexity", "type" )} diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css index e6808a99..283a506b 100644 --- a/pydis_site/static/css/resources/resources_list.css +++ b/pydis_site/static/css/resources/resources_list.css @@ -53,3 +53,12 @@ i.resource-icon.is-black { i.has-icon-padding { padding: 0 10px 25px 0; } + +#tab-content p { + display: none; +} + +#tab-content p.is-active { +display: block; +} + \ No newline at end of file diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index f2d5a976..8105a557 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -17,58 +17,58 @@

Resources

-
+

Search Options

-
- Topic +
+
Topic
{% for topic in topics %}
-
{% endfor %}
-
- Type +
+
Type
{% for tag_type in tag_types %}
{% endfor %}
-
- Payment +
+
Payment
{% for payment_tier in payment_tiers %}
{% endfor %}
-
- Level +
+
Level
{% for complexity in complexities %}
{% endfor %} @@ -76,7 +76,6 @@
- @@ -84,12 +83,9 @@ -
-
-
{% if resources|length > 0 %} @@ -120,7 +116,7 @@
{% else %} -

No resources matching search.

+

No resources matching search.

{% endif %} {% endblock %} -- cgit v1.2.3 From 4adf44bb7aa524f06b81f18218376799f3a75319 Mon Sep 17 00:00:00 2001 From: Vivaan Verma Date: Mon, 16 Aug 2021 22:25:48 +0100 Subject: fix: Make select all buttons for each individual column --- pydis_site/templates/resources/resources.html | 42 +++++++++++++++++---------- 1 file changed, 26 insertions(+), 16 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 11f7ceab..0e4302c6 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -22,14 +22,14 @@
-
+
Topic
{% for topic in topics_1 %}
@@ -39,52 +39,64 @@ {% for topic in topics_2 %}
{% endfor %}
+ + +
-
+
Type
{% for tag_type in tag_types %}
{% endfor %} + + +
-
+
Payment
{% for payment_tier in payment_tiers %}
{% endfor %} + + +
-
+
Level
{% for complexity in complexities %}
{% endfor %} + + +
@@ -93,13 +105,9 @@ - + - - - -
@@ -178,10 +186,12 @@ }); } - function selectAllQueryParams(){ + function selectAllQueryParams(column){ checkboxOptions.forEach((option) => { document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { - checkbox.checked = true; + if (checkbox.className == column) { + checkbox.checked = true; + } }); }); } -- cgit v1.2.3 From a09b0b10fac6d84166779e72f4ed5fc4fcfcf0fb Mon Sep 17 00:00:00 2001 From: Vivaan Verma Date: Tue, 17 Aug 2021 10:23:58 +0100 Subject: Align select all buttons to center of column --- pydis_site/templates/resources/resources.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 0e4302c6..2ae28725 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -46,7 +46,7 @@ {% endfor %}
- +

@@ -62,7 +62,7 @@
{% endfor %} - +
@@ -78,7 +78,7 @@
{% endfor %} - + @@ -94,7 +94,7 @@ {% endfor %} - + -- cgit v1.2.3 From 990eebae44ba6f9328d8c15d02319f8c2a07f850 Mon Sep 17 00:00:00 2001 From: swfarnsworth Date: Sat, 4 Sep 2021 17:31:05 -0400 Subject: Drop -Option from {topic,type,etc}Option. Having -Option in the names was making the URL especially verbose. --- pydis_site/apps/resources/views/resources.py | 8 ++++---- pydis_site/templates/resources/resources.html | 13 ++++++------- 2 files changed, 10 insertions(+), 11 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index a7c631dc..60ec6d8f 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -16,10 +16,10 @@ def resource_view(request: HttpRequest) -> HttpResponse: checkbox_options = { a: set(format_checkbox_options(request.GET.get(b))) for a, b in ( - ('topics', 'topicOption'), - ('type', 'typeOption'), - ('payment_tiers', 'paymentOption'), - ('complexity', 'complexityOption'), + ('topics', 'topic'), + ('type', 'type'), + ('payment_tiers', 'payment'), + ('complexity', 'complexity'), ) } diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 2ae28725..e9695fff 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -29,7 +29,7 @@ {% for topic in topics_1 %}
@@ -39,7 +39,7 @@ {% for topic in topics_2 %}
@@ -57,7 +57,7 @@ {% for tag_type in tag_types %}
@@ -73,7 +73,7 @@ {% for payment_tier in payment_tiers %}
@@ -89,7 +89,7 @@ {% for complexity in complexities %}
@@ -147,8 +147,7 @@ {% endblock %} -- cgit v1.2.3 From 4ee8d527a2cf0ac7e4fd977ffd29e560b3cd48cb Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Thu, 27 Jan 2022 10:16:52 +0100 Subject: Greatly simplify the backend. Here we're getting rid of all filtering and search functionality on the backend. We'll be handling this on the client-side from now on. --- pydis_site/apps/resources/resource_search.py | 59 ---------------------- pydis_site/apps/resources/tests/test_views.py | 13 ----- pydis_site/apps/resources/urls.py | 3 +- pydis_site/apps/resources/views/__init__.py | 5 +- pydis_site/apps/resources/views/resources_list.py | 18 ------- pydis_site/templates/resources/resources_list.html | 52 ------------------- 6 files changed, 3 insertions(+), 147 deletions(-) delete mode 100644 pydis_site/apps/resources/resource_search.py delete mode 100644 pydis_site/apps/resources/views/resources_list.py delete mode 100644 pydis_site/templates/resources/resources_list.html (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/resource_search.py b/pydis_site/apps/resources/resource_search.py deleted file mode 100644 index 1e23089b..00000000 --- a/pydis_site/apps/resources/resource_search.py +++ /dev/null @@ -1,59 +0,0 @@ -import typing as t -from collections import defaultdict -from functools import reduce -from operator import and_, or_ -from pathlib import Path -from types import MappingProxyType - -import yaml -from django.conf import settings - - -def _transform_name(resource_name: str) -> str: - return resource_name.title().replace('And', 'and', -1) - - -Resource = dict[str, t.Union[str, list[dict[str, str]], dict[str, list[str]]]] - -RESOURCES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "resources", "resources") - -RESOURCES: MappingProxyType[str, Resource] = MappingProxyType({ - path.stem: yaml.safe_load(path.read_text()) - for path in RESOURCES_PATH.rglob("*.yaml") -}) - -_resource_table = {category: defaultdict(set) for category in ( - "topics", - "payment_tiers", - "complexity", - "type" -)} - -for name, resource in RESOURCES.items(): - for category, tags in resource['tags'].items(): - for tag in tags: - _resource_table[category][_transform_name(tag)].add(name) - -# Freeze the resources table -RESOURCE_TABLE = MappingProxyType({ - category: MappingProxyType(d) - for category, d in _resource_table.items() -}) - -ALL_RESOURCE_NAMES = frozenset(RESOURCES.keys()) - - -def get_resources_from_search(search_categories: dict[str, set[str]]) -> list[Resource]: - """Returns a list of all resources that match the given search terms.""" - resource_names_that_match = reduce( - and_, - ( - reduce( - or_, - (RESOURCE_TABLE[category][label] for label in labels), - set() - ) or ALL_RESOURCE_NAMES - for category, labels in search_categories.items() - ) - ) - return [RESOURCES[name_] for name_ in resource_names_that_match] diff --git a/pydis_site/apps/resources/tests/test_views.py b/pydis_site/apps/resources/tests/test_views.py index 2e9efc1d..f96a04b0 100644 --- a/pydis_site/apps/resources/tests/test_views.py +++ b/pydis_site/apps/resources/tests/test_views.py @@ -16,16 +16,3 @@ class TestResourcesView(TestCase): url = reverse("resources:index") response = self.client.get(url) self.assertEqual(response.status_code, 200) - - -class TestResourcesListView(TestCase): - def test_valid_resource_list_200(self): - """Check does site return code 200 when visiting valid resource list.""" - url = reverse("resources:resources") - response = self.client.get(url) - self.assertEqual(response.status_code, 200) - - @patch("pydis_site.apps.resources.resource_search.RESOURCES_PATH", TESTING_RESOURCES_PATH) - def test_filter_resource_list(self): - """TODO: Check that we can correctly filter resources with GET parameters.""" - pass diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py index c8d441df..3db26417 100644 --- a/pydis_site/apps/resources/urls.py +++ b/pydis_site/apps/resources/urls.py @@ -4,6 +4,5 @@ from pydis_site.apps.resources import views app_name = "resources" urlpatterns = [ - path("", views.resources.resource_view, name="index"), - path("list/", views.ResourcesListView.as_view(), name="resources") + path("", views.resources.ResourceView.as_view(), name="index"), ] diff --git a/pydis_site/apps/resources/views/__init__.py b/pydis_site/apps/resources/views/__init__.py index c89071c5..986f3e10 100644 --- a/pydis_site/apps/resources/views/__init__.py +++ b/pydis_site/apps/resources/views/__init__.py @@ -1,4 +1,3 @@ -from .resources import resource_view -from .resources_list import ResourcesListView +from .resources import ResourceView -__all__ = ["resource_view", "ResourcesListView"] +__all__ = ["ResourceView"] diff --git a/pydis_site/apps/resources/views/resources_list.py b/pydis_site/apps/resources/views/resources_list.py deleted file mode 100644 index 30498c8f..00000000 --- a/pydis_site/apps/resources/views/resources_list.py +++ /dev/null @@ -1,18 +0,0 @@ -from typing import Any, Dict - -from django.views.generic import TemplateView - -from pydis_site.apps.resources.resource_search import RESOURCES - - -class ResourcesListView(TemplateView): - """Shows specific resources list.""" - - template_name = "resources/resources_list.html" - - def get_context_data(self, **kwargs) -> Dict[str, Any]: - """Add resources and subcategories data into context.""" - context = super().get_context_data(**kwargs) - context["resources"] = RESOURCES - - return context 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 %} - -{% endblock %} - -{% block content %} - {% include "base/navbar.html" %} - -
-
- -
-
- -
-
-
-

{{ category_info.name }}

-

{{ category_info.description|safe }}

-
- {% for resource in resources|dictsort:"position" %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories|dictsort:"category_info.position" %} -

- - {{ subcategory.category_info.name }} - -

-

{{ subcategory.category_info.description|safe }}

- - {% for resource in subcategory.resources|dictsort:"position" %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %} -
-
-
-
-{% endblock %} -- cgit v1.2.3 From 008d6934d2ee5dfc5e2aabae8b39c92364634d5e Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Thu, 27 Jan 2022 10:17:32 +0100 Subject: Add a template tag for css-classifying things. --- pydis_site/apps/resources/templatetags/as_css_class.py | 18 ++++++++++++++++++ pydis_site/templates/resources/resource_box.html | 7 ++++--- 2 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 pydis_site/apps/resources/templatetags/as_css_class.py (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/templatetags/as_css_class.py b/pydis_site/apps/resources/templatetags/as_css_class.py new file mode 100644 index 00000000..8b628dc9 --- /dev/null +++ b/pydis_site/apps/resources/templatetags/as_css_class.py @@ -0,0 +1,18 @@ +from django import template + +register = template.Library() + + +@register.filter +def as_css_class(class_name: str) -> str: + """ + Convert any string to a css-class name. + + For example, convert + "Favorite FROOT_is_LEMON" to + "favorite-froot-is-lemon" + """ + class_name = class_name.lower() + class_name = class_name.replace(" ", "-") + class_name = class_name.replace("_", "-") + return class_name diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 7de9ca18..09256751 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -1,7 +1,7 @@ {% load as_icon %} {% load get_category_icon %} -
+
{% if 'title_url' in resource %} {% include "resources/resource_box_header.html" %} @@ -13,7 +13,7 @@

{{ resource.description|safe }}

- {# Add primary link #} + {# Add primary link #} {% if 'title_url' in resource %} @@ -21,7 +21,8 @@ {% endif %} - {# Add all additional icon #} + + {#Add all additional icon #} {% for icon in resource.urls %} -- cgit v1.2.3 From 231ed09ec52ca9c05bc5697310f49824f05ff63e Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Thu, 27 Jan 2022 10:21:38 +0100 Subject: Add a FontAwesome token that we actually control. Previously we were using some sort of borrowed token, but it seems to not be working anymore for local sessions, so let's just get rid of it. --- pydis_site/settings.py | 2 +- pydis_site/templates/base/base.html | 5 +---- pydis_site/templates/base/navbar.html | 3 --- 3 files changed, 2 insertions(+), 8 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 5a8e9be7..3b146f2c 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -271,8 +271,8 @@ BULMA_SETTINGS = { "extensions": [ "bulma-dropdown", "bulma-navbar-burger", - "bulma-modal", ], + "fontawesome_token": "ff22cb6f41", } # Information about site repository 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 @@ Python Discord | {% block title %}Website{% endblock %} {% bulma %} - - {# Font-awesome here is defined explicitly so that we can have Pro #} - - + {% font_awesome %} {% block head %}{% endblock %} diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 18ff7efa..48ade189 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -67,9 +67,6 @@ Resources - - Tools - Events -- cgit v1.2.3 From 5f214647521a93fa6cb54fcac7d4e1ae66fb7cec Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Thu, 27 Jan 2022 10:23:11 +0100 Subject: Resource filtering on the client, pt 1. Here's the initial version of this system. We've got filtering, but only by clicking checkboxes. The overall look and style are pretty close to where we want them, but it's missing tons of polish to be complete. The following commits will contain that polish. --- pydis_site/apps/resources/views/resources.py | 125 ++++++++++++----- pydis_site/static/css/resources/resources.css | 48 +++---- pydis_site/static/js/resources.js | 178 +++++++++++++++++++----- pydis_site/templates/resources/resources.html | 192 ++++++++++---------------- 4 files changed, 336 insertions(+), 207 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index de6b2dac..57cb4f71 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -1,40 +1,103 @@ +from pathlib import Path + +import yaml +from django.core.handlers.wsgi import WSGIRequest from django.http import HttpRequest, HttpResponse from django.shortcuts import render +from django.views import View -from pydis_site.apps.resources.resource_search import RESOURCE_TABLE, get_resources_from_search +from pydis_site import settings -RESOURCE_META_TAGS = {k: set(v) for k, v in RESOURCE_TABLE.items()} +RESOURCES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "resources", "resources") -def _parse_checkbox_options(options: str) -> set[str]: - """Split up the comma separated query parameters for checkbox options into a list.""" - return set(options.split(",")[:-1]) +class ResourceView(View): + """Our curated list of good learning resources.""" + def __init__(self, *args, **kwargs): + """Set up all the resources.""" + super().__init__(*args, **kwargs) -def resource_view(request: HttpRequest) -> HttpResponse: - """View for resources index page.""" - checkbox_options = { - option: _parse_checkbox_options(request.GET.get(url_param, "")) - for option, url_param in ( - ('topics', 'topic'), - ('type', 'type'), - ('payment_tiers', 'payment'), - ('complexity', 'complexity'), - ) - } - - topics = sorted(RESOURCE_META_TAGS.get("topics")) - - return render( - request, - template_name="resources/resources.html", - context={ - "checkboxOptions": checkbox_options, - "topics_1": topics[:len(topics) // 2], - "topics_2": topics[len(topics) // 2:], - "tag_types": sorted(RESOURCE_META_TAGS.get("type")), - "payment_tiers": sorted(RESOURCE_META_TAGS.get("payment_tiers")), - "complexities": sorted(RESOURCE_META_TAGS.get("complexity")), - "resources": get_resources_from_search(checkbox_options) + # Load the resources from the yaml files in /resources/ + self.resources = { + path.stem: yaml.safe_load(path.read_text()) + for path in RESOURCES_PATH.rglob("*.yaml") + } + + # Parse out all current tags + resource_tags = { + "topics": set(), + "payment_tiers": set(), + "complexity": set(), + "type": set(), } - ) + for resource_name, resource in self.resources.items(): + css_classes = [] + for tag_type in resource_tags.keys(): + # Store the tags into `resource_tags` + tags = resource.get("tags", {}).get(tag_type, []) + for tag in tags: + tag = tag.title() + tag = tag.replace("And", "and") + resource_tags[tag_type].add(tag) + + # Make a CSS class friendly representation too, while we're already iterating. + for tag in tags: + css_tag = f"{tag_type}-{tag}" + css_tag = css_tag.replace("_", "-") + css_tag = css_tag.replace(" ", "-") + css_classes.append(css_tag) + + # Now add the css classes back to the resource, so we can use them in the template. + self.resources[resource_name]["css_classes"] = " ".join(css_classes) + + # Set up all the filter checkbox metadata + self.filters = { + "Complexity": { + "filters": sorted(resource_tags.get("complexity")), + "icon": "fas fa-brain", + "hidden": False, + }, + "Type": { + "filters": sorted(resource_tags.get("type")), + "icon": "fas fa-photo-video", + "hidden": False, + }, + "Payment tiers": { + "filters": sorted(resource_tags.get("payment_tiers")), + "icon": "fas fa-dollar-sign", + "hidden": True, + }, + "Topics": { + "filters": sorted(resource_tags.get("topics")), + "icon": "fas fa-lightbulb", + "hidden": True, + } + } + + @staticmethod + def _get_filter_options(request: WSGIRequest) -> dict[str, set]: + """Get the requested filter options out of the request object.""" + return { + option: set(request.GET.get(url_param, "").split(",")[:-1]) + for option, url_param in ( + ('topics', 'topics'), + ('type', 'type'), + ('payment_tiers', 'payment'), + ('complexity', 'complexity'), + ) + } + + def get(self, request: WSGIRequest) -> HttpResponse: + """List out all the resources, and any filtering options from the URL.""" + filter_options = self._get_filter_options(request) + + return render( + request, + template_name="resources/resources.html", + context={ + "resources": self.resources, + "filters": self.filters, + "filter_options": filter_options, + } + ) diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 488effc3..f70cbd64 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -1,29 +1,27 @@ -/*.box, .tile.is-parent {*/ -/* transition: 0.1s ease-out;*/ -/*}*/ -/*.box {*/ -/* min-height: 15vh;*/ -/*}*/ -/*.tile.is-parent:hover .box {*/ -/* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/ -/*}*/ -/*.tile.is-parent:hover {*/ -/* padding: 0.65rem 0.85rem 0.85rem 0.65rem;*/ -/* filter: saturate(1.1) brightness(1.1);*/ -/*}*/ +/* Disable highlighting for all text in the filters. */ +.filter-checkbox, +.filter-panel label, +.card-header span { + user-select: none +} -/*#readingBlock {*/ -/* background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/ -/*}*/ +/* Remove pointless margin in panel header */ +#filter-panel-header { + margin-bottom: 0; +} -/*#interactiveBlock {*/ -/* background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/ -/*}*/ +/* Full width filter cards */ +#resource-filtering-panel .card .collapsible-content .card-content { + padding:0 +} -/*#communitiesBlock {*/ -/* background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/ -/*}*/ +/* Disable clicking on the checkbox itself. */ +/* Instead, we want to let the anchor tag handle clicks. */ +.filter-checkbox { + pointer-events: none; +} -/*#podcastsBlock {*/ -/* background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/ -/*}*/ +/* Blurple category icons */ +i.is-primary { + color: #7289da; +} diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index 5c353f97..dee59e52 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -1,48 +1,156 @@ "use strict"; -const initialParams = new URLSearchParams(window.location.search); -const checkboxOptions = ['topic', 'type', 'payment', 'complexity']; -const createQuerySelect = (opt) => { - return "input[name=" + opt + "]" -} +// Filters that are currently selected +var activeFilters = { + topics: [], + type: [], + "payment-tiers": [], + complexity: [] +}; -checkboxOptions.forEach((option) => { - document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { - if (initialParams.get(option).includes(checkbox.value)) { - checkbox.checked = true - } - }); -}); +/* Update the resources to match 'active_filters' */ +function update() { + let resources = $('.resource-box'); -function buildQueryParams() { - let params = new URLSearchParams(window.location.search); - checkboxOptions.forEach((option) => { - let tempOut = "" - document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { - if (checkbox.checked) { - tempOut += checkbox.value + ","; + // If there's nothing in the filters, show everything and return. + if ( + activeFilters.topics.length === 0 && + activeFilters.type.length === 0 && + activeFilters["payment-tiers"].length === 0 && + activeFilters.complexity.length === 0 + ) { + resources.show(); + return; + } + + // Otherwise, hide everything and then filter the resources to decide what to show. + resources.hide(); + resources.filter(function() { + let validation = { + topics: false, + type: false, + 'payment-tiers': false, + complexity: false + }; + let resourceBox = $(this); + + // Validate the filters + $.each(activeFilters, function(filterType, activeFilters) { + // If the filter list is empty, this passes validation. + if (activeFilters.length === 0) { + validation[filterType] = true; + return; } + + // Otherwise, we need to check if one of the classes exist. + $.each(activeFilters, function(index, filter) { + if (resourceBox.hasClass(filter)) { + validation[filterType] = true; + } + }); }); - params.set(option, tempOut); - }); - window.location.search = params; + // If validation passes, show the resource. + if (Object.values(validation).every(Boolean)) { + return true; + } else { + return false; + } + }).show(); } -function clearQueryParams() { - checkboxOptions.forEach((option) => { - document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { - checkbox.checked = false; - }); +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", function () { + + // If you collapse or uncollapse a filter group, swap the icon. + $('button.collapsible').click(function() { + let icon = $(this).find(".card-header-icon i"); + + if ($(icon).hasClass("fa-window-minimize")) { + $(icon).removeClass(["far", "fa-window-minimize"]); + $(icon).addClass(["fas", "fa-angle-down"]); + } else { + $(icon).removeClass(["fas", "fa-angle-down"]); + $(icon).addClass(["far", "fa-window-minimize"]); + } + }); + + // Update the filters on page load to reflect URL parameters. + + // If you click on the div surrounding the filter checkbox, it clicks the checkbox. + $('.filter-panel').click(function() { + let checkbox = $(this).find(".filter-checkbox"); + checkbox.prop("checked", !checkbox.prop("checked")); + checkbox.change(); }); -} -function selectAllQueryParams(column) { - checkboxOptions.forEach((option) => { - document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { - if (checkbox.className == column) { - checkbox.checked = true; + // When checkboxes are toggled, trigger a filter update. + $('.filter-checkbox').change(function () { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + let cssClass = filterName + "-" + filterItem; + var filterIndex = activeFilters[filterName].indexOf(cssClass); + + if (this.checked) { + if (filterIndex === -1) { + activeFilters[filterName].push(cssClass); } - }); + update(); + } else { + if (filterIndex !== -1) { + activeFilters[filterName].splice(filterIndex, 1); + } + update(); + } }); -} +}); + + + +// const initialParams = new URLSearchParams(window.location.search); +// const checkboxOptions = ['topic', 'type', 'payment', 'complexity']; +// +// const createQuerySelect = (opt) => { +// return "input[name=" + opt + "]" +// } +// +// checkboxOptions.forEach((option) => { +// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { +// if (initialParams.get(option).includes(checkbox.value)) { +// checkbox.checked = true +// } +// }); +// }); +// +// function buildQueryParams() { +// let params = new URLSearchParams(window.location.search); +// checkboxOptions.forEach((option) => { +// let tempOut = "" +// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { +// if (checkbox.checked) { +// tempOut += checkbox.value + ","; +// } +// }); +// params.set(option, tempOut); +// }); +// +// window.location.search = params; +// } +// +// function clearQueryParams() { +// checkboxOptions.forEach((option) => { +// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { +// checkbox.checked = false; +// }); +// }); +// } +// +// function selectAllQueryParams(column) { +// checkboxOptions.forEach((option) => { +// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { +// if (checkbox.className == column) { +// checkbox.checked = true; +// } +// }); +// }); +// } diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 427f417e..77723a8f 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,146 +1,106 @@ {% extends 'base/base.html' %} {% load as_icon %} +{% load as_css_class %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} + + + + {% endblock %} {% block content %} {% include "base/navbar.html" %} - -
-
+ {% if resources|length > 0 %} +
+ {# Headline #}

Resources

-
-

Search Options

- -
-
-
-
Topic
-
-
- {% for topic in topics_1 %} -
- -
- {% endfor %} -
-
- {% for topic in topics_2 %} -
- -
- {% endfor %} -
-
- - - -
-
-
Type
+
+ {# Filtering toolbox #} +
+
+ +
+
- {% for payment_tier in payment_tiers %} -
- -
+ {# Actual resources #} +
+
+
+ {% for resource in resources.values %} + {% include "resources/resource_box.html" %} {% endfor %} - - - -
-
-
Level
+ {% for subcategory in subcategories %} +

+ + {{ subcategory.category_info.name }} + +

+

{{ subcategory.category_info.description|safe }}

- {% for complexity in complexities %} -
- -
- {% endfor %} - - - + {% for resource in subcategory.resources %} + {% with category_info=subcategory.category_info %} + {% include "resources/resource_box.html" %} + {% endwith %} + {% endfor %} + {% endfor %}
- -
- - - - - - - -
-
-
-
- - {% if resources|length > 0 %} -
-
-
-
- {% for resource in resources %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories %} -

- - {{ subcategory.category_info.name }} - -

-

{{ subcategory.category_info.description|safe }}

- - {% for resource in subcategory.resources %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %}
-
-
+
{% else %} -

No resources matching search.

+

No resources matching search.

{% endif %} {% endblock %} -- cgit v1.2.3 From 4bd629b3d8b0fb5a1edd1c3aa30772094dc9deec Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Thu, 27 Jan 2022 12:39:19 +0100 Subject: Reflect and retain filter state in URL params. This commits makes two important changes: - Whenever we click on filter checkboxes, the URL is immediately updated to include parameters that represent the chosen options. For example, if you select Beginner complexity, the url is updated with ?complexity=beginner. - Whenever the page is loaded, we deserialize any parameters that exist in the URL and change the filter state to match it. In other words, refreshing the page at any time retains the current state, and you can now link people to exactly the filter results that you want to share. --- pydis_site/static/js/resources.js | 130 +++++++++++++------------- pydis_site/templates/resources/resources.html | 1 + 2 files changed, 66 insertions(+), 65 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index dee59e52..836ef4ec 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -8,17 +8,67 @@ var activeFilters = { complexity: [] }; +/* Check if there are no filters */ +function noFilters() { + return ( + activeFilters.topics.length === 0 && + activeFilters.type.length === 0 && + activeFilters["payment-tiers"].length === 0 && + activeFilters.complexity.length === 0 + ); +} + +/* Update the URL with new parameters */ +function updateURL() { + // If there's nothing in the filters, we don't want anything in the URL. + if (noFilters()) { + window.history.replaceState(null, document.title, './'); + return; + } + + // Iterate through and get rid of empty ones + let searchParams = new URLSearchParams(activeFilters); + $.each(activeFilters, function(filterType, filters) { + if (filters.length === 0) { + searchParams.delete(filterType); + } + }); + + // Now update the URL + window.history.replaceState(null, document.title, `?${searchParams.toString()}`); +} + +/* Get the params out of the URL and use them. This is run when the page loads. */ +function deserializeURLParams() { + let searchParams = new window.URLSearchParams(window.location.search); + + // Work through the parameters and add them to the filter object + $.each(Object.keys(activeFilters), function(_, filterType) { + let paramFilterContent = searchParams.get(filterType); + + if (paramFilterContent !== null) { + // We use split here because we always want an array, not a string. + let paramFilterArray = paramFilterContent.split(","); + activeFilters[filterType] = paramFilterArray; + + // Check corresponding checkboxes, so the UI reflects the internal state. + $(paramFilterArray).each(function(_, filter) { + let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`); + checkbox.prop("checked", true); + }); + } + }); +} + /* Update the resources to match 'active_filters' */ function update() { let resources = $('.resource-box'); + // Update the URL to match the new filters. + updateURL(); + // If there's nothing in the filters, show everything and return. - if ( - activeFilters.topics.length === 0 && - activeFilters.type.length === 0 && - activeFilters["payment-tiers"].length === 0 && - activeFilters.complexity.length === 0 - ) { + if (noFilters()) { resources.show(); return; } @@ -35,16 +85,16 @@ function update() { let resourceBox = $(this); // Validate the filters - $.each(activeFilters, function(filterType, activeFilters) { + $.each(activeFilters, function(filterType, filters) { // If the filter list is empty, this passes validation. - if (activeFilters.length === 0) { + if (filters.length === 0) { validation[filterType] = true; return; } // Otherwise, we need to check if one of the classes exist. - $.each(activeFilters, function(index, filter) { - if (resourceBox.hasClass(filter)) { + $.each(filters, function(index, filter) { + if (resourceBox.hasClass(`${filterType}-${filter}`)) { validation[filterType] = true; } }); @@ -61,6 +111,9 @@ function update() { // Executed when the page has finished loading. document.addEventListener("DOMContentLoaded", function () { + // Update the filters on page load to reflect URL parameters. + deserializeURLParams(); + update(); // If you collapse or uncollapse a filter group, swap the icon. $('button.collapsible').click(function() { @@ -75,8 +128,6 @@ document.addEventListener("DOMContentLoaded", function () { } }); - // Update the filters on page load to reflect URL parameters. - // If you click on the div surrounding the filter checkbox, it clicks the checkbox. $('.filter-panel').click(function() { let checkbox = $(this).find(".filter-checkbox"); @@ -88,12 +139,11 @@ document.addEventListener("DOMContentLoaded", function () { $('.filter-checkbox').change(function () { let filterItem = this.dataset.filterItem; let filterName = this.dataset.filterName; - let cssClass = filterName + "-" + filterItem; - var filterIndex = activeFilters[filterName].indexOf(cssClass); + var filterIndex = activeFilters[filterName].indexOf(filterItem); if (this.checked) { if (filterIndex === -1) { - activeFilters[filterName].push(cssClass); + activeFilters[filterName].push(filterItem); } update(); } else { @@ -104,53 +154,3 @@ document.addEventListener("DOMContentLoaded", function () { } }); }); - - - -// const initialParams = new URLSearchParams(window.location.search); -// const checkboxOptions = ['topic', 'type', 'payment', 'complexity']; -// -// const createQuerySelect = (opt) => { -// return "input[name=" + opt + "]" -// } -// -// checkboxOptions.forEach((option) => { -// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { -// if (initialParams.get(option).includes(checkbox.value)) { -// checkbox.checked = true -// } -// }); -// }); -// -// function buildQueryParams() { -// let params = new URLSearchParams(window.location.search); -// checkboxOptions.forEach((option) => { -// let tempOut = "" -// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { -// if (checkbox.checked) { -// tempOut += checkbox.value + ","; -// } -// }); -// params.set(option, tempOut); -// }); -// -// window.location.search = params; -// } -// -// function clearQueryParams() { -// checkboxOptions.forEach((option) => { -// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { -// checkbox.checked = false; -// }); -// }); -// } -// -// function selectAllQueryParams(column) { -// checkboxOptions.forEach((option) => { -// document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { -// if (checkbox.className == column) { -// checkbox.checked = true; -// } -// }); -// }); -// } diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 77723a8f..134c826b 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -45,6 +45,7 @@ {% endif %} + {# Checkboxes #} {% if filter_data.hidden %}
-- cgit v1.2.3 From da706784eef24e5b7bb45b50e2ebc1d8dd163a6c Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Fri, 28 Jan 2022 00:53:24 +0100 Subject: Make all tags interactive. Adds a bunch of tag-related quality of life improvements: - You can now see which filters you've added at the top left. - You can click on tags to start filtering to that tag. - You can click on tags in the filter box to remove the filter. - Tags will now show an outline when they are active. --- pydis_site/static/css/resources/resources.css | 91 +++++++++++++++++ pydis_site/static/js/resources.js | 123 +++++++++++++++++------ pydis_site/templates/resources/resource_box.html | 37 ++++++- pydis_site/templates/resources/resources.html | 123 ++++++++++++++++------- 4 files changed, 300 insertions(+), 74 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index f70cbd64..c6347eab 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -25,3 +25,94 @@ i.is-primary { color: #7289da; } + +/* A little space around the filter card, please! */ +.filter-tags { + padding-bottom: .5em; + padding-right: .5em; +} + +/* Set default display to inline-flex, for centering. */ +span.filter-box-tag { + display: inline-flex; + align-items: center; + cursor: pointer; + user-select: none; +} + +/* Make resource tags clickable */ +.resource-tag { + cursor: pointer; + user-select: none; +} + +/* Move the x down 1 pixel to align center */ +button.delete { + margin-top: 1px; +} + +/* Colors for delete button x's */ +button.delete.is-primary::before, +button.delete.is-primary::after { + background-color: #2a45a2; +} +button.delete.is-success::before, +button.delete.is-success::after { + background-color: #2c9659; +} +button.delete.is-danger::before, +button.delete.is-danger::after { + background-color: #c32841; +} +button.delete.is-info::before, +button.delete.is-info::after { + background-color: #237fbd; +} + +/* Give outlines to active tags */ +span.filter-box-tag, +span.resource-tag.active { + outline-width: 1px; + outline-style: solid; +} + +/* Make filter tags sparkle when selected! */ +@keyframes glow_success { + from { box-shadow: 0 0 2px 2px #aef4af; } + 33% { box-shadow: 0 0 2px 2px #87af7a; } + 66% { box-shadow: 0 0 2px 2px #9ceaac; } + to { box-shadow: 0 0 2px 2px #7cbf64; } +} + +@keyframes glow_primary { + from { box-shadow: 0 0 2px 2px #aeb8f3; } + 33% { box-shadow: 0 0 2px 2px #909ed9; } + 66% { box-shadow: 0 0 2px 2px #6d7ed4; } + to { box-shadow: 0 0 2px 2px #6383b3; } +} + +@keyframes glow_danger { + from { box-shadow: 0 0 2px 2px #c9495f; } + 33% { box-shadow: 0 0 2px 2px #92486f; } + 66% { box-shadow: 0 0 2px 2px #d455ba; } + to { box-shadow: 0 0 2px 2px #ff8192; } +} +@keyframes glow_info { + from { box-shadow: 0 0 2px 2px #4592c9; } + 33% { box-shadow: 0 0 2px 2px #6196bb; } + 66% { box-shadow: 0 0 2px 2px #5adade; } + to { box-shadow: 0 0 2px 2px #6bcfdc; } +} + +span.resource-tag.active.is-primary { + animation: glow_primary 4s infinite alternate; +} +span.resource-tag.active.has-background-danger-light { + animation: glow_danger 4s infinite alternate; +} +span.resource-tag.active.has-background-success-light { + animation: glow_success 4s infinite alternate; +} +span.resource-tag.active.has-background-info-light { + animation: glow_info 4s infinite alternate; +} diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index 836ef4ec..c9ce408b 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -8,6 +8,37 @@ var activeFilters = { complexity: [] }; +function addFilter(filterName, filterItem) { + // Push the filter into the stack + var filterIndex = activeFilters[filterName].indexOf(filterItem); + if (filterIndex === -1) { + activeFilters[filterName].push(filterItem); + } + updateUI(); + + // Show a corresponding filter box tag + $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show(); + $(".filter-tags").css("padding-bottom", "0.5em"); + + // Make corresponding resource tags active + $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active"); +} + +function removeFilter(filterName, filterItem) { + // Remove the filter from the stack + var filterIndex = activeFilters[filterName].indexOf(filterItem); + if (filterIndex !== -1) { + activeFilters[filterName].splice(filterIndex, 1); + } + updateUI(); + + // Hide the corresponding filter box tag + $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide(); + + // Make corresponding resource tags inactive + $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active"); +} + /* Check if there are no filters */ function noFilters() { return ( @@ -18,26 +49,6 @@ function noFilters() { ); } -/* Update the URL with new parameters */ -function updateURL() { - // If there's nothing in the filters, we don't want anything in the URL. - if (noFilters()) { - window.history.replaceState(null, document.title, './'); - return; - } - - // Iterate through and get rid of empty ones - let searchParams = new URLSearchParams(activeFilters); - $.each(activeFilters, function(filterType, filters) { - if (filters.length === 0) { - searchParams.delete(filterType); - } - }); - - // Now update the URL - window.history.replaceState(null, document.title, `?${searchParams.toString()}`); -} - /* Get the params out of the URL and use them. This is run when the page loads. */ function deserializeURLParams() { let searchParams = new window.URLSearchParams(window.location.search); @@ -51,18 +62,43 @@ function deserializeURLParams() { let paramFilterArray = paramFilterContent.split(","); activeFilters[filterType] = paramFilterArray; - // Check corresponding checkboxes, so the UI reflects the internal state. + // Update the corresponding filter UI, so it reflects the internal state. $(paramFilterArray).each(function(_, filter) { let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`); + let filterTag = $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`); + let resourceTags = $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`); checkbox.prop("checked", true); + filterTag.show(); + resourceTags.addClass("active"); }); } }); } +/* Update the URL with new parameters */ +function updateURL() { + // If there's nothing in the filters, we don't want anything in the URL. + if (noFilters()) { + window.history.replaceState(null, document.title, './'); + return; + } + + // Iterate through and get rid of empty ones + let searchParams = new URLSearchParams(activeFilters); + $.each(activeFilters, function(filterType, filters) { + if (filters.length === 0) { + searchParams.delete(filterType); + } + }); + + // Now update the URL + window.history.replaceState(null, document.title, `?${searchParams.toString()}`); +} + /* Update the resources to match 'active_filters' */ -function update() { +function updateUI() { let resources = $('.resource-box'); + let filterTags = $('.filter-box-tag'); // Update the URL to match the new filters. updateURL(); @@ -70,6 +106,8 @@ function update() { // If there's nothing in the filters, show everything and return. if (noFilters()) { resources.show(); + filterTags.hide(); + $(".filter-tags").css("padding-bottom", "0"); return; } @@ -112,8 +150,9 @@ function update() { // Executed when the page has finished loading. document.addEventListener("DOMContentLoaded", function () { // Update the filters on page load to reflect URL parameters. + $('.filter-box-tag').hide(); deserializeURLParams(); - update(); + updateUI(); // If you collapse or uncollapse a filter group, swap the icon. $('button.collapsible').click(function() { @@ -128,29 +167,47 @@ document.addEventListener("DOMContentLoaded", function () { } }); - // If you click on the div surrounding the filter checkbox, it clicks the checkbox. + // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox. $('.filter-panel').click(function() { let checkbox = $(this).find(".filter-checkbox"); checkbox.prop("checked", !checkbox.prop("checked")); checkbox.change(); }); + // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox. + $('.filter-box-tag').click(function() { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`); + + removeFilter(filterName, filterItem); + checkbox.prop("checked", false); + }); + + // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox. + $('.resource-tag').click(function() { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`) + + if (!$(this).hasClass("active")) { + addFilter(filterName, filterItem); + checkbox.prop("checked", true); + } else { + removeFilter(filterName, filterItem); + checkbox.prop("checked", false); + } + }); + // When checkboxes are toggled, trigger a filter update. $('.filter-checkbox').change(function () { let filterItem = this.dataset.filterItem; let filterName = this.dataset.filterName; - var filterIndex = activeFilters[filterName].indexOf(filterItem); if (this.checked) { - if (filterIndex === -1) { - activeFilters[filterName].push(filterItem); - } - update(); + addFilter(filterName, filterItem); } else { - if (filterIndex !== -1) { - activeFilters[filterName].splice(filterIndex, 1); - } - update(); + removeFilter(filterName, filterItem); } }); }); diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 09256751..476a4841 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -1,4 +1,5 @@ {% load as_icon %} +{% load as_css_class %} {% load get_category_icon %}
@@ -34,16 +35,44 @@ {# Tags #}
{% for tag in resource.tags.topics %} - {{ tag|title }} + + + {{ tag|title }} + {% endfor %} {% for tag in resource.tags.type %} - {{ tag|title }} + + + {{ tag|title }} + {% endfor %} {% for tag in resource.tags.payment_tiers %} - {{ tag|title }} + + + {{ tag|title }} + {% endfor %} {% for tag in resource.tags.complexity %} - {{ tag|title }} + + + {{ tag|title }} + {% endfor %}
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 %} - - - + + + {% endblock %} {% block content %} {% include "base/navbar.html" %} {% if resources|length > 0 %}
- {# Headline #} -
-

Resources

-
-
-
{# Filtering toolbox #}
-- cgit v1.2.3 From 72ca8758da4b80b638a83093a35a031210a8d9f2 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 29 Jan 2022 12:39:21 +0100 Subject: Let the user know when there are no matches. --- pydis_site/static/css/resources/resources.css | 6 + pydis_site/static/js/resources.js | 11 ++ pydis_site/templates/resources/resources.html | 162 ++++++++++++-------------- 3 files changed, 91 insertions(+), 88 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index c6347eab..218d9a59 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -15,6 +15,12 @@ padding:0 } +/* Hide the no resources h2 by default */ +h2.no-resources-found { + display: none; + margin-top: 1em; +} + /* Disable clicking on the checkbox itself. */ /* Instead, we want to let the anchor tag handle clicks. */ .filter-checkbox { diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index c9ce408b..89b8ae06 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -112,6 +112,8 @@ function updateUI() { } // Otherwise, hide everything and then filter the resources to decide what to show. + let hasMatches = false; + console.log(hasMatches); resources.hide(); resources.filter(function() { let validation = { @@ -140,11 +142,20 @@ function updateUI() { // If validation passes, show the resource. if (Object.values(validation).every(Boolean)) { + hasMatches = true; return true; } else { return false; } }).show(); + + // If there are no matches, show the no matches message + console.log(hasMatches); + if (!hasMatches) { + $(".no-resources-found").show(); + } else { + $(".no-resources-found").hide(); + } } // Executed when the page has finished loading. diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 87c28153..b82f16e1 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -16,141 +16,127 @@ {% block content %} {% include "base/navbar.html" %} - {% if resources|length > 0 %} -
-
- {# Filtering toolbox #} -
-
-
+ {% endfor %} +
+
- {# Actual resources #} -
-
-
- {% for resource in resources.values %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories %} -

- - {{ subcategory.category_info.name }} - -

-

{{ subcategory.category_info.description|safe }}

+
+ {# Message to display when there are no hits #} +

No matching resources found!

- {% for resource in subcategory.resources %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %} -
+ {# Resource cards #} +
+
+ {% for resource in resources.values %} + {% include "resources/resource_box.html" %} + {% endfor %}
-
- {% else %} -

No resources matching search.

- {% endif %} +

+
{% endblock %} + + -- cgit v1.2.3 From 783bb2af9c5b5940f0fa2d3a0d0cbd34ec7e1316 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 29 Jan 2022 12:58:10 +0100 Subject: Don't round edges of the filter category headers. --- pydis_site/static/css/resources/resources.css | 5 +++++ pydis_site/templates/resources/resources.html | 26 +++++++++++++------------- 2 files changed, 18 insertions(+), 13 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 218d9a59..db083a41 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -15,6 +15,11 @@ padding:0 } +/* Don't round the corners of the collapsibles */ +.filter-category-header { + border-radius: 0; +} + /* Hide the no resources h2 by default */ h2.no-resources-found { display: none; diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index b82f16e1..411ae056 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -80,19 +80,19 @@ {# Filter checkboxes #} {% for filter_name, filter_data in filters.items %} -
- +
+ {# Checkboxes #} {% if filter_data.hidden %} -- cgit v1.2.3 From 2c563d61a63b3fa06c8884078ca0b796faceecbe Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 29 Jan 2022 13:15:56 +0100 Subject: Use fullwidth icons so everything is aligned. --- pydis_site/templates/resources/resources.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 411ae056..166863c3 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -83,13 +83,13 @@
-- cgit v1.2.3 From 113f22d388f09c3d55e51325a29136e8902ae305 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 29 Jan 2022 13:19:05 +0100 Subject: Add Guides to the More menu. Since we've removed the resources landing page, there's no easy way to get to Guides anymore. For that reason, I'm adding it to the More menu so that it'll still be discoverable. --- pydis_site/templates/base/navbar.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 48ade189..d7fb4f4c 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -76,6 +76,9 @@ FAQ + + Guides + Timeline -- cgit v1.2.3 From e54a3d18e208dd532533b5bbe146b1bff9875ba4 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 29 Jan 2022 13:42:38 +0100 Subject: Complexity -> Difficulty. --- pydis_site/apps/resources/resources/adafruit.yaml | 2 +- pydis_site/apps/resources/resources/atom.yaml | 2 +- .../apps/resources/resources/automate_the_boring_stuff_book.yaml | 2 +- .../resources/resources/automate_the_boring_stuff_course.yaml | 2 +- .../apps/resources/resources/awesome_programming_discord.yaml | 2 +- pydis_site/apps/resources/resources/byte_of_python.yaml | 2 +- pydis_site/apps/resources/resources/code_combat.yaml | 2 +- pydis_site/apps/resources/resources/corey_schafer.yaml | 2 +- .../apps/resources/resources/data_science_from_scratch.yaml | 2 +- pydis_site/apps/resources/resources/edublocks.yaml | 2 +- pydis_site/apps/resources/resources/effective_python.yaml | 2 +- pydis_site/apps/resources/resources/exercism.yaml | 2 +- pydis_site/apps/resources/resources/flask_web_development.yaml | 2 +- pydis_site/apps/resources/resources/fluent_python.yaml | 2 +- .../apps/resources/resources/getting_started_with_kivy.yaml | 2 +- .../getting_started_with_python_for_non_programmers.yaml | 2 +- .../resources/getting_started_with_python_for_programmers.yaml | 2 +- pydis_site/apps/resources/resources/google_collab.yaml | 2 +- .../apps/resources/resources/hitchhikers_guide_to_python.yaml | 2 +- pydis_site/apps/resources/resources/inferential_thinking.yaml | 2 +- pydis_site/apps/resources/resources/jetbrains_academy.yaml | 2 +- pydis_site/apps/resources/resources/jetbrains_videos.yaml | 2 +- pydis_site/apps/resources/resources/jim_shaped_coding.yaml | 2 +- pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml | 2 +- pydis_site/apps/resources/resources/kivy.yaml | 2 +- pydis_site/apps/resources/resources/microsoft.yaml | 2 +- pydis_site/apps/resources/resources/microsoft_videos.yaml | 2 +- pydis_site/apps/resources/resources/mission_python.yaml | 2 +- .../mit_introduction_to_computer_science_and_programming.yaml | 2 +- pydis_site/apps/resources/resources/mu_editor.yaml | 2 +- pydis_site/apps/resources/resources/netbats_project_ideas.yaml | 2 +- .../resources/neural_networks_from_scratch_in_python.yaml | 2 +- pydis_site/apps/resources/resources/pallets.yaml | 2 +- pydis_site/apps/resources/resources/panda3d.yaml | 2 +- pydis_site/apps/resources/resources/people_postgres_data.yaml | 2 +- pydis_site/apps/resources/resources/podcast_dunder_init.yaml | 2 +- .../apps/resources/resources/practical_python_programming.yaml | 2 +- pydis_site/apps/resources/resources/pycharm.yaml | 2 +- pydis_site/apps/resources/resources/pyglet.yaml | 2 +- pydis_site/apps/resources/resources/python_bytes.yaml | 2 +- pydis_site/apps/resources/resources/python_cheat_sheet.yaml | 2 +- pydis_site/apps/resources/resources/python_cookbook.yaml | 2 +- pydis_site/apps/resources/resources/python_crash_course.yaml | 2 +- pydis_site/apps/resources/resources/python_developer_guide.yaml | 2 +- pydis_site/apps/resources/resources/python_discord_videos.yaml | 2 +- pydis_site/apps/resources/resources/python_morsels.yaml | 2 +- pydis_site/apps/resources/resources/python_subreddit.yaml | 2 +- pydis_site/apps/resources/resources/python_tricks.yaml | 2 +- pydis_site/apps/resources/resources/python_tutor.yaml | 2 +- pydis_site/apps/resources/resources/real_python.yaml | 2 +- pydis_site/apps/resources/resources/regex101.yaml | 2 +- pydis_site/apps/resources/resources/repl_it.yaml | 2 +- pydis_site/apps/resources/resources/screen_readers.yaml | 2 +- pydis_site/apps/resources/resources/sentdex.yaml | 2 +- pydis_site/apps/resources/resources/simple_guide_to_git.yaml | 2 +- pydis_site/apps/resources/resources/sololearn.yaml | 2 +- pydis_site/apps/resources/resources/spyder.yaml | 2 +- pydis_site/apps/resources/resources/sublime_text.yaml | 2 +- pydis_site/apps/resources/resources/talk_python_to_me.yaml | 2 +- pydis_site/apps/resources/resources/talon_voice.yaml | 2 +- pydis_site/apps/resources/resources/test_and_code.yaml | 2 +- pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml | 2 +- pydis_site/apps/resources/resources/the_real_python_podcast.yaml | 2 +- pydis_site/apps/resources/resources/think_python.yaml | 2 +- pydis_site/apps/resources/resources/thonny.yaml | 2 +- pydis_site/apps/resources/resources/two_scoops_of_django.yaml | 2 +- pydis_site/apps/resources/resources/university_of_michigan.yaml | 2 +- pydis_site/apps/resources/resources/university_of_toronto.yaml | 2 +- .../apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml | 2 +- pydis_site/apps/resources/resources/visual_studio_code.yaml | 2 +- pydis_site/apps/resources/resources/wtf_python.yaml | 2 +- pydis_site/apps/resources/views/resources.py | 8 ++++---- pydis_site/static/js/resources.js | 6 +++--- pydis_site/templates/resources/resource_box.html | 4 ++-- pydis_site/templates/resources/resources.html | 2 +- 75 files changed, 81 insertions(+), 81 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/resources/adafruit.yaml b/pydis_site/apps/resources/resources/adafruit.yaml index e8eeee37..f9466bd8 100644 --- a/pydis_site/apps/resources/resources/adafruit.yaml +++ b/pydis_site/apps/resources/resources/adafruit.yaml @@ -14,7 +14,7 @@ tags: - microcontrollers payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/atom.yaml b/pydis_site/apps/resources/resources/atom.yaml index 3a46a45f..26e125b1 100644 --- a/pydis_site/apps/resources/resources/atom.yaml +++ b/pydis_site/apps/resources/resources/atom.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml index bc0e19ec..9bf9aba8 100644 --- a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml +++ b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml @@ -15,7 +15,7 @@ tags: payment_tiers: - free - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml b/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml index b93ef868..133033f7 100644 --- a/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml +++ b/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - paid - complexity: + difficulty: - beginner type: - course diff --git a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml index 4233f26e..0ef7aefc 100644 --- a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml +++ b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml @@ -11,7 +11,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/byte_of_python.yaml b/pydis_site/apps/resources/resources/byte_of_python.yaml index d2b8fa35..c4b671c2 100644 --- a/pydis_site/apps/resources/resources/byte_of_python.yaml +++ b/pydis_site/apps/resources/resources/byte_of_python.yaml @@ -16,7 +16,7 @@ tags: payment_tiers: - free - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/code_combat.yaml b/pydis_site/apps/resources/resources/code_combat.yaml index ab4a4aed..84597c4d 100644 --- a/pydis_site/apps/resources/resources/code_combat.yaml +++ b/pydis_site/apps/resources/resources/code_combat.yaml @@ -13,7 +13,7 @@ tags: payment_tiers: - free - subscription - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/corey_schafer.yaml b/pydis_site/apps/resources/resources/corey_schafer.yaml index cb20bc24..b73f4b5d 100644 --- a/pydis_site/apps/resources/resources/corey_schafer.yaml +++ b/pydis_site/apps/resources/resources/corey_schafer.yaml @@ -22,7 +22,7 @@ tags: - tooling payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml index 8ba95e9b..57e73a28 100644 --- a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml +++ b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml @@ -16,7 +16,7 @@ tags: - data science payment_tiers: - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/edublocks.yaml b/pydis_site/apps/resources/resources/edublocks.yaml index 9fd87945..3eaefc35 100644 --- a/pydis_site/apps/resources/resources/edublocks.yaml +++ b/pydis_site/apps/resources/resources/edublocks.yaml @@ -12,7 +12,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - interactive diff --git a/pydis_site/apps/resources/resources/effective_python.yaml b/pydis_site/apps/resources/resources/effective_python.yaml index 4e361bcb..96a3b21a 100644 --- a/pydis_site/apps/resources/resources/effective_python.yaml +++ b/pydis_site/apps/resources/resources/effective_python.yaml @@ -15,7 +15,7 @@ tags: - software design payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/exercism.yaml b/pydis_site/apps/resources/resources/exercism.yaml index ba8cd2df..b8f53d72 100644 --- a/pydis_site/apps/resources/resources/exercism.yaml +++ b/pydis_site/apps/resources/resources/exercism.yaml @@ -13,7 +13,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/flask_web_development.yaml b/pydis_site/apps/resources/resources/flask_web_development.yaml index 95b75a5b..0bd418e5 100644 --- a/pydis_site/apps/resources/resources/flask_web_development.yaml +++ b/pydis_site/apps/resources/resources/flask_web_development.yaml @@ -14,7 +14,7 @@ tags: - web development payment_tiers: - paid - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/fluent_python.yaml b/pydis_site/apps/resources/resources/fluent_python.yaml index e35c0134..1d525baa 100644 --- a/pydis_site/apps/resources/resources/fluent_python.yaml +++ b/pydis_site/apps/resources/resources/fluent_python.yaml @@ -15,7 +15,7 @@ tags: - software design payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml b/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml index 5dbcd387..06eb2c14 100644 --- a/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml +++ b/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml @@ -8,7 +8,7 @@ tags: - game development payment_tiers: - free - complexity: + difficulty: - beginner type: - tutorial diff --git a/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml b/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml index 85c061bd..6fab0114 100644 --- a/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml +++ b/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - tutorial diff --git a/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml b/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml index 2565eedd..74b6efb9 100644 --- a/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml +++ b/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml @@ -8,7 +8,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - intermediate type: - tutorial diff --git a/pydis_site/apps/resources/resources/google_collab.yaml b/pydis_site/apps/resources/resources/google_collab.yaml index 65876c0e..067a79c9 100644 --- a/pydis_site/apps/resources/resources/google_collab.yaml +++ b/pydis_site/apps/resources/resources/google_collab.yaml @@ -10,7 +10,7 @@ tags: - data science payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml index bfac404a..c4b78af6 100644 --- a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml +++ b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml @@ -11,7 +11,7 @@ tags: - general payment_tiers: - paid - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/inferential_thinking.yaml b/pydis_site/apps/resources/resources/inferential_thinking.yaml index 20409f3a..a8cf2bc8 100644 --- a/pydis_site/apps/resources/resources/inferential_thinking.yaml +++ b/pydis_site/apps/resources/resources/inferential_thinking.yaml @@ -8,7 +8,7 @@ tags: - data science payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/jetbrains_academy.yaml b/pydis_site/apps/resources/resources/jetbrains_academy.yaml index 63c061ce..c3cb7657 100644 --- a/pydis_site/apps/resources/resources/jetbrains_academy.yaml +++ b/pydis_site/apps/resources/resources/jetbrains_academy.yaml @@ -12,7 +12,7 @@ tags: - data science payment_tiers: - subscription - complexity: + difficulty: - beginner type: - interactive diff --git a/pydis_site/apps/resources/resources/jetbrains_videos.yaml b/pydis_site/apps/resources/resources/jetbrains_videos.yaml index aba7c687..00d34e69 100644 --- a/pydis_site/apps/resources/resources/jetbrains_videos.yaml +++ b/pydis_site/apps/resources/resources/jetbrains_videos.yaml @@ -14,7 +14,7 @@ tags: - web development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/jim_shaped_coding.yaml b/pydis_site/apps/resources/resources/jim_shaped_coding.yaml index 30992ef2..c9727888 100644 --- a/pydis_site/apps/resources/resources/jim_shaped_coding.yaml +++ b/pydis_site/apps/resources/resources/jim_shaped_coding.yaml @@ -15,7 +15,7 @@ tags: - web development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml b/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml index a1907e0f..c8e72c6e 100644 --- a/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml +++ b/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml @@ -7,7 +7,7 @@ tags: - data science payment_tiers: - free - complexity: + difficulty: - intermediate type: - tutorial diff --git a/pydis_site/apps/resources/resources/kivy.yaml b/pydis_site/apps/resources/resources/kivy.yaml index 5d7d3844..dad29e9a 100644 --- a/pydis_site/apps/resources/resources/kivy.yaml +++ b/pydis_site/apps/resources/resources/kivy.yaml @@ -21,7 +21,7 @@ tags: - game development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/microsoft.yaml b/pydis_site/apps/resources/resources/microsoft.yaml index cc5ca93f..e1d62955 100644 --- a/pydis_site/apps/resources/resources/microsoft.yaml +++ b/pydis_site/apps/resources/resources/microsoft.yaml @@ -12,7 +12,7 @@ tags: - tooling payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/microsoft_videos.yaml b/pydis_site/apps/resources/resources/microsoft_videos.yaml index 39187650..f45aef63 100644 --- a/pydis_site/apps/resources/resources/microsoft_videos.yaml +++ b/pydis_site/apps/resources/resources/microsoft_videos.yaml @@ -19,7 +19,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - video diff --git a/pydis_site/apps/resources/resources/mission_python.yaml b/pydis_site/apps/resources/resources/mission_python.yaml index 4e7b30b0..e8e0a6b8 100644 --- a/pydis_site/apps/resources/resources/mission_python.yaml +++ b/pydis_site/apps/resources/resources/mission_python.yaml @@ -14,7 +14,7 @@ tags: - game development payment_tiers: - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml b/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml index 4aa028ea..4e74936d 100644 --- a/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml +++ b/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml @@ -10,7 +10,7 @@ tags: payment_tiers: - free - paid - complexity: + difficulty: - beginner type: - course diff --git a/pydis_site/apps/resources/resources/mu_editor.yaml b/pydis_site/apps/resources/resources/mu_editor.yaml index 68c9b7db..b6318d0e 100644 --- a/pydis_site/apps/resources/resources/mu_editor.yaml +++ b/pydis_site/apps/resources/resources/mu_editor.yaml @@ -9,7 +9,7 @@ tags: - microcontrollers payment_tiers: - free - complexity: + difficulty: - beginner type: - tool diff --git a/pydis_site/apps/resources/resources/netbats_project_ideas.yaml b/pydis_site/apps/resources/resources/netbats_project_ideas.yaml index faa029f9..80ba771c 100644 --- a/pydis_site/apps/resources/resources/netbats_project_ideas.yaml +++ b/pydis_site/apps/resources/resources/netbats_project_ideas.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml index 5d3060a4..6313cabe 100644 --- a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml +++ b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml @@ -13,7 +13,7 @@ tags: - data science payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/pallets.yaml b/pydis_site/apps/resources/resources/pallets.yaml index de3f7fad..0da2a625 100644 --- a/pydis_site/apps/resources/resources/pallets.yaml +++ b/pydis_site/apps/resources/resources/pallets.yaml @@ -12,7 +12,7 @@ tags: - web development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/panda3d.yaml b/pydis_site/apps/resources/resources/panda3d.yaml index 0d488565..61ecba4b 100644 --- a/pydis_site/apps/resources/resources/panda3d.yaml +++ b/pydis_site/apps/resources/resources/panda3d.yaml @@ -16,7 +16,7 @@ tags: - game development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/people_postgres_data.yaml b/pydis_site/apps/resources/resources/people_postgres_data.yaml index 70088af2..c2d63252 100644 --- a/pydis_site/apps/resources/resources/people_postgres_data.yaml +++ b/pydis_site/apps/resources/resources/people_postgres_data.yaml @@ -20,7 +20,7 @@ tags: - databases payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/podcast_dunder_init.yaml b/pydis_site/apps/resources/resources/podcast_dunder_init.yaml index ee3028a3..2751481a 100644 --- a/pydis_site/apps/resources/resources/podcast_dunder_init.yaml +++ b/pydis_site/apps/resources/resources/podcast_dunder_init.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/practical_python_programming.yaml b/pydis_site/apps/resources/resources/practical_python_programming.yaml index 85b3967a..12873b7c 100644 --- a/pydis_site/apps/resources/resources/practical_python_programming.yaml +++ b/pydis_site/apps/resources/resources/practical_python_programming.yaml @@ -12,7 +12,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - course diff --git a/pydis_site/apps/resources/resources/pycharm.yaml b/pydis_site/apps/resources/resources/pycharm.yaml index 1fda3bff..574158bc 100644 --- a/pydis_site/apps/resources/resources/pycharm.yaml +++ b/pydis_site/apps/resources/resources/pycharm.yaml @@ -8,7 +8,7 @@ tags: payment_tiers: - free - paid - complexity: + difficulty: - intermediate type: - tool diff --git a/pydis_site/apps/resources/resources/pyglet.yaml b/pydis_site/apps/resources/resources/pyglet.yaml index d4a37fa8..a47c7e62 100644 --- a/pydis_site/apps/resources/resources/pyglet.yaml +++ b/pydis_site/apps/resources/resources/pyglet.yaml @@ -15,7 +15,7 @@ tags: - game development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/python_bytes.yaml b/pydis_site/apps/resources/resources/python_bytes.yaml index 578fff2e..9beba4f4 100644 --- a/pydis_site/apps/resources/resources/python_bytes.yaml +++ b/pydis_site/apps/resources/resources/python_bytes.yaml @@ -8,7 +8,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/python_cheat_sheet.yaml b/pydis_site/apps/resources/resources/python_cheat_sheet.yaml index da9b980f..56f61165 100644 --- a/pydis_site/apps/resources/resources/python_cheat_sheet.yaml +++ b/pydis_site/apps/resources/resources/python_cheat_sheet.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - tutorial diff --git a/pydis_site/apps/resources/resources/python_cookbook.yaml b/pydis_site/apps/resources/resources/python_cookbook.yaml index 855adb2f..fbb1bdc8 100644 --- a/pydis_site/apps/resources/resources/python_cookbook.yaml +++ b/pydis_site/apps/resources/resources/python_cookbook.yaml @@ -15,7 +15,7 @@ tags: - software design payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/python_crash_course.yaml b/pydis_site/apps/resources/resources/python_crash_course.yaml index 379cf954..9de1a53c 100644 --- a/pydis_site/apps/resources/resources/python_crash_course.yaml +++ b/pydis_site/apps/resources/resources/python_crash_course.yaml @@ -21,7 +21,7 @@ tags: - game development payment_tiers: - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/python_developer_guide.yaml b/pydis_site/apps/resources/resources/python_developer_guide.yaml index f17c88ce..2806d75d 100644 --- a/pydis_site/apps/resources/resources/python_developer_guide.yaml +++ b/pydis_site/apps/resources/resources/python_developer_guide.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - intermediate type: - tutorial diff --git a/pydis_site/apps/resources/resources/python_discord_videos.yaml b/pydis_site/apps/resources/resources/python_discord_videos.yaml index bf44083f..15a04097 100644 --- a/pydis_site/apps/resources/resources/python_discord_videos.yaml +++ b/pydis_site/apps/resources/resources/python_discord_videos.yaml @@ -8,7 +8,7 @@ tags: - software design payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/python_morsels.yaml b/pydis_site/apps/resources/resources/python_morsels.yaml index de02be7f..bbc8133b 100644 --- a/pydis_site/apps/resources/resources/python_morsels.yaml +++ b/pydis_site/apps/resources/resources/python_morsels.yaml @@ -13,7 +13,7 @@ tags: - software design payment_tiers: - subscription - complexity: + difficulty: - intermediate type: - interactive diff --git a/pydis_site/apps/resources/resources/python_subreddit.yaml b/pydis_site/apps/resources/resources/python_subreddit.yaml index ef9f23d9..e94f84fc 100644 --- a/pydis_site/apps/resources/resources/python_subreddit.yaml +++ b/pydis_site/apps/resources/resources/python_subreddit.yaml @@ -9,7 +9,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/python_tricks.yaml b/pydis_site/apps/resources/resources/python_tricks.yaml index 17f40732..a38fa74b 100644 --- a/pydis_site/apps/resources/resources/python_tricks.yaml +++ b/pydis_site/apps/resources/resources/python_tricks.yaml @@ -13,7 +13,7 @@ tags: - software design payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/python_tutor.yaml b/pydis_site/apps/resources/resources/python_tutor.yaml index 4f6d5130..6bee0d69 100644 --- a/pydis_site/apps/resources/resources/python_tutor.yaml +++ b/pydis_site/apps/resources/resources/python_tutor.yaml @@ -6,7 +6,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/real_python.yaml b/pydis_site/apps/resources/resources/real_python.yaml index 1669638e..0d0b2ad3 100644 --- a/pydis_site/apps/resources/resources/real_python.yaml +++ b/pydis_site/apps/resources/resources/real_python.yaml @@ -15,7 +15,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/regex101.yaml b/pydis_site/apps/resources/resources/regex101.yaml index db3df957..45d00f1b 100644 --- a/pydis_site/apps/resources/resources/regex101.yaml +++ b/pydis_site/apps/resources/resources/regex101.yaml @@ -8,7 +8,7 @@ tags: - other payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/repl_it.yaml b/pydis_site/apps/resources/resources/repl_it.yaml index e1ba1d19..e0f6cbb3 100644 --- a/pydis_site/apps/resources/resources/repl_it.yaml +++ b/pydis_site/apps/resources/resources/repl_it.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/screen_readers.yaml b/pydis_site/apps/resources/resources/screen_readers.yaml index 9673a132..b086b301 100644 --- a/pydis_site/apps/resources/resources/screen_readers.yaml +++ b/pydis_site/apps/resources/resources/screen_readers.yaml @@ -10,7 +10,7 @@ tags: payment_tiers: - free - paid - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/sentdex.yaml b/pydis_site/apps/resources/resources/sentdex.yaml index 47a8852d..d9131039 100644 --- a/pydis_site/apps/resources/resources/sentdex.yaml +++ b/pydis_site/apps/resources/resources/sentdex.yaml @@ -24,7 +24,7 @@ tags: - data science payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml index 6dacdf5c..3bb46e6d 100644 --- a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml +++ b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml @@ -8,7 +8,7 @@ tags: - tooling payment_tiers: - free - complexity: + difficulty: - beginner type: - tutorial diff --git a/pydis_site/apps/resources/resources/sololearn.yaml b/pydis_site/apps/resources/resources/sololearn.yaml index b9b59bca..998f5368 100644 --- a/pydis_site/apps/resources/resources/sololearn.yaml +++ b/pydis_site/apps/resources/resources/sololearn.yaml @@ -10,7 +10,7 @@ tags: payment_tiers: - free - subscription - complexity: + difficulty: - beginner type: - interactive diff --git a/pydis_site/apps/resources/resources/spyder.yaml b/pydis_site/apps/resources/resources/spyder.yaml index 8dc05542..668e9306 100644 --- a/pydis_site/apps/resources/resources/spyder.yaml +++ b/pydis_site/apps/resources/resources/spyder.yaml @@ -7,7 +7,7 @@ tags: - data science payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/sublime_text.yaml b/pydis_site/apps/resources/resources/sublime_text.yaml index 76aeac45..05596477 100644 --- a/pydis_site/apps/resources/resources/sublime_text.yaml +++ b/pydis_site/apps/resources/resources/sublime_text.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/talk_python_to_me.yaml b/pydis_site/apps/resources/resources/talk_python_to_me.yaml index 00726203..509922c3 100644 --- a/pydis_site/apps/resources/resources/talk_python_to_me.yaml +++ b/pydis_site/apps/resources/resources/talk_python_to_me.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/talon_voice.yaml b/pydis_site/apps/resources/resources/talon_voice.yaml index 0f28a328..3be5fe20 100644 --- a/pydis_site/apps/resources/resources/talon_voice.yaml +++ b/pydis_site/apps/resources/resources/talon_voice.yaml @@ -8,7 +8,7 @@ tags: - other payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/test_and_code.yaml b/pydis_site/apps/resources/resources/test_and_code.yaml index efe0c218..f0d1c3b3 100644 --- a/pydis_site/apps/resources/resources/test_and_code.yaml +++ b/pydis_site/apps/resources/resources/test_and_code.yaml @@ -8,7 +8,7 @@ tags: - tooling payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml b/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml index 514da947..151768a5 100644 --- a/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml +++ b/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml @@ -6,7 +6,7 @@ tags: - web development payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/the_real_python_podcast.yaml b/pydis_site/apps/resources/resources/the_real_python_podcast.yaml index 62ba32ce..647779d5 100644 --- a/pydis_site/apps/resources/resources/the_real_python_podcast.yaml +++ b/pydis_site/apps/resources/resources/the_real_python_podcast.yaml @@ -9,7 +9,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/think_python.yaml b/pydis_site/apps/resources/resources/think_python.yaml index aceaf951..f9211308 100644 --- a/pydis_site/apps/resources/resources/think_python.yaml +++ b/pydis_site/apps/resources/resources/think_python.yaml @@ -18,7 +18,7 @@ tags: - software design payment_tiers: - paid - complexity: + difficulty: - beginner type: - book diff --git a/pydis_site/apps/resources/resources/thonny.yaml b/pydis_site/apps/resources/resources/thonny.yaml index a60e4d1b..29ba9e07 100644 --- a/pydis_site/apps/resources/resources/thonny.yaml +++ b/pydis_site/apps/resources/resources/thonny.yaml @@ -8,7 +8,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - tool diff --git a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml index 4eadc28d..63730ac9 100644 --- a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml +++ b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml @@ -14,7 +14,7 @@ tags: - web development payment_tiers: - paid - complexity: + difficulty: - intermediate type: - book diff --git a/pydis_site/apps/resources/resources/university_of_michigan.yaml b/pydis_site/apps/resources/resources/university_of_michigan.yaml index 843b64ed..7aaaf2ae 100644 --- a/pydis_site/apps/resources/resources/university_of_michigan.yaml +++ b/pydis_site/apps/resources/resources/university_of_michigan.yaml @@ -7,7 +7,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner type: - course diff --git a/pydis_site/apps/resources/resources/university_of_toronto.yaml b/pydis_site/apps/resources/resources/university_of_toronto.yaml index d057eb39..94df96f2 100644 --- a/pydis_site/apps/resources/resources/university_of_toronto.yaml +++ b/pydis_site/apps/resources/resources/university_of_toronto.yaml @@ -13,7 +13,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml b/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml index 02f9fe5a..1a3dd457 100644 --- a/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml +++ b/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml @@ -8,7 +8,7 @@ tags: - discord bots payment_tiers: - free - complexity: + difficulty: - intermediate type: - tutorial diff --git a/pydis_site/apps/resources/resources/visual_studio_code.yaml b/pydis_site/apps/resources/resources/visual_studio_code.yaml index f09efcf8..3cf858f8 100644 --- a/pydis_site/apps/resources/resources/visual_studio_code.yaml +++ b/pydis_site/apps/resources/resources/visual_studio_code.yaml @@ -6,7 +6,7 @@ tags: - general payment_tiers: - free - complexity: + difficulty: - beginner - intermediate type: diff --git a/pydis_site/apps/resources/resources/wtf_python.yaml b/pydis_site/apps/resources/resources/wtf_python.yaml index 7f67ccf9..6d90ba39 100644 --- a/pydis_site/apps/resources/resources/wtf_python.yaml +++ b/pydis_site/apps/resources/resources/wtf_python.yaml @@ -12,7 +12,7 @@ tags: - other payment_tiers: - free - complexity: + difficulty: - intermediate type: - tutorial diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index 57cb4f71..14b3d0bf 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -28,7 +28,7 @@ class ResourceView(View): resource_tags = { "topics": set(), "payment_tiers": set(), - "complexity": set(), + "difficulty": set(), "type": set(), } for resource_name, resource in self.resources.items(): @@ -53,8 +53,8 @@ class ResourceView(View): # Set up all the filter checkbox metadata self.filters = { - "Complexity": { - "filters": sorted(resource_tags.get("complexity")), + "Difficulty": { + "filters": sorted(resource_tags.get("difficulty")), "icon": "fas fa-brain", "hidden": False, }, @@ -84,7 +84,7 @@ class ResourceView(View): ('topics', 'topics'), ('type', 'type'), ('payment_tiers', 'payment'), - ('complexity', 'complexity'), + ('difficulty', 'difficulty'), ) } diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index 89b8ae06..eaca3978 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -5,7 +5,7 @@ var activeFilters = { topics: [], type: [], "payment-tiers": [], - complexity: [] + difficulty: [] }; function addFilter(filterName, filterItem) { @@ -45,7 +45,7 @@ function noFilters() { activeFilters.topics.length === 0 && activeFilters.type.length === 0 && activeFilters["payment-tiers"].length === 0 && - activeFilters.complexity.length === 0 + activeFilters.difficulty.length === 0 ); } @@ -120,7 +120,7 @@ function updateUI() { topics: false, type: false, 'payment-tiers': false, - complexity: false + difficulty: false }; let resourceBox = $(this); diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 476a4841..8a1017b5 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -64,10 +64,10 @@ {{ tag|title }} {% endfor %} - {% for tag in resource.tags.complexity %} + {% for tag in resource.tags.difficulty %} diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 166863c3..9ebebe1f 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -29,7 +29,7 @@
{% for filter_name, filter_data in filters.items %} {% for filter_item in filter_data.filters %} - {% if filter_name == "Complexity" %} + {% if filter_name == "Difficulty" %} Date: Sun, 30 Jan 2022 11:41:44 +0100 Subject: Redirects from old endpoints now filter correctly. For example, navigating to pydis.com/resources/communities will now correctly redirect to pydis.com/resources/?type=community. --- pydis_site/apps/redirect/redirects.yaml | 10 ++++++---- pydis_site/apps/resources/urls.py | 1 + pydis_site/apps/resources/views/resources.py | 25 ++++++++----------------- pydis_site/static/js/resources.js | 8 ++++++++ pydis_site/templates/resources/resources.html | 1 + 5 files changed, 24 insertions(+), 21 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/redirect/redirects.yaml b/pydis_site/apps/redirect/redirects.yaml index bee65103..533b9e25 100644 --- a/pydis_site/apps/redirect/redirects.yaml +++ b/pydis_site/apps/redirect/redirects.yaml @@ -90,30 +90,32 @@ resources_index_redirect: resources_reading_redirect: original_path: resources/reading/ redirect_route: "resources:index" + redirect_arguments: ["book"] resources_videos_redirect: original_path: resources/videos/ redirect_route: "resources:index" - -resources_interactive_redirect: - original_path: resources/interactive/ - redirect_route: "resources:index" + redirect_arguments: ["video"] resources_courses_redirect: original_path: resources/courses/ redirect_route: "resources:index" + redirect_arguments: ["course"] resources_communities_redirect: original_path: resources/communities/ redirect_route: "resources:index" + redirect_arguments: ["community"] resources_podcasts_redirect: original_path: resources/podcasts/ redirect_route: "resources:index" + redirect_arguments: ["podcast"] resources_tools_redirect: original_path: resources/tools/ redirect_route: "resources:index" + redirect_arguments: ["tool"] # Events events_index_redirect: diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py index 5d5ae7fb..ed24dc99 100644 --- a/pydis_site/apps/resources/urls.py +++ b/pydis_site/apps/resources/urls.py @@ -5,4 +5,5 @@ from pydis_site.apps.resources import views app_name = "resources" urlpatterns = [ distill_path("", views.resources.ResourceView.as_view(), name="index"), + distill_path("/", views.resources.ResourceView.as_view(), name="index"), ] diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index d0b8bae7..b828d89a 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -1,8 +1,9 @@ from pathlib import Path +import typing as t import yaml from django.core.handlers.wsgi import WSGIRequest -from django.http import HttpResponse +from django.http import HttpResponse, HttpResponseNotFound from django.shortcuts import render from django.views import View @@ -78,22 +79,12 @@ class ResourceView(View): } } - @staticmethod - def _get_filter_options(request: WSGIRequest) -> dict[str, set]: - """Get the requested filter options out of the request object.""" - return { - option: set(request.GET.get(url_param, "").split(",")[:-1]) - for option, url_param in ( - ('topics', 'topics'), - ('type', 'type'), - ('payment_tiers', 'payment'), - ('difficulty', 'difficulty'), - ) - } - - def get(self, request: WSGIRequest) -> HttpResponse: + def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse: """List out all the resources, and any filtering options from the URL.""" - filter_options = self._get_filter_options(request) + + # Add type filtering if the request is made to somewhere like /resources/video + if resource_type and resource_type.title() not in self.filters['Type']['filters']: + return HttpResponseNotFound() return render( request, @@ -101,6 +92,6 @@ class ResourceView(View): context={ "resources": self.resources, "filters": self.filters, - "filter_options": filter_options, + "resource_type": resource_type, } ) diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index eaca3978..bf570097 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -160,6 +160,14 @@ function updateUI() { // Executed when the page has finished loading. document.addEventListener("DOMContentLoaded", function () { + /* Check if the user has navigated to one of the old resource pages, + like pydis.com/resources/communities. In this case, we'll rewrite + the URL before we do anything else. */ + let resourceTypeInput = $("#resource-type-input").val(); + if (resourceTypeInput.length !== 0) { + window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`); + } + // Update the filters on page load to reflect URL parameters. $('.filter-box-tag').hide(); deserializeURLParams(); diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 9ebebe1f..7a284fd6 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -16,6 +16,7 @@ {% block content %} {% include "base/navbar.html" %} +
{# Filtering toolbox #} -- cgit v1.2.3 From aa1420aeb91a9663a714cdceb0f957d9837740e7 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 12:33:20 +0100 Subject: Clean up hover effects. - We now have a hover effect for all icons. - We also now support hover effects for all tags. - However, we don't have any hover effect for icons in titles. That just looks weird. Additionally, we're getting rid of some bloat and consolidating the CSS into one place. --- pydis_site/static/css/resources/resources.css | 48 ++++++++++++++++++ pydis_site/static/css/resources/resources_list.css | 57 ---------------------- pydis_site/templates/resources/resource_box.html | 4 +- 3 files changed, 50 insertions(+), 59 deletions(-) delete mode 100644 pydis_site/static/css/resources/resources_list.css (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index db083a41..7038d0d7 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -1,3 +1,45 @@ +/* Colors for icons */ +i.resource-icon.is-orangered { + color: #FE640A; +} +i.resource-icon.is-blurple { + color: #7289DA; +} +i.resource-icon.is-teal { + color: #95DBE5; +} +i.resource-icon.is-youtube-red { + color: #BB0000; +} +i.resource-icon.is-black { + color: #2c3334; +} + +/* Colors when icons are hovered */ +i.resource-icon.is-hoverable:hover { + filter: brightness(125%); +} +i.resource-icon.is-hoverable.is-black:hover { + filter: brightness(170%); +} +i.resource-icon.is-hoverable.is-teal:hover { + filter: brightness(80%); +} + +/* Icon padding */ +.breadcrumb-section { + padding: 1rem; +} +i.has-icon-padding { + padding: 0 10px 25px 0; +} +#tab-content p { + display: none; +} +#tab-content p.is-active { +display: block; +} + /* Disable highlighting for all text in the filters. */ .filter-checkbox, .filter-panel label, @@ -57,6 +99,12 @@ span.filter-box-tag { user-select: none; } +/* When hovering tags, brighten them a bit. */ +.resource-tag:hover, +.filter-box-tag:hover { + filter: brightness(95%); +} + /* Move the x down 1 pixel to align center */ button.delete { margin-top: 1px; diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css deleted file mode 100644 index c2151bee..00000000 --- a/pydis_site/static/css/resources/resources_list.css +++ /dev/null @@ -1,57 +0,0 @@ -.breadcrumb-section { - padding: 1rem; -} - -i.resource-icon.is-orangered { - color: #FE640A; -} - -i.resource-icon.is-orangered:hover { - color: #fe9840; -} - -i.resource-icon.is-blurple { - color: #7289DA; -} - -i.resource-icon.is-blurple:hover { - color: #93a8da; -} - -i.resource-icon.is-teal { - color: #95DBE5; -} - -i.resource-icon.is-teal:hover { - color: #a9f5ff; -} - -i.resource-icon.is-youtube-red { - color: #BB0000; -} - -i.resource-icon.is-youtube-red:hover { - color: #f80000; -} - -i.resource-icon.is-goodreads-cream, -i.resource-icon.is-black { - color: #2c3334; -} - -i.resource-icon.is-goodreads-cream:hover, -i.resource-icon.is-black:hover { - color: #475d6d; -} - -i.has-icon-padding { - padding: 0 10px 25px 0; -} - -#tab-content p { - display: none; -} - -#tab-content p.is-active { -display: block; -} diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 8a1017b5..b06ffd31 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -18,7 +18,7 @@ {% if 'title_url' in resource %} - + {% endif %} @@ -27,7 +27,7 @@ {% for icon in resource.urls %} - + {% endfor %} -- cgit v1.2.3 From d8c5571a266438d5e2e0c9fd4a35adf469688730 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 12:34:29 +0100 Subject: Support dashful redirects. Previously, trying to go to `resources/project%20ideas` would crash the filtering JS. This has now been sorted out, so that these types of redirects have their spaces replaced by dashes, which makes them valid again. --- pydis_site/apps/resources/views/resources.py | 7 +++++-- pydis_site/static/js/resources.js | 11 +++++------ pydis_site/templates/resources/resources.html | 1 - 3 files changed, 10 insertions(+), 9 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py index b828d89a..709fad6c 100644 --- a/pydis_site/apps/resources/views/resources.py +++ b/pydis_site/apps/resources/views/resources.py @@ -82,9 +82,12 @@ class ResourceView(View): def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse: """List out all the resources, and any filtering options from the URL.""" - # Add type filtering if the request is made to somewhere like /resources/video - if resource_type and resource_type.title() not in self.filters['Type']['filters']: + # Add type filtering if the request is made to somewhere like /resources/video. + # We also convert all spaces to dashes, so they'll correspond with the filters. + dashless_resource_type = resource_type.replace("-", " ") + if resource_type and dashless_resource_type.title() not in self.filters['Type']['filters']: return HttpResponseNotFound() + resource_type = resource_type.replace(" ", "-") return render( request, diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index bfcd569d..34587c81 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -64,9 +64,9 @@ function deserializeURLParams() { // Update the corresponding filter UI, so it reflects the internal state. $(paramFilterArray).each(function(_, filter) { - let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`); - let filterTag = $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`); - let resourceTags = $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`); + let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`); + let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); + let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); checkbox.prop("checked", true); filterTag.show(); resourceTags.addClass("active"); @@ -149,7 +149,6 @@ function updateUI() { }).show(); // If there are no matches, show the no matches message - console.log(hasMatches); if (!hasMatches) { $(".no-resources-found").show(); } else { @@ -196,7 +195,7 @@ document.addEventListener("DOMContentLoaded", function () { $('.filter-box-tag').click(function() { let filterItem = this.dataset.filterItem; let filterName = this.dataset.filterName; - let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`); + let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); removeFilter(filterName, filterItem); checkbox.prop("checked", false); @@ -206,7 +205,7 @@ document.addEventListener("DOMContentLoaded", function () { $('.resource-tag').click(function() { let filterItem = this.dataset.filterItem; let filterName = this.dataset.filterName; - let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`) + let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); if (!$(this).hasClass("active")) { addFilter(filterName, filterItem); diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 7a284fd6..4dd07270 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -7,7 +7,6 @@ {% block title %}Resources{% endblock %} {% block head %} - -- cgit v1.2.3 From 2cbaeb129b793fa3dc162258dd4e60781e35d5f1 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 13:04:58 +0100 Subject: Show a duck pond when no filters match. --- pydis_site/static/css/resources/resources.css | 7 +++++++ pydis_site/static/images/resources/duck_pond_404.png | Bin 0 -> 2371374 bytes pydis_site/templates/resources/resources.html | 6 +++++- 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 pydis_site/static/images/resources/duck_pond_404.png (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 7038d0d7..b48beca6 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -93,6 +93,13 @@ span.filter-box-tag { user-select: none; } +/* Center the 404 div */ +.no-resources-found { + display: flex; + flex-direction: column; + align-items: center; +} + /* Make resource tags clickable */ .resource-tag { cursor: pointer; diff --git a/pydis_site/static/images/resources/duck_pond_404.png b/pydis_site/static/images/resources/duck_pond_404.png new file mode 100644 index 00000000..3aed4d62 Binary files /dev/null and b/pydis_site/static/images/resources/duck_pond_404.png differ diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 4dd07270..53feb255 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -124,7 +124,11 @@
{# Message to display when there are no hits #} -

No matching resources found!

+
+

No matching resources found!

+ +
+ {# Resource cards #}
-- cgit v1.2.3 From df51385ab8adf715d61841eceebeb7cb2f220e77 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 14:14:51 +0100 Subject: Show a "No filters selected" indicator. --- pydis_site/static/js/resources.js | 10 ++++++++-- pydis_site/templates/resources/resource_box.html | 6 +++--- pydis_site/templates/resources/resources.html | 8 +++++++- 3 files changed, 18 insertions(+), 6 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index 34587c81..718e1e88 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -18,10 +18,12 @@ function addFilter(filterName, filterItem) { // Show a corresponding filter box tag $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show(); - $(".filter-tags").css("padding-bottom", "0.5em"); // Make corresponding resource tags active $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active"); + + // Hide the "No filters selected" tag. + $(".no-tags-selected.tag").hide(); } function removeFilter(filterName, filterItem) { @@ -37,6 +39,11 @@ function removeFilter(filterName, filterItem) { // Make corresponding resource tags inactive $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active"); + + // Show "No filters selected" tag, if there are no filters active + if (noFilters()) { + $(".no-tags-selected.tag").show(); + } } /* Check if there are no filters */ @@ -107,7 +114,6 @@ function updateUI() { if (noFilters()) { resources.show(); filterTags.hide(); - $(".filter-tags").css("padding-bottom", "0"); return; } diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index b06ffd31..88ddee80 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -18,16 +18,16 @@ {% if 'title_url' in resource %} - + {% endif %} - {#Add all additional icon #} + {# Add all additional icon #} {% for icon in resource.urls %} - + {% endfor %} diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 53feb255..c3881092 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -27,6 +27,12 @@ {# Filter box tags #}
+ {# A filter tag for when there are no filters active #} + + + No filters selected + + {% for filter_name, filter_data in filters.items %} {% for filter_item in filter_data.filters %} {% if filter_name == "Difficulty" %} @@ -125,7 +131,7 @@
{# Message to display when there are no hits #}
-

No matching resources found!

+

No matching resources found!

-- cgit v1.2.3 From 301847a014c13e4929dcc00efa7e14349d34df0e Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 14:15:37 +0100 Subject: Remove italics from resource cards. --- pydis_site/templates/resources/resource_box.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 88ddee80..8f634333 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -11,7 +11,7 @@ {% include "resources/resource_box_header.html" %} {% endif %} -

{{ resource.description|safe }}

+

{{ resource.description|safe }}

{# Add primary link #} -- cgit v1.2.3 From dda3e355ac31dc4b9629f2e9e63474bbba69d740 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 14:29:48 +0100 Subject: Refactor: collapsibles as a stand-alone component --- pydis_site/apps/resources/urls.py | 1 + pydis_site/static/css/collapsibles.css | 12 ++ pydis_site/static/css/content/page.css | 13 -- pydis_site/static/js/collapsibles.js | 13 ++ pydis_site/static/js/content/page.js | 13 -- pydis_site/static/js/resources.js | 236 -------------------------- pydis_site/static/js/resources/resources.js | 236 ++++++++++++++++++++++++++ pydis_site/templates/content/base.html | 3 +- pydis_site/templates/resources/resources.html | 6 +- 9 files changed, 267 insertions(+), 266 deletions(-) create mode 100644 pydis_site/static/css/collapsibles.css create mode 100644 pydis_site/static/js/collapsibles.js delete mode 100644 pydis_site/static/js/content/page.js delete mode 100644 pydis_site/static/js/resources.js create mode 100644 pydis_site/static/js/resources/resources.js (limited to 'pydis_site/templates') diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py index aa3892b6..044f7072 100644 --- a/pydis_site/apps/resources/urls.py +++ b/pydis_site/apps/resources/urls.py @@ -31,6 +31,7 @@ VALID_RESOURCE_TYPES = [ def get_all_pages() -> typing.Iterator[dict[str, str]]: + """Get all the valid options for the resource_type path selector.""" for resource_type in VALID_RESOURCE_TYPES: yield {"resource_type": resource_type} diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css new file mode 100644 index 00000000..7b76d8d5 --- /dev/null +++ b/pydis_site/static/css/collapsibles.css @@ -0,0 +1,12 @@ +.collapsible { + cursor: pointer; + width: 100%; + border: none; + outline: none; +} + +.collapsible-content { + overflow: hidden; + max-height: 0; + transition: max-height 0.2s ease-out; +} \ No newline at end of file diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 2d4bd325..d831f86d 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -77,16 +77,3 @@ ul.menu-list.toc { li img { margin-top: 0.5em; } - -.collapsible { - cursor: pointer; - width: 100%; - border: none; - outline: none; -} - -.collapsible-content { - overflow: hidden; - max-height: 0; - transition: max-height 0.2s ease-out; -} diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js new file mode 100644 index 00000000..366a033c --- /dev/null +++ b/pydis_site/static/js/collapsibles.js @@ -0,0 +1,13 @@ +document.addEventListener("DOMContentLoaded", () => { + const headers = document.getElementsByClassName("collapsible"); + for (const header of headers) { + header.addEventListener("click", () => { + var content = header.nextElementSibling; + if (content.style.maxHeight){ + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + "px"; + } + }); + } +}); diff --git a/pydis_site/static/js/content/page.js b/pydis_site/static/js/content/page.js deleted file mode 100644 index 366a033c..00000000 --- a/pydis_site/static/js/content/page.js +++ /dev/null @@ -1,13 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const headers = document.getElementsByClassName("collapsible"); - for (const header of headers) { - header.addEventListener("click", () => { - var content = header.nextElementSibling; - if (content.style.maxHeight){ - content.style.maxHeight = null; - } else { - content.style.maxHeight = content.scrollHeight + "px"; - } - }); - } -}); diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js deleted file mode 100644 index 718e1e88..00000000 --- a/pydis_site/static/js/resources.js +++ /dev/null @@ -1,236 +0,0 @@ -"use strict"; - -// Filters that are currently selected -var activeFilters = { - topics: [], - type: [], - "payment-tiers": [], - difficulty: [] -}; - -function addFilter(filterName, filterItem) { - // Push the filter into the stack - var filterIndex = activeFilters[filterName].indexOf(filterItem); - if (filterIndex === -1) { - activeFilters[filterName].push(filterItem); - } - updateUI(); - - // Show a corresponding filter box tag - $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show(); - - // Make corresponding resource tags active - $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active"); - - // Hide the "No filters selected" tag. - $(".no-tags-selected.tag").hide(); -} - -function removeFilter(filterName, filterItem) { - // Remove the filter from the stack - var filterIndex = activeFilters[filterName].indexOf(filterItem); - if (filterIndex !== -1) { - activeFilters[filterName].splice(filterIndex, 1); - } - updateUI(); - - // Hide the corresponding filter box tag - $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide(); - - // Make corresponding resource tags inactive - $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active"); - - // Show "No filters selected" tag, if there are no filters active - if (noFilters()) { - $(".no-tags-selected.tag").show(); - } -} - -/* Check if there are no filters */ -function noFilters() { - return ( - activeFilters.topics.length === 0 && - activeFilters.type.length === 0 && - activeFilters["payment-tiers"].length === 0 && - activeFilters.difficulty.length === 0 - ); -} - -/* Get the params out of the URL and use them. This is run when the page loads. */ -function deserializeURLParams() { - let searchParams = new window.URLSearchParams(window.location.search); - - // Work through the parameters and add them to the filter object - $.each(Object.keys(activeFilters), function(_, filterType) { - let paramFilterContent = searchParams.get(filterType); - - if (paramFilterContent !== null) { - // We use split here because we always want an array, not a string. - let paramFilterArray = paramFilterContent.split(","); - activeFilters[filterType] = paramFilterArray; - - // Update the corresponding filter UI, so it reflects the internal state. - $(paramFilterArray).each(function(_, filter) { - let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`); - let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); - let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); - checkbox.prop("checked", true); - filterTag.show(); - resourceTags.addClass("active"); - }); - } - }); -} - -/* Update the URL with new parameters */ -function updateURL() { - // If there's nothing in the filters, we don't want anything in the URL. - if (noFilters()) { - window.history.replaceState(null, document.title, './'); - return; - } - - // Iterate through and get rid of empty ones - let searchParams = new URLSearchParams(activeFilters); - $.each(activeFilters, function(filterType, filters) { - if (filters.length === 0) { - searchParams.delete(filterType); - } - }); - - // Now update the URL - window.history.replaceState(null, document.title, `?${searchParams.toString()}`); -} - -/* Update the resources to match 'active_filters' */ -function updateUI() { - let resources = $('.resource-box'); - let filterTags = $('.filter-box-tag'); - - // Update the URL to match the new filters. - updateURL(); - - // If there's nothing in the filters, show everything and return. - if (noFilters()) { - resources.show(); - filterTags.hide(); - return; - } - - // Otherwise, hide everything and then filter the resources to decide what to show. - let hasMatches = false; - resources.hide(); - resources.filter(function() { - let validation = { - topics: false, - type: false, - 'payment-tiers': false, - difficulty: false - }; - let resourceBox = $(this); - - // Validate the filters - $.each(activeFilters, function(filterType, filters) { - // If the filter list is empty, this passes validation. - if (filters.length === 0) { - validation[filterType] = true; - return; - } - - // Otherwise, we need to check if one of the classes exist. - $.each(filters, function(index, filter) { - if (resourceBox.hasClass(`${filterType}-${filter}`)) { - validation[filterType] = true; - } - }); - }); - - // If validation passes, show the resource. - if (Object.values(validation).every(Boolean)) { - hasMatches = true; - return true; - } else { - return false; - } - }).show(); - - // If there are no matches, show the no matches message - if (!hasMatches) { - $(".no-resources-found").show(); - } else { - $(".no-resources-found").hide(); - } -} - -// Executed when the page has finished loading. -document.addEventListener("DOMContentLoaded", function () { - /* Check if the user has navigated to one of the old resource pages, - like pydis.com/resources/communities. In this case, we'll rewrite - the URL before we do anything else. */ - let resourceTypeInput = $("#resource-type-input").val(); - if (resourceTypeInput !== "None") { - window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`); - } - - // Update the filters on page load to reflect URL parameters. - $('.filter-box-tag').hide(); - deserializeURLParams(); - updateUI(); - - // If you collapse or uncollapse a filter group, swap the icon. - $('button.collapsible').click(function() { - let icon = $(this).find(".card-header-icon i"); - - if ($(icon).hasClass("fa-window-minimize")) { - $(icon).removeClass(["far", "fa-window-minimize"]); - $(icon).addClass(["fas", "fa-angle-down"]); - } else { - $(icon).removeClass(["fas", "fa-angle-down"]); - $(icon).addClass(["far", "fa-window-minimize"]); - } - }); - - // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox. - $('.filter-panel').click(function() { - let checkbox = $(this).find(".filter-checkbox"); - checkbox.prop("checked", !checkbox.prop("checked")); - checkbox.change(); - }); - - // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox. - $('.filter-box-tag').click(function() { - let filterItem = this.dataset.filterItem; - let filterName = this.dataset.filterName; - let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); - - removeFilter(filterName, filterItem); - checkbox.prop("checked", false); - }); - - // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox. - $('.resource-tag').click(function() { - let filterItem = this.dataset.filterItem; - let filterName = this.dataset.filterName; - let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); - - if (!$(this).hasClass("active")) { - addFilter(filterName, filterItem); - checkbox.prop("checked", true); - } else { - removeFilter(filterName, filterItem); - checkbox.prop("checked", false); - } - }); - - // When checkboxes are toggled, trigger a filter update. - $('.filter-checkbox').change(function () { - let filterItem = this.dataset.filterItem; - let filterName = this.dataset.filterName; - - if (this.checked) { - addFilter(filterName, filterItem); - } else { - removeFilter(filterName, filterItem); - } - }); -}); diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js new file mode 100644 index 00000000..718e1e88 --- /dev/null +++ b/pydis_site/static/js/resources/resources.js @@ -0,0 +1,236 @@ +"use strict"; + +// Filters that are currently selected +var activeFilters = { + topics: [], + type: [], + "payment-tiers": [], + difficulty: [] +}; + +function addFilter(filterName, filterItem) { + // Push the filter into the stack + var filterIndex = activeFilters[filterName].indexOf(filterItem); + if (filterIndex === -1) { + activeFilters[filterName].push(filterItem); + } + updateUI(); + + // Show a corresponding filter box tag + $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show(); + + // Make corresponding resource tags active + $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active"); + + // Hide the "No filters selected" tag. + $(".no-tags-selected.tag").hide(); +} + +function removeFilter(filterName, filterItem) { + // Remove the filter from the stack + var filterIndex = activeFilters[filterName].indexOf(filterItem); + if (filterIndex !== -1) { + activeFilters[filterName].splice(filterIndex, 1); + } + updateUI(); + + // Hide the corresponding filter box tag + $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide(); + + // Make corresponding resource tags inactive + $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active"); + + // Show "No filters selected" tag, if there are no filters active + if (noFilters()) { + $(".no-tags-selected.tag").show(); + } +} + +/* Check if there are no filters */ +function noFilters() { + return ( + activeFilters.topics.length === 0 && + activeFilters.type.length === 0 && + activeFilters["payment-tiers"].length === 0 && + activeFilters.difficulty.length === 0 + ); +} + +/* Get the params out of the URL and use them. This is run when the page loads. */ +function deserializeURLParams() { + let searchParams = new window.URLSearchParams(window.location.search); + + // Work through the parameters and add them to the filter object + $.each(Object.keys(activeFilters), function(_, filterType) { + let paramFilterContent = searchParams.get(filterType); + + if (paramFilterContent !== null) { + // We use split here because we always want an array, not a string. + let paramFilterArray = paramFilterContent.split(","); + activeFilters[filterType] = paramFilterArray; + + // Update the corresponding filter UI, so it reflects the internal state. + $(paramFilterArray).each(function(_, filter) { + let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`); + let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); + let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); + checkbox.prop("checked", true); + filterTag.show(); + resourceTags.addClass("active"); + }); + } + }); +} + +/* Update the URL with new parameters */ +function updateURL() { + // If there's nothing in the filters, we don't want anything in the URL. + if (noFilters()) { + window.history.replaceState(null, document.title, './'); + return; + } + + // Iterate through and get rid of empty ones + let searchParams = new URLSearchParams(activeFilters); + $.each(activeFilters, function(filterType, filters) { + if (filters.length === 0) { + searchParams.delete(filterType); + } + }); + + // Now update the URL + window.history.replaceState(null, document.title, `?${searchParams.toString()}`); +} + +/* Update the resources to match 'active_filters' */ +function updateUI() { + let resources = $('.resource-box'); + let filterTags = $('.filter-box-tag'); + + // Update the URL to match the new filters. + updateURL(); + + // If there's nothing in the filters, show everything and return. + if (noFilters()) { + resources.show(); + filterTags.hide(); + return; + } + + // Otherwise, hide everything and then filter the resources to decide what to show. + let hasMatches = false; + resources.hide(); + resources.filter(function() { + let validation = { + topics: false, + type: false, + 'payment-tiers': false, + difficulty: false + }; + let resourceBox = $(this); + + // Validate the filters + $.each(activeFilters, function(filterType, filters) { + // If the filter list is empty, this passes validation. + if (filters.length === 0) { + validation[filterType] = true; + return; + } + + // Otherwise, we need to check if one of the classes exist. + $.each(filters, function(index, filter) { + if (resourceBox.hasClass(`${filterType}-${filter}`)) { + validation[filterType] = true; + } + }); + }); + + // If validation passes, show the resource. + if (Object.values(validation).every(Boolean)) { + hasMatches = true; + return true; + } else { + return false; + } + }).show(); + + // If there are no matches, show the no matches message + if (!hasMatches) { + $(".no-resources-found").show(); + } else { + $(".no-resources-found").hide(); + } +} + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", function () { + /* Check if the user has navigated to one of the old resource pages, + like pydis.com/resources/communities. In this case, we'll rewrite + the URL before we do anything else. */ + let resourceTypeInput = $("#resource-type-input").val(); + if (resourceTypeInput !== "None") { + window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`); + } + + // Update the filters on page load to reflect URL parameters. + $('.filter-box-tag').hide(); + deserializeURLParams(); + updateUI(); + + // If you collapse or uncollapse a filter group, swap the icon. + $('button.collapsible').click(function() { + let icon = $(this).find(".card-header-icon i"); + + if ($(icon).hasClass("fa-window-minimize")) { + $(icon).removeClass(["far", "fa-window-minimize"]); + $(icon).addClass(["fas", "fa-angle-down"]); + } else { + $(icon).removeClass(["fas", "fa-angle-down"]); + $(icon).addClass(["far", "fa-window-minimize"]); + } + }); + + // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox. + $('.filter-panel').click(function() { + let checkbox = $(this).find(".filter-checkbox"); + checkbox.prop("checked", !checkbox.prop("checked")); + checkbox.change(); + }); + + // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox. + $('.filter-box-tag').click(function() { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); + + removeFilter(filterName, filterItem); + checkbox.prop("checked", false); + }); + + // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox. + $('.resource-tag').click(function() { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`); + + if (!$(this).hasClass("active")) { + addFilter(filterName, filterItem); + checkbox.prop("checked", true); + } else { + removeFilter(filterName, filterItem); + checkbox.prop("checked", false); + } + }); + + // When checkboxes are toggled, trigger a filter update. + $('.filter-checkbox').change(function () { + let filterItem = this.dataset.filterItem; + let filterName = this.dataset.filterName; + + if (this.checked) { + addFilter(filterName, filterItem); + } else { + removeFilter(filterName, filterItem); + } + }); +}); 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 @@ - + + {% endblock %} {% block content %} diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index c3881092..80577c2b 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -7,10 +7,10 @@ {% block title %}Resources{% endblock %} {% block head %} - + - - + + {% endblock %} {% block content %} -- cgit v1.2.3 From ca45357255f5957cf779c109fc24e83de904a195 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 20:25:34 +0100 Subject: Collapse category headers on load for mobile only. --- pydis_site/static/css/resources/resources.css | 8 ++++++++ pydis_site/static/js/resources/resources.js | 13 ++++++++++++- pydis_site/templates/resources/resources.html | 2 +- 3 files changed, 21 insertions(+), 2 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 59f8b78e..b24fcb5b 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -198,4 +198,12 @@ span.resource-tag.active.has-background-info-light { padding-top: 4px; padding-bottom: 4px; } +} + +/* Disable transitions */ +.no-transition { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + transition: none !important; } \ No newline at end of file diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js index 718e1e88..44d4db5c 100644 --- a/pydis_site/static/js/resources/resources.js +++ b/pydis_site/static/js/resources/resources.js @@ -178,7 +178,7 @@ document.addEventListener("DOMContentLoaded", function () { updateUI(); // If you collapse or uncollapse a filter group, swap the icon. - $('button.collapsible').click(function() { + $('button.collapsible').on("click", function() { let icon = $(this).find(".card-header-icon i"); if ($(icon).hasClass("fa-window-minimize")) { @@ -190,6 +190,17 @@ document.addEventListener("DOMContentLoaded", function () { } }); + // If this is a mobile device, collapse the categories to win back some screen real estate. + if (screen.width < 480) { + let categoryHeaders = $(".filter-category-header .collapsible-content"); + let icons = $('.filter-category-header button .card-header-icon i'); + categoryHeaders.addClass("no-transition"); + categoryHeaders.css("max-height", 0); + icons.removeClass(["far", "fa-window-minimize"]); + icons.addClass(["fas", "fa-angle-down"]); + categoryHeaders.removeClass("no-transition"); + } + // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox. $('.filter-panel').click(function() { let checkbox = $(this).find(".filter-checkbox"); diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 80577c2b..a7b25f5c 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -104,7 +104,7 @@ {% if filter_data.hidden %}
{% else %} -
+
{% endif %}
{% for filter_item in filter_data.filters %} -- cgit v1.2.3 From b07f1c9c268f96ea031531a3d1086fa6b694b4ba Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 30 Jan 2022 20:45:23 +0100 Subject: Kaizen: Clean up some indentation. --- pydis_site/templates/resources/resources.html | 34 +++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index a7b25f5c..dcf520f6 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -106,23 +106,23 @@ {% else %}
{% endif %} -
- {% for filter_item in filter_data.filters %} - - - - {% endfor %} -
-
-
+
+ {% for filter_item in filter_data.filters %} + + + + {% endfor %} +
+
+
{% endfor %}
-- cgit v1.2.3 From 8726a61b965988b30a7f28416a22d8c807177436 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Mon, 31 Jan 2022 11:51:55 +0100 Subject: Shrink and center the duck pond 404. --- pydis_site/static/css/resources/resources.css | 10 +++++----- pydis_site/static/images/resources/duck_pond_404.jpg | Bin 0 -> 123824 bytes pydis_site/static/images/resources/duck_pond_404.png | Bin 2371374 -> 0 bytes pydis_site/templates/resources/resources.html | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 pydis_site/static/images/resources/duck_pond_404.jpg delete mode 100644 pydis_site/static/images/resources/duck_pond_404.png (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index b24fcb5b..55284605 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -64,15 +64,15 @@ display: block; /* Center the 404 div */ .no-resources-found { - display: flex; + display: none; flex-direction: column; align-items: center; + margin-top: 1em; } -/* Hide the no resources h2 by default */ -.no-resources-found { - display: none; - margin-top: 1em; +/* Make sure jQuery will use flex when setting `show()` again. */ +.no-resources-found[style*='display: block'] { + display: flex !important; } /* Disable clicking on the checkbox itself. */ diff --git a/pydis_site/static/images/resources/duck_pond_404.jpg b/pydis_site/static/images/resources/duck_pond_404.jpg new file mode 100644 index 00000000..29bcf1d6 Binary files /dev/null and b/pydis_site/static/images/resources/duck_pond_404.jpg differ diff --git a/pydis_site/static/images/resources/duck_pond_404.png b/pydis_site/static/images/resources/duck_pond_404.png deleted file mode 100644 index 3aed4d62..00000000 Binary files a/pydis_site/static/images/resources/duck_pond_404.png and /dev/null differ diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index dcf520f6..2fb0f543 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -132,7 +132,7 @@ {# Message to display when there are no hits #}

No matching resources found!

- +
-- cgit v1.2.3 From 46702b73cc8a54409da633e4492846f72bb5a338 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Mon, 31 Jan 2022 12:07:04 +0100 Subject: Make the resource link icons a size smaller. We also add a little breathing room to the tag container, so that it doesn't encroach on the personal space of the icons. --- pydis_site/static/css/resources/resources.css | 5 +++++ pydis_site/templates/resources/resource_box.html | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 55284605..3b235a05 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -111,6 +111,11 @@ span.filter-box-tag[style*='display: block'] { user-select: none; } +/* Give the resource tags a bit of breathing room */ +.resource-tag-container { + padding-left: 1.5rem; +} + /* When hovering tags, brighten them a bit. */ .resource-tag:hover, .filter-box-tag:hover { diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index 8f634333..0ba8b0ec 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -16,24 +16,24 @@
{# Add primary link #} {% if 'title_url' in resource %} - + - + {% endif %} {# Add all additional icon #} {% for icon in resource.urls %} - + - + {% endfor %} {# Tags #} -
+
{% for tag in resource.tags.topics %} Date: Mon, 31 Jan 2022 16:05:13 +0100 Subject: Added margins and max-width to filtering column. --- pydis_site/static/css/resources/resources.css | 20 ++++++++++++++------ pydis_site/templates/resources/resources.html | 4 ++-- 2 files changed, 16 insertions(+), 8 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 2465e9dc..26ddc14e 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -163,6 +163,14 @@ span.resource-tag.active { outline-style: solid; } +/* Disable transitions */ +.no-transition { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + transition: none !important; +} + /* Make filter tags sparkle when selected! */ @keyframes glow_success { from { box-shadow: 0 0 2px 2px #aef4af; } @@ -216,10 +224,10 @@ span.resource-tag.active.has-background-info-light { } } -/* Disable transitions */ -.no-transition { - -webkit-transition: none !important; - -moz-transition: none !important; - -o-transition: none !important; - transition: none !important; +/* Constrain the width of the filterbox */ +@media screen and (min-width: 769px) { + .filtering-column { + max-width: 25rem; + min-width: 18rem; + } } \ No newline at end of file diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 2fb0f543..13bba1f2 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -17,9 +17,9 @@ {% include "base/navbar.html" %}
-
+
{# Filtering toolbox #} -
+
{% endblock %} - - -- cgit v1.2.3 From 24edd0ada26af34e946965d5692b6a35b7622ef9 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Mon, 31 Jan 2022 22:16:20 +0100 Subject: Add a button for removing all active filters. --- pydis_site/static/css/resources/resources.css | 21 ++++- pydis_site/static/js/resources/resources.js | 67 +++++++++------ pydis_site/templates/resources/resources.html | 118 ++++++++++++++------------ 3 files changed, 123 insertions(+), 83 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 16226936..2fb3a9b5 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -97,12 +97,29 @@ i.is-primary { color: #7289da; } -/* A little space around the filter card, please! */ +/* A little space above the filter card, please! */ .filter-tags { padding-bottom: .5em; - padding-right: .5em; } +/* Style the close all filters button */ +.close-filters-button { + margin-left: auto; + display:none; +} +.close-filters-button a { + height: fit-content; + width: fit-content; + margin-right: 6px; +} +.close-filters-button a i { + color: #939bb3; +} +.close-filters-button a i:hover { + filter: brightness(115%); +} + + /* Set default display to inline-flex, for centering. */ span.filter-box-tag { display: none; diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js index 0e951c38..8627a359 100644 --- a/pydis_site/static/js/resources/resources.js +++ b/pydis_site/static/js/resources/resources.js @@ -8,42 +8,33 @@ var activeFilters = { difficulty: [] }; +/* Add a filter, and update the UI */ function addFilter(filterName, filterItem) { - // Push the filter into the stack var filterIndex = activeFilters[filterName].indexOf(filterItem); if (filterIndex === -1) { activeFilters[filterName].push(filterItem); } updateUI(); +} - // Show a corresponding filter box tag - $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show(); - - // Make corresponding resource tags active - $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active"); - - // Hide the "No filters selected" tag. - $(".no-tags-selected.tag").hide(); +/* Remove all filters, and update the UI */ +function removeAllFilters() { + activeFilters = { + topics: [], + type: [], + "payment-tiers": [], + difficulty: [] + }; + updateUI(); } +/* Remove a filter, and update the UI */ function removeFilter(filterName, filterItem) { - // Remove the filter from the stack var filterIndex = activeFilters[filterName].indexOf(filterItem); if (filterIndex !== -1) { activeFilters[filterName].splice(filterIndex, 1); } updateUI(); - - // Hide the corresponding filter box tag - $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide(); - - // Make corresponding resource tags inactive - $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active"); - - // Show "No filters selected" tag, if there are no filters active - if (noFilters()) { - $(".no-tags-selected.tag").show(); - } } /* Check if there are no filters */ @@ -76,7 +67,7 @@ function deserializeURLParams() { window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; } else if (String(filter) === "sneakers" && filterType === "topics") { window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI"; - } else if (validFilters[filterType].includes(String(filter))) { + } else if (validFilters.hasOwnProperty(filterType) && validFilters[filterType].includes(String(filter))) { let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`); let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`); @@ -91,9 +82,10 @@ function deserializeURLParams() { // Ditch all the params from the URL, and recalculate the URL params updateURL(); - // If we've added a filter, hide the no filters tag. + // If we've added a filter, hide stuff if (filterAdded) { $(".no-tags-selected.tag").hide(); + $(".close-filters-button").show(); } } }); @@ -123,15 +115,36 @@ function updateURL() { function updateUI() { let resources = $('.resource-box'); let filterTags = $('.filter-box-tag'); + let noTagsSelected = $(".no-tags-selected.tag"); + let closeFiltersButton = $(".close-filters-button"); // Update the URL to match the new filters. updateURL(); - // If there's nothing in the filters, show everything and return. + // If there's nothing in the filters, we can return early. if (noFilters()) { resources.show(); filterTags.hide(); + noTagsSelected.show(); + closeFiltersButton.hide(); + $(`.filter-checkbox:checked`).prop("checked", false) return; + } else { + $.each(activeFilters, function(filterType, filters) { + $.each(filters, function(index, filter) { + // Show a corresponding filter box tag + $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).show(); + + // Make corresponding resource tags active + $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).addClass("active"); + + // Hide the "No filters selected" tag. + noTagsSelected.hide(); + + // Show the close filters button + closeFiltersButton.show(); + }); + }); } // Otherwise, hide everything and then filter the resources to decide what to show. @@ -147,7 +160,6 @@ function updateUI() { let resourceBox = $(this); // Validate the filters - $.each(activeFilters, function(filterType, filters) { // If the filter list is empty, this passes validation. if (filters.length === 0) { @@ -256,6 +268,11 @@ document.addEventListener("DOMContentLoaded", function () { } }); + // When you click the little gray x, remove all filters. + $(".close-filters-button").on("click", function() { + removeAllFilters(); + }); + // When checkboxes are toggled, trigger a filter update. $('.filter-checkbox').on("change", function (event) { let filterItem = this.dataset.filterItem; diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 4b7e9040..cebaace2 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -31,64 +31,70 @@ {# Filter box tags #}
-
- {# A little x in the top right, visible only when filters are active, which removes all filters. #} - - - {# A filter tag for when there are no filters active #} - - - No filters selected - +
+
+ {# A filter tag for when there are no filters active #} + + + No filters selected + - {% for filter_name, filter_data in filters.items %} - {% for filter_item in filter_data.filters %} - {% if filter_name == "Difficulty" %} - - - {{ filter_item|title }} - - - {% endif %} - {% if filter_name == "Type" %} - - - {{ filter_item|title }} - - - {% endif %} - {% if filter_name == "Payment tiers" %} - - - {{ filter_item|title }} - - - {% endif %} - {% if filter_name == "Topics" %} - - - {{ filter_item|title }} - - - {% endif %} + {% for filter_name, filter_data in filters.items %} + {% for filter_item in filter_data.filters %} + {% if filter_name == "Difficulty" %} + + + {{ filter_item|title }} + + + {% endif %} + {% if filter_name == "Type" %} + + + {{ filter_item|title }} + + + {% endif %} + {% if filter_name == "Payment tiers" %} + + + {{ filter_item|title }} + + + {% endif %} + {% if filter_name == "Topics" %} + + + {{ filter_item|title }} + + + {% endif %} + {% endfor %} {% endfor %} - {% endfor %} +
+
+ {# A little x in the top right, visible only when filters are active, which removes all filters. #} + + + + +
-- cgit v1.2.3 From d31340f8abeabc5df1c778d7d8eae4d0806fad0e Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Tue, 1 Feb 2022 02:13:34 +0100 Subject: Fix bug where transition wouldn't work on first collapse. --- pydis_site/static/css/collapsibles.css | 6 +++++- pydis_site/static/js/collapsibles.js | 6 +----- pydis_site/static/js/resources/resources.js | 7 ++++--- pydis_site/templates/resources/resources.html | 4 ++-- 4 files changed, 12 insertions(+), 11 deletions(-) (limited to 'pydis_site/templates') diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css index 8fdd1f12..d35e77ea 100644 --- a/pydis_site/static/css/collapsibles.css +++ b/pydis_site/static/css/collapsibles.css @@ -6,7 +6,11 @@ } .collapsible-content { + max-height: 40em; + transition: max-height 0.3s ease-out; +} + +.collapsible-content.collapsed { overflow: hidden; max-height: 0; - transition: max-height 0.2s ease-out; } diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js index 366a033c..d12d9f86 100644 --- a/pydis_site/static/js/collapsibles.js +++ b/pydis_site/static/js/collapsibles.js @@ -3,11 +3,7 @@ document.addEventListener("DOMContentLoaded", () => { for (const header of headers) { header.addEventListener("click", () => { var content = header.nextElementSibling; - if (content.style.maxHeight){ - content.style.maxHeight = null; - } else { - content.style.maxHeight = content.scrollHeight + "px"; - } + content.classList.toggle('collapsed'); }); } }); diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js index bffb5e91..00bc6ad8 100644 --- a/pydis_site/static/js/resources/resources.js +++ b/pydis_site/static/js/resources/resources.js @@ -234,11 +234,12 @@ document.addEventListener("DOMContentLoaded", function () { if (screen.width < 480) { let categoryHeaders = $(".filter-category-header .collapsible-content"); let icons = $('.filter-category-header button .card-header-icon i'); - categoryHeaders.addClass("no-transition"); - categoryHeaders.css("max-height", ""); + categoryHeaders.addClass("no-transition collapsed"); icons.removeClass(["far", "fa-window-minimize"]); icons.addClass(["fas", "fa-angle-down"]); - categoryHeaders.removeClass("no-transition"); + + // Wait 10ms before removing this class, or else the transition will animate due to a race condition. + setTimeout(() => { categoryHeaders.removeClass("no-transition"); }, 10); } // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox. diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index cebaace2..c221c8a3 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -116,9 +116,9 @@ {# Checkboxes #} {% if filter_data.hidden %} -
+