Breadcrumb/article menu work

2 files changed, 133 insertions, 116 deletions

diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html
index db62d28d..56762420 100644
--- a/pydis_site/templates/wiki/includes/article_menu.html
+++ b/pydis_site/templates/wiki/includes/article_menu.html
@@ -4,87 +4,79 @@
   <nav class="navbar is-light" role="navigation" aria-label="wiki navigation">
     <div class="container">
       <div class="navbar-brand">
-        <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false">
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-
-      <div class="navbar-menu" id="wiki-menu">
-        <div class="navbar-start">
-          {% block wiki_breadcrumbs %}
-            {% include "wiki/includes/breadcrumbs.html" %}
-          {% endblock %}
-        </div>
-        <div class="navbar-end">
-          {% if not user.is_anonymous %}
-            <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}"
-               href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}"
-            >
-              <span class="icon">
-                <i class="fas fa-wrench"></i>
-              </span>
-
-              <span>&nbsp;Settings</span>
-            </a>
-          {% endif %}
-
-          {% for plugin in article_tabs %}
-            <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}"
-               href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}"
-            >
-              <span class="icon">
-                <i class="{{ plugin.article_tab.1 }}"></i>
-              </span>
+        {% if not user.is_anonymous %}
+          <a class="navbar-item{% if selected == "settings" %} is-active{% endif %}"
+             href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}"
+          >
+            <span class="icon">
+              <i class="fas fa-wrench"></i>
+            </span>
 
-              <span>&nbsp;{{ plugin.article_tab.0 }}</span>
-            </a>
-          {% endfor %}
+            <span class="is-hidden-mobile">&nbsp;Settings</span>
+          </a>
+        {% endif %}
 
-          <a class="navbar-item{% if selected == "history" %} is-active{% endif %}"
-             href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}"
+        {% for plugin in article_tabs %}
+          <a class="navbar-item{% if selected == plugin.slug %} is-active{% endif %}"
+             href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}"
           >
             <span class="icon">
-              <i class="fas fa-clock"></i>
+              <i class="{{ plugin.article_tab.1 }}"></i>
             </span>
 
-            <span>&nbsp;Changes</span>
+            <span class="is-hidden-mobile">&nbsp;{{ plugin.article_tab.0 }}</span>
           </a>
+        {% endfor %}
 
-          {% if article|can_write:user and not article.current_revision.locked %}
-            <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}"
-               href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}"
-            >
-              <span class="icon">
-                <i class="fas fa-edit"></i>
-              </span>
+        <a class="navbar-item{% if selected == "history" %} is-active{% endif %}"
+           href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}"
+        >
+          <span class="icon">
+            <i class="fas fa-clock"></i>
+          </span>
 
-              <span>&nbsp;Edit</span>
-            </a>
-          {% else %}
-            <a class="navbar-item{% if selected == "source" %} is-active{% endif %}"
-               href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}"
-            >
-              <span class="icon">
-                <i class="fas fa-lock"></i>
-              </span>
+          <span class="is-hidden-mobile">&nbsp;Changes</span>
+        </a>
 
-              <span>&nbsp;View Source</span>
-            </a>
-          {% endif %}
+        {% if article|can_write:user and not article.current_revision.locked %}
+          <a class="navbar-item{% if selected == "edit" %} is-active{% endif %}"
+             href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}"
+          >
+            <span class="icon">
+              <i class="fas fa-edit"></i>
+            </span>
 
-          <a class="navbar-item{% if selected == "view" %} is-active{% endif %}"
-             href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}"
+            <span class="is-hidden-mobile">&nbsp;Edit</span>
+          </a>
+        {% else %}
+          <a class="navbar-item{% if selected == "source" %} is-active{% endif %}"
+             href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}"
           >
             <span class="icon">
-              <i class="fas fa-home"></i>
+              <i class="fas fa-book-spells"></i>
             </span>
 
-            <span>&nbsp;View</span>
+            <span class="is-hidden-mobile">&nbsp;View Source</span>
           </a>
-        </div>
+        {% endif %}
+
+        <a class="navbar-item{% if selected == "view" %} is-active{% endif %}"
+           href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}"
+        >
+          <span class="icon">
+            <i class="fas fa-book-open"></i>
+          </span>
+
+          <span class="is-hidden-mobile">&nbsp;View</span>
+        </a>
+
+        <a role="button" class="navbar-burger" data-target="wiki-menu" aria-label="menu" aria-expanded="false">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
       </div>
