diff options
Diffstat (limited to 'pydis_site/templates')
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 2 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resource_box.html | 33 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 271 |
3 files changed, 216 insertions, 90 deletions
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index d7cb49b2..11a11e10 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -67,7 +67,7 @@ <a class="navbar-item" href="{% url "resources:index" %}"> Resources </a> - <a class="navbar-item" href="{% url "resources:resources" category="tools" %}"> + <a class="navbar-item" href="{% url "resources:resources" %}"> Tools </a> <a class="navbar-item" href="{% url "events:index" %}"> diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index af7c8d65..671b5736 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 get_category_icon %} <div class="box" style="max-width: 800px;"> {% if 'title_url' in resource %} @@ -11,12 +12,28 @@ <p class="is-italic">{{ resource.description|safe }}</p> - {# Icons #} - {% for icon in resource.urls %} - <span class="icon is-size-4 is-medium" style="margin: 5px;"> - <a href="{{ icon.url }}"> - <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i> - </a> - </span> - {% endfor %} + <div class="is-flex is-align-items-center"> + {# Icons #} + {% for icon in resource.urls %} + <span class="icon is-size-4 is-medium" style="margin: 5px;"> + <a href="{{ icon.url }}"> + <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i> + </a> + </span> + {% endfor %} + <div class="is-flex ml-auto is-flex-wrap-wrap is-justify-content-end"> + {% for tag in resource.tags.topics %} + <span class="tag is-primary is-light ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span> + {% endfor %} + {% for tag in resource.tags.type %} + <span class="tag has-background-success-light has-text-success-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span> + {% endfor %} + {% for tag in resource.tags.payment_tiers %} + <span class="tag has-background-danger-light has-text-danger-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span> + {% endfor %} + {% for tag in resource.tags.complexity %} + <span class="tag has-background-info-light has-text-info-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span> + {% endfor %} + </div> + </div> </div> diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index f1f487cf..e9695fff 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,90 +1,199 @@ {% extends 'base/base.html' %} +{% load as_icon %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} - <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> + <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> + <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}"> {% endblock %} {% block content %} - {% include "base/navbar.html" %} - - <section class="section"> - <div class="container"> - <div class="content"> - <h1>Resources</h1> - - <div class="tile is-ancestor"> - <a class="tile is-parent" href="{% url "content:page_category" location="guides" %}"> - <article class="tile is-child box hero is-primary is-bold"> - <p class="title is-size-1"><i class="fad fa-info-circle" aria-hidden="true"></i> Guides</p> - <p class="subtitle is-size-4">Made by us, for you</p> - </article> - </a> - - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="reading" %}"> - <article class="tile is-child box hero is-black" id="readingBlock"> - <p class="title is-size-1"><i class="fad fa-book-alt" aria-hidden="true"></i> Read</p> - <p class="subtitle is-size-4">Lovingly curated books to explore</p> - </article> - </a> - - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="videos" %}"> - <article class="tile is-child box hero is-danger is-bold"> - <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p> - <p class="subtitle is-size-4">Visually engaging</p> - </article> - </a> - </div> - </div> - - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="interactive" %}"> - <article class="tile is-child box hero is-black" id="interactiveBlock"> - <p class="title is-size-1"><i class="fad fa-code" aria-hidden="true"></i> Try</p> - <p class="subtitle is-size-4">Interactively discover the possibilities</p> - </article> - </a> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="courses" %}"> - <article class="tile is-child box hero is-success is-bold"> - <p class="title is-size-1"><i class="fad fa-graduation-cap" aria-hidden="true"></i> Learn</p> - <p class="subtitle is-size-4">Structured courses with clear goals</p> - </article> - </a> - </div> - </div> - </div> - - <div class="tile is-ancestor"> - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="communities" %}"> - <article class="tile is-child box hero is-black" id="communitiesBlock"> - <p class="title is-size-1"><i class="fad fa-users" aria-hidden="true"></i> Communities</p> - <p class="subtitle is-size-4">Some of our best friends</p> - </article> - </a> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="podcasts" %}"> - <article class="tile is-child box hero is-black" id="podcastsBlock"> - <p class="title is-size-1"><i class="fad fa-podcast" aria-hidden="true"></i> Listen</p> - <p class="subtitle is-size-4">Regular podcasts to follow</p> - </article> - </a> - </div> - </div> - </div> - <a class="tile is-parent" href="{% url "resources:resources" category="tools" %}"> - <article class="tile is-child box hero is-dark"> - <p class="title is-size-1"><i class="fad fa-tools" aria-hidden="true"></i> Tools</p> - <p class="subtitle is-size-4">Things we love to use</p> - </article> - </a> - </div> - </div> - </div> - </section> + {% include "base/navbar.html" %} + + <section class="section"> + <div class="container"> + <div class="content"> + <h1 class="resource-title has-text-centered">Resources</h1> + <hr/> + </div> + <div class="panel is-hidden-mobile"> + <p class="panel-heading has-text-centered">Search Options</p> + + <div class="field"> + <div class="columns"> + <div class="column pl-6 is-two-fifths is-flex is-flex-direction-column"> + <div class="title is-5 pt-2 has-text-centered">Topic</div> + <div class="columns"> + <div class="column"> + {% for topic in topics_1 %} + <div class="field"> + <label class="checkbox"> + <input class="topic" name="topic" type="checkbox" value="{{ topic }}"{% if topic == 'General' %} checked{% endif %}> + <span class="has-text-grey is-size-6">{{ topic }}</span> + </label> + </div> + {% endfor %} + </div> + <div class="column"> + {% for topic in topics_2 %} + <div class="field"> + <label class="checkbox"> + <input class="topic" name="topic" type="checkbox" value="{{ topic }}"{% if topic == 'General' %} checked{% endif %}> + <span class="has-text-grey is-size-6">{{ topic }}</span> + </label> + </div> + {% endfor %} + </div> + </div> + <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto"> + <button onclick="selectAllQueryParams('topic')" class="button is-success is-small">Select All</button> + </span> + </div> + + <div class="column is-flex is-flex-direction-column pl-6"> + <div class="title is-5 pt-2 has-text-centered">Type</div> + + {% for tag_type in tag_types %} + <div class="field"> + <label class="checkbox ml-0"> + <input class="type" name="type" type="checkbox" value="{{ tag_type }}"{% if tag_type == 'Tutorial' %} checked{% endif %}> + <span class="has-text-grey is-size-6">{{ tag_type }}</span> + </label> + </div> + {% endfor %} + <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto"> + <button onclick="selectAllQueryParams('type')" class="button is-success is-small">Select All</button> + </span> + </div> + + <div class="column is-flex is-flex-direction-column pl-6"> + <div class="title is-5 pt-2 has-text-centered">Payment</div> + + {% for payment_tier in payment_tiers %} + <div class="field"> + <label class="checkbox ml-0"> + <input class="payment" name="payment" type="checkbox" value="{{ payment_tier }}"{% if payment_tier == 'Free' %} checked{% endif %}> + <span class="has-text-grey is-size-6">{{ payment_tier }}</span> + </label> + </div> + {% endfor %} + <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto"> + <button onclick="selectAllQueryParams('payment')" class="button is-success is-small">Select All</button> + </span> + </div> + + <div class="column is-flex is-flex-direction-column px-6"> + <div class="title is-5 pt-2 has-text-centered">Level</div> + + {% for complexity in complexities %} + <div class="field"> + <label class="checkbox ml-0"> + <input class="complexity" name="complexity" type="checkbox" value="{{ complexity }}"{% if complexity == 'Beginner' %} checked{% endif %}> + <span class="has-text-grey is-size-6">{{ complexity }}</span> + </label> + </div> + {% endfor %} + <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto"> + <button onclick="selectAllQueryParams('complexity')" class="button is-success is-small">Select All</button> + </span> + </div> + </div> + + <div class="is-flex is-justify-content-center pb-3"> + <span class="control mr-2"> + <button onclick="buildQueryParams()" class="button is-link is-small">Search</button> + </span> + + <span class="is-one-fifth control is-flex is-align-items-end is-justify-content-end mt-auto"> + <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button> + </span> + </div> + </div> + </div> + </section> + + {% if resources|length > 0 %} + <section class="section"> + <div class="container"> + <div class="content is-flex is-justify-content-center"> + <div> + {% for resource in resources %} + {% include "resources/resource_box.html" %} + {% endfor %} + + {% for subcategory in subcategories %} + <h2 id="{{ subcategory.category_info.raw_name }}"> + <a href="{% url "resources:resources" category=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}"> + {{ subcategory.category_info.name }} + </a> + </h2> + <p>{{ subcategory.category_info.description|safe }}</p> + + {% for resource in subcategory.resources %} + {% with category_info=subcategory.category_info %} + {% include "resources/resource_box.html" %} + {% endwith %} + {% endfor %} + {% endfor %} + </div> + </div> + </div> + </section> + {% else %} + <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p> + {% endif %} + +<script> + "use strict"; + 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; + } + }); + }); + } + +</script> {% endblock %} |