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 | 45 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 206 |
3 files changed, 168 insertions, 85 deletions
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 4b68dd6c..18ff7efa 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..7de9ca18 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -1,6 +1,7 @@ {% load as_icon %} +{% load get_category_icon %} -<div class="box" style="max-width: 800px;"> +<div class="box"> {% if 'title_url' in resource %} <a href="{{ resource.title_url }}"> {% include "resources/resource_box_header.html" %} @@ -11,12 +12,38 @@ <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"> + {# Add primary link #} + {% if 'title_url' in resource %} + <span class="icon is-size-4 is-medium" style="margin: 5px;"> + <a href="{{ resource.title_url }}"> + <i class="fas fa-link is-size-3 resource-icon is-primary"></i> + </a> + </span> + {% endif %} + {# Add all additional icon #} + {% 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 %} + + {# Tags #} + <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..427f417e 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,90 +1,146 @@ {% 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" %} + {% include "base/navbar.html" %} - <section class="section"> - <div class="container"> - <div class="content"> - <h1>Resources</h1> + <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="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="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 }}"> + <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 }}"> + <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="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="column is-flex is-flex-direction-column pl-6"> + <div class="title is-5 pt-2 has-text-centered">Type</div> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="videos" %}"> - <article class="tile is-child box hero is-danger is-bold"> - <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p> - <p class="subtitle is-size-4">Visually engaging</p> - </article> - </a> - </div> - </div> + {% for tag_type in tag_types %} + <div class="field"> + <label class="checkbox ml-0"> + <input class="type" name="type" type="checkbox" value="{{ tag_type }}"> + <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="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="column is-flex is-flex-direction-column pl-6"> + <div class="title is-5 pt-2 has-text-centered">Payment</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> + {% for payment_tier in payment_tiers %} + <div class="field"> + <label class="checkbox ml-0"> + <input class="payment" name="payment" type="checkbox" value="{{ payment_tier }}"> + <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 }}"> + <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 %} {% endblock %} |