+
     </div>
   </nav>
 
diff --git a/pydis_site/templates/wiki/includes/breadcrumbs.html b/pydis_site/templates/wiki/includes/breadcrumbs.html
index 5894da07..708edb19 100644
--- a/pydis_site/templates/wiki/includes/breadcrumbs.html
+++ b/pydis_site/templates/wiki/includes/breadcrumbs.html
@@ -1,62 +1,87 @@
-{% load i18n %}
 {% if urlpath and article %}
-  <div class="navbar-item has-dropdown is-hoverable">
-    <a class="navbar-link">Sub-Articles</a>
-
-    <div class="navbar-dropdown">
-      {% if children_slice %}
-        {% for child in children_slice %}
-          <a class="navbar-item" href="{% url 'wiki:get' path=child.path %}">
-            {{ child.article.current_revision.title }}
-          </a>
-        {% endfor %}
+  <section class="section">
+    <div class="container">
+      <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
+        <ul>
+          {% for ancestor in urlpath.cached_ancestors %}
+            <li>
+              <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a>
+            </li>
+          {% endfor %}
+
+          <li class="is-active">
+            <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a>
+          </li>
+        </ul>
+      </nav>
 
-        {% if children_slice_more %}
-          <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
-            ...and more.
+      <div class="dropdown is-pulled-right is-right">
+        <div class="dropdown-trigger">
+          <a aria-haspopup="true" aria-controls="sub-article-dropdown">
+            <span>Sub-Articles</span>
+            <span class="icon">
+              <i class="fas fa-angle-down"></i>
+            </span>
           </a>
-        {% endif %}
+        </div>
+        <div class="dropdown-menu" id="sub-article-dropdown" role="menu">
+          <div class="dropdown-content">
+            {% if children_slice %}
+              {% for child in children_slice %}
+                <a class="dropdown-item" href="{% url 'wiki:get' path=child.path %}">
+                  {{ child.article.current_revision.title }}
+                </a>
+              {% endfor %}
 
-        <hr class="navbar-divider">
-      {% endif %}
+              {% if children_slice_more %}
+                <a class="dropdown-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+                  ...and more.
+                </a>
+              {% endif %}
 
-      <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
-        Browse other articles
-      </a>
-    </div>
-  </div>
+              <hr class="dropdown-divider">
+            {% endif %}
 
-  {% if request.user.is_authenticated %}
-    <div class="navbar-item has-dropdown is-hoverable">
-      <a class="navbar-link">Create Article</a>
+            <a class="dropdown-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+              Browse other articles
+            </a>
+          </div>
+        </div>
+      </div>
 
-      <div class="navbar-dropdown">
-        {% if urlpath.parent %}
-          <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.parent.path %}">
-            At current level
-          </a>
-        {% endif %}
+      {% if request.user.is_authenticated %}
+        <div class="dropdown is-pulled-right is-right">
+          <div class="dropdown-trigger">
+            <a aria-haspopup="true" aria-controls="sub-article-dropdown">
+              <span>Create Article</span>
+              <span class="icon">
+                <i class="fas fa-angle-down"></i>
+              </span>
+              &nbsp;
+            </a>
+          </div>
+          <div class="dropdown-menu" id="sub-article-dropdown" role="menu">
+            <div class="dropdown-content">
+              {% if urlpath.parent %}
+                <a class="dropdown-item" href="{% url 'wiki:create' path=urlpath.parent.path %}">
+                  <span class="icon">
+                    <i class="fas fa-arrow-right"></i>
+                  </span>
+                  <span>At current level</span>
+                </a>
+              {% endif %}
+
+              <a class="dropdown-item" href="{% url 'wiki:create' path=urlpath.path %}">
+                <span class="icon">
+                  <i class="fas fa-arrow-down"></i>
+                </span>
+                <span>Below current level</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      {% endif %}
 
-        <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.path %}">
-          Below current level
-        </a>
-      </div>
     </div>
-  {% endif %}
-
-  <hr class="navbar-divider">
-
-  <div class="navbar-item">
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      {% for ancestor in urlpath.cached_ancestors %}
-        <li>
-          <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a>
-        </li>
-      {% endfor %}
-
-      <li class="active">
-        <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a>
-      </li>
-    </nav>
-  </div>
+  </section>
 {% endif %}