diff options
Diffstat (limited to 'pydis_site/templates')
-rw-r--r-- | pydis_site/templates/content/base.html | 5 | ||||
-rw-r--r-- | pydis_site/templates/content/dropdown.html | 34 | ||||
-rw-r--r-- | pydis_site/templates/content/listing.html | 6 | ||||
-rw-r--r-- | pydis_site/templates/content/page.html | 28 |
4 files changed, 61 insertions, 12 deletions
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html index 19eec5d4..21895479 100644 --- a/pydis_site/templates/content/base.html +++ b/pydis_site/templates/content/base.html @@ -14,6 +14,7 @@ <section class="breadcrumb-section section"> <div class="container"> + {# Article breadcrumb #} <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs"> <ul> {% for item in breadcrumb_items %} @@ -22,6 +23,10 @@ <li class="is-active"><a href="#">{{ page_title }}</a></li> </ul> </nav> + {# Sub-Article dropdown for category pages #} + {% if subarticles %} + {% include "content/dropdown.html" %} + {% endif %} </div> </section> diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html new file mode 100644 index 00000000..c9491f3a --- /dev/null +++ b/pydis_site/templates/content/dropdown.html @@ -0,0 +1,34 @@ +<script> + document.addEventListener("DOMContentLoaded", () => { + const dropdown = document.querySelector("#dropdown"); + // Show dropdown menu when clicked + dropdown.addEventListener("click", () => { + dropdown.classList.toggle("is-active"); + }); + + // Hide dropdown menu when anyhere on the page is clicked + document.addEventListener("click", (e) => { + if (!dropdown.contains(e.target) && dropdown.classList.contains("is-active")) { + dropdown.classList.remove("is-active"); + } + }, false); + }); +</script> + +<div class="dropdown is-pulled-right is-right" id="dropdown"> + <div class="dropdown-trigger"> + <a aria-haspopup="true" aria-controls="subarticle-menu"> + <span>Sub-Articles</span> + <span class="icon is-small"> + <i class="fas fa-angle-down" aria-hidden="true"></i> + </span> + </a> + </div> + <div class="dropdown-menu" id="subarticle-menu" role="menu"> + <div class="dropdown-content"> + {% for page in subarticles|dictsort:"name" %} + <a href="{{ page.path }}" class="dropdown-item">{{ page.name }}</a> + {% endfor %} + </div> + </div> +</div> diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html index 6de306b0..ef0ef919 100644 --- a/pydis_site/templates/content/listing.html +++ b/pydis_site/templates/content/listing.html @@ -4,11 +4,11 @@ {% for category, data in categories.items %} <div class="box" style="max-width: 800px;"> <span class="icon is-size-4 is-medium"> - <i class="fas fa-folder is-size-3 is-black has-icon-padding" aria-hidden="true"></i> + <i class="{{ data.icon|default:"fas fa-folder" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i> </span> <a href="{% url "content:page_category" location=path|add:category %}"> - <span class="is-size-4 has-text-weight-bold">{{ data.name }}</span> + <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span> </a> <p class="is-italic">{{ data.description }}</p> </div> @@ -16,7 +16,7 @@ {% for page, data in pages.items %} <div class="box" style="max-width: 800px;"> <span class="icon is-size-4 is-medium"> - <i class="{{ data.icon_class|default:"fab" }} {{ data.icon|default:"fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i> + <i class="{{ data.icon|default:"fab fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i> </span> <a href="{% url "content:page_category" location=path|add:page %}"> <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span> diff --git a/pydis_site/templates/content/page.html b/pydis_site/templates/content/page.html index 06d74208..45aa8221 100644 --- a/pydis_site/templates/content/page.html +++ b/pydis_site/templates/content/page.html @@ -9,20 +9,30 @@ {% endblock %} {% block page_content %} - {% if relevant_links|length > 0 %} + {% if relevant_links or toc %} <div class="columns is-variable is-8"> <div class="column is-two-thirds"> {{ page|safe }} </div> <div class="column"> - <div class="box"> - <p class="menu-label">Relevant links</p> - <ul class="menu-list"> - {% for value, link in relevant_links.items %} - <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li> - {% endfor %} - </ul> - </div> + {% if toc %} + <div class="box"> + <p class="menu-label">Table of Contents</p> + <ul class="menu-list toc"> + {{ toc|safe }} + </ul> + </div> + {% endif %} + {% if relevant_links %} + <div class="box"> + <p class="menu-label">Relevant links</p> + <ul class="menu-list"> + {% for value, link in relevant_links.items %} + <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li> + {% endfor %} + </ul> + </div> + {% endif %} </div> </div> {% else %} |