aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/templates
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/templates')
-rw-r--r--pydis_site/templates/content/base.html5
-rw-r--r--pydis_site/templates/content/dropdown.html34
-rw-r--r--pydis_site/templates/content/listing.html6
-rw-r--r--pydis_site/templates/content/page.html28
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 %}