Modals and breadcrumb work

7 files changed, 232 insertions, 209 deletions

diff --git a/pydis_site/templates/wiki/base.html b/pydis_site/templates/wiki/base.html
index 1affbe39..4982fe78 100644
--- a/pydis_site/templates/wiki/base.html
+++ b/pydis_site/templates/wiki/base.html
@@ -17,20 +17,19 @@
 {% endblock %}
 
 {% block content %}
-  {% include "base/navbar.html" with active_item=True dropdowns=True icon_weight="far" use_logo=True %}
+  {% block site_navbar %}
+    {% include "base/navbar.html" with active_item=True dropdowns=True icon_weight="far" use_logo=True %}
+  {% endblock %}
 
   {% block wiki_navbar %}
 
   {% endblock %}
 
   {% block wiki_body %}
-
     <section class="section">
       <div class="container">
         {% wiki_messages %}
 
-        {% block wiki_breadcrumbs %}{% endblock %}
-
         <div class="content">
           {% block wiki_contents %}{% endblock %}
         </div>
@@ -38,7 +37,9 @@
     </section>
   {% endblock %}
 
-  {% include "base/footer.html" %}
+  {% block site_footer %}
+    {% include "base/footer.html" %}
+  {% endblock %}
 
   <script src="{% static "js/wiki/load_editor.js" %}" type="text/javascript"></script>
 {% endblock %}
diff --git a/pydis_site/templates/wiki/edit.html b/pydis_site/templates/wiki/edit.html
index 8d5b61db..1e1caaf7 100644
--- a/pydis_site/templates/wiki/edit.html
+++ b/pydis_site/templates/wiki/edit.html
@@ -1,81 +1,11 @@
 {% extends "wiki/article.html" %}
-{% load wiki_tags i18n sekizai_tags %}
+{% load wiki_tags i18n sekizai_tags static %}
 
 
 {% block wiki_pagetitle %}
   Edit: {{ article.current_revision.title }}
 {% endblock %}
 
