Some work towards fixed navigation

3 files changed, 100 insertions, 70 deletions

diff --git a/pydis_site/templates/wiki/article.html b/pydis_site/templates/wiki/article.html
index 65877068..03c007e6 100644
--- a/pydis_site/templates/wiki/article.html
+++ b/pydis_site/templates/wiki/article.html
@@ -4,37 +4,37 @@
 
 {% block wiki_pagetitle %}{{ article.current_revision.title }}{% endblock %}
 
+{% block wiki_navbar %}
+  {% include "wiki/includes/article_menu.html" %}
+{% endblock %}
+
 {% block wiki_breadcrumbs %}
-{% include "wiki/includes/breadcrumbs.html" %}
+  {% include "wiki/includes/breadcrumbs.html" %}
 {% endblock %}
 
 {% block wiki_contents %}
-
   <div id="article-container">
-    <ul class="nav nav-pills" id="article-menu">
-      <li class="pull-left" id="article-title-li">
-        <h1 id="article-title">
-          {{ article.current_revision.title }}
-          <small style="font-size: 14px;">
-            {% if urlpath.parent %}
-            <a href="{% url 'wiki:get' path=urlpath.path %}"><span class="fa fa-bookmark"></span> {{ urlpath.slug }}</a>
-            {% endif %}
-            {% if article.current_revision.locked %}
-              <span class="fa fa-lock"></span> {% trans "locked" %}
-            {% endif %}
-          </small>
-        </h1>
-      </li>
-      {% include "wiki/includes/article_menu.html" %}
-    </ul>
+    <h1 id="article-title">
+      {{ article.current_revision.title }}
+      <small style="font-size: 14px;">
+        {% if urlpath.parent %}
+          <a href="{% url 'wiki:get' path=urlpath.path %}"><span class="fa fa-bookmark"></span> {{ urlpath.slug }}</a>
+        {% endif %}
+
+        {% if article.current_revision.locked %}
+          <span class="icon">
+            <i class="fas fa-lock"></i>
+          </span> locked
+        {% endif %}
+      </small>
+    </h1>
     <div>
       {% block wiki_contents_tab %}
       {% endblock %}
     </div>
   </div>
-
 {% endblock %}
 
 {% block wiki_footer_prepend %}
-  <p style="margin-bottom: 10px;"><em>{% trans "This article was last modified:" %} {{ article.current_revision.modified }}</em></p>
+  <p style="margin-bottom: 10px;"><em>This article was last modified: {{ article.current_revision.modified }}</em></p>
 {% endblock %}
diff --git a/pydis_site/templates/wiki/base.html b/pydis_site/templates/wiki/base.html
index cbfecf82..1affbe39 100644
--- a/pydis_site/templates/wiki/base.html
+++ b/pydis_site/templates/wiki/base.html
@@ -19,10 +19,11 @@
 {% block content %}
   {% include "base/navbar.html" with active_item=True dropdowns=True icon_weight="far" use_logo=True %}
 
-  {% block wiki_body %}
-    {% block wiki_navbar %}
+  {% block wiki_navbar %}
+
+  {% endblock %}
 
-    {% endblock %}
+  {% block wiki_body %}
 
     <section class="section">
       <div class="container">
diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html
index 9a83327b..7cf23a71 100644
--- a/pydis_site/templates/wiki/includes/article_menu.html
+++ b/pydis_site/templates/wiki/includes/article_menu.html
@@ -1,53 +1,82 @@
 {% load i18n wiki_tags %}
 
 {% with selected_tab as selected %}
+  <nav class="navbar is-light" role="navigation" aria-label="wiki navigation">
+    <div class="container">
+      <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>
 
-<li class="pull-right{% if selected == "settings" %} active{% endif %}">
-  {% if not user.is_anonymous %}
-  <a href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}">
-    <span class="fa fa-wrench"></span>
-    <span class="hidden-xs">{% trans "Settings" %}</span>
-  </a>
-  {% endif %}
-</li>
-
-{% for plugin in article_tabs %}
-  <li class="pull-right{% if selected == plugin.slug %} active{% endif %}">
-    <a href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}">
-      <span class="{{ plugin.article_tab.1 }}"></span>
-      <span class="hidden-xs">{{ plugin.article_tab.0 }}</span>
-    </a>
-  </li>
-{% endfor %}
-
-<li class="pull-right{% if selected == "history" %} active{% endif %}">
-  <a href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}">
-    <span class="fa fa-clock-o"></span>
-    <span class="hidden-xs">{% trans "Changes" %}</span>
-  </a>
-</li>
-
-{% if article|can_write:user and not article.current_revision.locked %}
-<li class="pull-right{% if selected == "edit" %} active{% endif %}">
-  <a href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}">
-    <span class="fa fa-edit"></span>
-    <span class="hidden-xs">{% trans "Edit" %}</span>
-  </a>
-</li>
-{% else %}
-<li class="pull-right{% if selected == "source" %} active{% endif %}">
-  <a href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}">
-    <span class="fa fa-lock"></span>
-    <span class="hidden-xs">{% trans "View Source" %}</span>
-  </a>
-</li>
-{% endif %}
-
-<li class="pull-right{% if selected == "view" %} active{% endif %}">
-  <a href="{% url 'wiki:get' article_id=article.id path=urlpath.path %}">
-    <span class="fa fa-home"></span>
-    <span class="hidden-xs">{% trans "View" %}</span>
-  </a>
-</li>
+      <div class="navbar-menu" id="wiki-menu">
+        {% 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>
+
+            <span>&nbsp;{{ plugin.article_tab.0 }}</span>
+          </a>
+        {% endfor %}
+
+        <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;Changes</span>
+        </a>
+
+        {% 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>
+
+            <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>&nbsp;View Source</span>
+          </a>
+        {% 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-home"></i>
+          </span>
+
+          <span>&nbsp;View</span>
+        </a>
+      </div>
+    </div>
+  </nav>
 
 {% endwith %}