-{% block head %}
-  {{ block.super }}
-
-  <script language="javascript">
-    {# I'm sorry this JS sucks, it came with the wiki, just stuck right in here. #}
-
-    $(document).ready(function() {
-      $("#article_edit_form :input").change(function() {
-         $("#article_edit_form").data("changed",true);
-      });
-      if ($("#article_edit_form").find(".alert-danger").length > 0 || $("#article_edit_form").find(".has-error").length > 0 ) {
-        // Set the forms status as "changed" if there was a submission error
-        $("#article_edit_form").data("changed",true);
-      }
-      window.onbeforeunload = confirmOnPageExit;
-      var click_time = 0;
-      $("#article_edit_form").on("submit", function (ev) {
-          now = Date.now();
-          elapsed = now-click_time;
-          click_time = now;
-          if (elapsed < 3000)
-              ev.preventDefault();
-          window.onbeforeunload = null;
-          return true;
-      });
-      $("#id_preview").on("click", function () {
-          $("#previewModal").modal("show");
-          return true;
-      });
-      $("#id_preview_save_changes").on("click", function (ev) {
-          ev.preventDefault();
-          $("#id_save").trigger("click");
-      });
-    });
-
-    var confirmOnPageExit = function (e) {
-      if ($("#article_edit_form").data("changed")) {
-        e = e || window.event;
-        var message = "You have unsaved changes!";
-        // For IE6-8 and Firefox prior to version 4
-        if (e) {
-            e.returnValue = message;
-        }
-        // For Chrome, Safari, IE8+ and Opera 12+
-        return message;
-      } else {
-        // If the form hasn't been changed, don't display the pop-up
-        return;
-      }
-    };
-  </script>
-
-  <script type="text/javascript">
-    $(document).ready( function() {
-      $('.sidebar-form').each(function () {
-        $(this).submit( function() {
-          this.unsaved_article_title.value = $('#id_title').val();
-          this.unsaved_article_content.value = $('#id_content').val();
-        });
-      });
-    });
-  </script>
-
-  <script language="javascript">
-    $(document).ready(function() {
-      $("#id_revision").val('{{ article.current_revision.id }}');
-    });
-  </script>
-{% endblock %}
-
 {% block wiki_contents_tab %}
 
   {% if not user.is_authenticated %}
@@ -144,23 +74,89 @@
 
   {% include "wiki/includes/modals.html" %}
 
-  <div class="modal fade wiki-modal" id="previewModal">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-body">
-          <iframe name="previewWindow" frameborder="0"></iframe>
-        </div>
-        <div class="modal-footer">
-          <a href="#" class="btn btn-default btn-lg" data-dismiss="modal">
-            <span class="fa fa-arrow-circle-left"></span>
-            {% trans "Back to editor" %}
-          </a>
-          <a class="btn btn-lg btn-primary" id="id_preview_save_changes" href="#">
-            <span class="fa fa-check"></span>
-            {% trans "Save changes" %}
-          </a>
-        </div>
+  <div class="modal" id="previewModal">
+    <div class="modal-background"></div>
+    <div class="modal-card" style="height: 50%;">
+      <div class="modal-card-body" style="padding: 0; overflow: hidden;">
+        <iframe name="previewWindow" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+      </div>
+      <div class="modal-card-foot">
+        <button class="button is-primary" aria-label="close">Close</button>
+        <a class="button is-success" id="id_preview_save_changes">Save Changes</a>
       </div>
     </div>
   </div>
+
+  <script src="{% static "js/wiki/modal.js" %}" type="text/javascript"></script>
+
+  <script type="text/javascript">
+    {# I'm sorry this JS sucks, it came with the wiki, just stuck right in here. #}
+
+    $(document).ready(function() {
+      let article_edit_form = $("#article_edit_form");
+      let click_time = 0;
+
+      $("#article_edit_form :input").change(function() {
+         article_edit_form.data("changed",true);
+      });
+
+      if (article_edit_form.find(".alert-danger").length > 0 || article_edit_form.find(".has-error").length > 0 ) {
+        // Set the forms status as "changed" if there was a submission error
+        article_edit_form.data("changed",true);
+      }
+
+      window.onbeforeunload = confirmOnPageExit;
+
+      article_edit_form.on("submit", function (ev) {
+          now = Date.now();
+          elapsed = now-click_time;
+          click_time = now;
+          if (elapsed < 3000)
+              ev.preventDefault();
+          window.onbeforeunload = null;
+          return true;
+      });
+      $("#id_preview").click(function () {
+          open_modal("previewModal");
+          return true;
+      });
+      $("#id_preview_save_changes").on("click", function (ev) {
+          ev.preventDefault();
+          $("#id_save").trigger("click");
+      });
+    });
+
+    var confirmOnPageExit = function (e) {
+      if ($("#article_edit_form").data("changed")) {
+        e = e || window.event;
+        var message = "You have unsaved changes!";
+        // For IE6-8 and Firefox prior to version 4
+        if (e) {
+            e.returnValue = message;
+        }
+        // For Chrome, Safari, IE8+ and Opera 12+
+        return message;
+      } else {
+        // If the form hasn't been changed, don't display the pop-up
+        return;
+      }
+    };
+  </script>
+
+  <script type="text/javascript">
+    $(document).ready( function() {
+      $('.sidebar-form').each(function () {
+        $(this).submit( function() {
+          this.unsaved_article_title.value = $('#id_title').val();
+          this.unsaved_article_content.value = $('#id_content').val();
+        });
+      });
+    });
+  </script>
+
+  <script language="javascript">
+    $(document).ready(function() {
+      $("#id_revision").val('{{ article.current_revision.id }}');
+    });
+  </script>
 {% endblock %}
diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html
index 7cf23a71..1d9d2a12 100644
--- a/pydis_site/templates/wiki/includes/article_menu.html
+++ b/pydis_site/templates/wiki/includes/article_menu.html
@@ -3,78 +3,86 @@
 {% 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>
+      <div class="navbar-brand">
+        {% block wiki_breadcrumbs %}
+          {% include "wiki/includes/breadcrumbs.html" %}
+        {% endblock %}
+
+        <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">
-        {% 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>
+        <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 %}
+              <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 %}
 
-        {% 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 %}"
+          <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="{{ plugin.article_tab.1 }}"></i>
+              <i class="fas fa-clock"></i>
             </span>
 
-            <span>&nbsp;{{ plugin.article_tab.0 }}</span>
+            <span>&nbsp;Changes</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>
+          {% 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;Changes</span>
-        </a>
+              <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>
 
-        {% 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;View Source</span>
+            </a>
+          {% endif %}
 
-            <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 %}"
+          <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-lock"></i>
+              <i class="fas fa-home"></i>
             </span>
 
-            <span>&nbsp;View Source</span>
+            <span>&nbsp;View</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>
     </div>
   </nav>
diff --git a/pydis_site/templates/wiki/includes/breadcrumbs.html b/pydis_site/templates/wiki/includes/breadcrumbs.html
index b7a8aeae..16060236 100644
--- a/pydis_site/templates/wiki/includes/breadcrumbs.html
+++ b/pydis_site/templates/wiki/includes/breadcrumbs.html
@@ -1,61 +1,61 @@
 {% load i18n %}
 {% if urlpath %}
-<div id="article-breadcrumbs">
-
-<ul class="breadcrumb pull-left">
-  {% 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">{{ article.current_revision.title|truncatechars:25 }}</li>
-</ul>
-<div class="pull-left" style="margin-left: 10px;">
-  <div class="btn-group">
-    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#" style="padding: 7px;" title="{% trans "Sub-articles for" %} {{ article.current_revision.title }}">
-      <span class="fa fa-sitemap"></span>
-      <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      {% for child in children_slice %}
+
+  <div class="navbar-item">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      {% for ancestor in urlpath.cached_ancestors %}
         <li>
-          <a href="{% url 'wiki:get' path=child.path %}">
-            {{ child.article.current_revision.title }}
-          </a>
+          <a href="{% url 'wiki:get' path=ancestor.path %}">{{ ancestor.article.current_revision.title|truncatechars:25 }}</a>
         </li>
-        {% empty %}
-        <li><a href="#"><em>{% trans "No sub-articles" %}</em></a></li>
       {% endfor %}
-      {% if children_slice_more %}
-      <li><a href="#"><em>{% trans "...and more" %}</em></a></li>
-      {% endif %}
-      <li class="divider"></li>
-      <li>
-        <a href="{% url 'wiki:dir' path=urlpath.path %}">{% trans "Browse articles in this level" %} &raquo;</a>
+
+      <li class="active">
+        <a href="{% url 'wiki:get' path=article.path %}">{{ article.current_revision.title|truncatechars:25 }}</a>
       </li>
-    </ul>
+    </nav>
   </div>
-</div>
-<div class="pull-left" style="margin-left: 10px;">
-  <div class="btn-group">
-    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#" style="padding: 7px;" title="{% trans "Sub-articles for" %} {{ article.current_revision.title }}">
-      <span class="fa fa-file"></span>
-      <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
-      <li>
-        {% if urlpath.parent %}
-        <a href="{% url 'wiki:create' path=urlpath.parent.path %}" style="padding: 7px;">
-          <span class="fa fa-arrow-right"></span>
-          {% blocktrans with article.current_revision.title as title %}New article next to {{ title }}{% endblocktrans %}
-        </a>
+
+  <hr class="navbar-divider">
+
+  <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 %}
+
+        {% if children_slice_more %}
+          <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+            ...and more.
+          </a>
         {% endif %}
-        <a href="{% url 'wiki:create' path=urlpath.path %}" style="padding: 7px;">
-          <span class="fa fa-arrow-down"></span>
-          {% blocktrans with article.current_revision.title as title %}New article below {{ title }}{% endblocktrans %}
+
+        <hr class="navbar-divider">
+      {% endif %}
+
+      <a class="navbar-item" href="{% url 'wiki:dir' path=urlpath.path %}">
+        Browse other articles
+      </a>
+    </div>
+  </div>
+
+  <div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link">Create Article</a>
+
+    <div class="navbar-dropdown">
+      {% if urlpath.parent %}
+        <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.parent.path %}">
+          At current level
         </a>
-      </li>
-    </ul>
+      {% endif %}
+
+      <a class="navbar-item" href="{% url 'wiki:create' path=urlpath.path %}">
+        Below current level
+      </a>
+    </div>
   </div>
-</div>
-<div style="clear: both"></div>
-</div>
 {% endif %}
diff --git a/pydis_site/templates/wiki/includes/editor_sidebar.html b/pydis_site/templates/wiki/includes/editor_sidebar.html
index 87efed4d..5dd2f18b 100644
--- a/pydis_site/templates/wiki/includes/editor_sidebar.html
+++ b/pydis_site/templates/wiki/includes/editor_sidebar.html
@@ -15,7 +15,7 @@
     <div id="collapse_{{ plugin.slug }}" class="panel-collapse collapse{% if plugin_form.errors %} in{% endif %}">
       <div class="panel-body form-vertical">
         {% if plugin.sidebar.template %}
-          {% with plugin_form as form and plugin as plugin %}
+          {% with plugin_form as form %}
             <form method="POST" class="form-horizontal sidebar-form" action="?f={{ plugin_form.form_id }}" enctype="multipart/form-data">
               {% csrf_token %}
               {% include plugin.sidebar.template %}
diff --git a/pydis_site/templates/wiki/includes/formerrors.html b/pydis_site/templates/wiki/includes/formerrors.html
index 72d3c539..c6df2637 100644
--- a/pydis_site/templates/wiki/includes/formerrors.html
+++ b/pydis_site/templates/wiki/includes/formerrors.html
@@ -1,8 +1,15 @@
 {% if form.non_field_errors %}
-  {% if form_error_title %}<h4 class="alert-heading">{{ form_error_title }}</h4>{% endif %}
-  {% for error_message in form.non_field_errors %}
-    <div class="alert alert-block alert-danger">
-      {{ error_message }}
+  <article class="message is-danger">
+    {% if form_error_title %}
+      <div class="message-header">
+        <p>{{ form_error_title }}</p>
+      </div>
+    {% endif %}
+
+    <div class="message-body">
+      {% for error_message in form.non_field_errors %}
+        <p>{{ error_message }}</p>
+      {% endfor %}
     </div>
-  {% endfor %}
+  </article>
 {% endif %}
diff --git a/pydis_site/templates/wiki/preview_inline.html b/pydis_site/templates/wiki/preview_inline.html
index 77232753..bfe81a0c 100644
--- a/pydis_site/templates/wiki/preview_inline.html
+++ b/pydis_site/templates/wiki/preview_inline.html
@@ -1,8 +1,10 @@
 {% extends "wiki/base.html" %}
 {% load wiki_tags i18n sekizai_tags static %}
 
-{% block wiki_body %}
+{% block site_navbar %}{% endblock %}
+{% block site_footer %}{% endblock %}
 
+{% block wiki_body %}
   {% if revision %}
     <div class="alert alert-info">
       <strong>{% trans "Previewing revision" %}:</strong>
@@ -17,15 +19,14 @@
       <strong>{% trans "and" %}</strong>
       {% include "wiki/includes/revision_info.html" with revision=merge2 %}
     </div>
+
     {% if merge1.deleted %}
-    <div class="alert alert-danger">
-      <strong>{% trans "You cannot merge with a deleted revision" %}</strong>
-    </div>
+      <div class="alert alert-danger">
+        <strong>{% trans "You cannot merge with a deleted revision" %}</strong>
+      </div>
     {% endif %}
   {% endif %}
 
-  <h1 class="page-header">{{ title }}</h1>
-
   {% if revision and revision.deleted %}
     <div class="warning">
       <strong>{% trans "This revision has been deleted." %}</strong>
@@ -33,7 +34,17 @@
     </div>
   {% else %}
 
-    {% wiki_render article content %}
+    <section class="section">
+      <div class="container">
+        <div class="content">
+
+  <h1 class="title">{{ article.current_revision.title }}</h1>
+
+          {% wiki_render article content %}
+        </div>
+      </div>
+    </section>
+
     {% for plugin in plugins %}
       {% if plugin.RenderMedia.css %}
         {% addtoblock "css" %}