Editor fixes and sidebar accordion

6 files changed, 74 insertions, 34 deletions

diff --git a/pydis_site/static/js/wiki/load_editor.js b/pydis_site/static/js/wiki/load_editor.js
index dfa087d9..6eddbe1e 100644
--- a/pydis_site/static/js/wiki/load_editor.js
+++ b/pydis_site/static/js/wiki/load_editor.js
@@ -39,6 +39,7 @@
             forceSync: true,
             indentWithTabs: false,
             initialValue: element.value,
+            lineWrapping: true,
             placeholder: "**Write some _markdown_!**",
             spellChecker: false,
             tabSize: 4,
@@ -50,6 +51,8 @@
                 "preview", "side-by-side", "fullscreen", "|",
                 "guide"
             ],
+
+            status: false,
         })
     }
 })();
diff --git a/pydis_site/templates/wiki/edit.html b/pydis_site/templates/wiki/edit.html
index 8bc05ffb..fb3efb31 100644
--- a/pydis_site/templates/wiki/edit.html
+++ b/pydis_site/templates/wiki/edit.html
@@ -17,7 +17,7 @@
 
   <div class="columns">
 
-    <div class="column is-8">
+    <div class="column is-two-thirds">
       <form method="POST" class="form-horizontal" id="article_edit_form">
         {% with edit_form as form %}
           {% include "wiki/includes/editor.html" %}
@@ -64,7 +64,7 @@
       </form>
     </div>
 
-    <div class="column is-4" id="wiki-edit-sidebar">
+    <div class="column is-one-third" id="wiki-edit-sidebar">
       {% include "wiki/includes/editor_sidebar.html" %}
     </div>
 
diff --git a/pydis_site/templates/wiki/forms/fields/char.html b/pydis_site/templates/wiki/forms/fields/char.html
index 0f130751..4c48d300 100644
--- a/pydis_site/templates/wiki/forms/fields/char.html
+++ b/pydis_site/templates/wiki/forms/fields/char.html
@@ -1,19 +1,21 @@
 <div id="div_{{ field.auto_id }}" class="field is-horizontal{% if field.errors %} is-danger{% endif %}">
-  <div class="field-label">
-    {% if field.label %}
-      <label for="{{ field.auto_id }}" class="label {% if field.errors %} is-danger{% endif %}">
-        {{ field.label | safe }} {% if field.field.required %}<span class="asterisk has-text-danger">*</span>{% endif %}
-      </label>
-    {% endif %}
+  {% if not is_markitup %}
+    <div class="field-label">
+      {% if field.label %}
+        <label for="{{ field.auto_id }}" class="label {% if field.errors %} is-danger{% endif %}">
+          {{ field.label | safe }} {% if field.field.required %}<span class="asterisk has-text-danger">*</span>{% endif %}
+        </label>
+      {% endif %}
 
-    {% if field.help_text %}
-      <p id="hint_{{ field.auto_id }}" class="help has-text-grey">
-        {{ field.help_text|safe }}
-      </p>
-    {% endif %}
-  </div>
+      {% if field.help_text %}
+        <p id="hint_{{ field.auto_id }}" class="help has-text-grey">
+          {{ field.help_text|safe }}
+        </p>
+      {% endif %}
+    </div>
+  {% endif %}
 
-  <div class="field-body">
+  <div class="field-body"{% if is_markitup %} style="display: block; width: 100%;"{% endif %}>
     <div class="field">
       <div class="control">
         {% if is_markitup %}
diff --git a/pydis_site/templates/wiki/forms/fields/image.html b/pydis_site/templates/wiki/forms/fields/image.html
new file mode 100644
index 00000000..47e115fe
--- /dev/null
+++ b/pydis_site/templates/wiki/forms/fields/image.html
@@ -0,0 +1,31 @@
+<div id="div_{{ field.auto_id }}" class="field is-horizontal{% if field.errors %} is-danger{% endif %}">
+  <div class="field-label">
+    {% if field.label %}
+      <label for="{{ field.auto_id }}" class="label {% if field.errors %} is-danger{% endif %}">
+        IN PLACE RENDER: {{ field.label | safe }} {% if field.field.required %}<span class="asterisk has-text-danger">*</span>{% endif %}
+      </label>
+    {% endif %}
+
+    {% if field.help_text %}
+      <p id="hint_{{ field.auto_id }}" class="help has-text-grey">
+        {{ field.help_text|safe }}
+      </p>
+    {% endif %}
+  </div>
+
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        {{ field }}
+      </div>
+
+    {% if field.errors %}
+      <p class="help is-danger">
+        {% for error in field.errors %}
+          <span id="error_{{ forloop.counter }}_{{ field.auto_id }}">{{ error }}</span><br />
+        {% endfor %}
+      </p>
+    {% endif %}
+    </div>
+  </div>
+</div>
diff --git a/pydis_site/templates/wiki/includes/article_menu.html b/pydis_site/templates/wiki/includes/article_menu.html
index cbaf024c..5429f6a8 100644
--- a/pydis_site/templates/wiki/includes/article_menu.html
+++ b/pydis_site/templates/wiki/includes/article_menu.html
@@ -70,12 +70,6 @@
 
             <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>
diff --git a/pydis_site/templates/wiki/includes/editor_sidebar.html b/pydis_site/templates/wiki/includes/editor_sidebar.html
index 5dd2f18b..2eebb80f 100644
--- a/pydis_site/templates/wiki/includes/editor_sidebar.html
+++ b/pydis_site/templates/wiki/includes/editor_sidebar.html
@@ -1,19 +1,26 @@
 {% load i18n sekizai_tags %}
 
-<div class="panel-group" id="accordion_{{ plugin.slug }}">
-
+<section class="accordions">
 {% for plugin, plugin_form in sidebar %}
 
-  <div class="panel panel-default">
+  <article class="accordion is-primary">
+    <div class="accordion-header toggle">
+      <p>
+        {% if plugin.sidebar.icon_class %}
+          <span class="icon">
+            {% if plugin.sidebar.icon_class == "fa-picture-o" %}
+              <i class="fas fa-images"></i>
+            {% else %}
+              <i class="fas {{ plugin.sidebar.icon_class }}"></i>
+            {% endif %}
+          </span>
+        {% endif %}
+        {{ plugin.sidebar.headline }}
+      </p>
 
-    <div class="panel-heading">
-      <a class="panel-toggle" href="#collapse_{{ plugin.slug }}" data-toggle="collapse">
-        <h3 class="panel-title"><span class="fa fa-fw {{ plugin.sidebar.icon_class }}"></span> {{ plugin.sidebar.headline }}</h3>
-      </a>
     </div>
-
-    <div id="collapse_{{ plugin.slug }}" class="panel-collapse collapse{% if plugin_form.errors %} in{% endif %}">
-      <div class="panel-body form-vertical">
+    <div class="accordion-body">
+      <div class="accordion-content">
         {% if plugin.sidebar.template %}
           {% with plugin_form as form %}
             <form method="POST" class="form-horizontal sidebar-form" action="?f={{ plugin_form.form_id }}" enctype="multipart/form-data">
@@ -24,7 +31,10 @@
         {% endif %}
       </div>
     </div>
-
-  </div>
+  </article>
 {% endfor %}
-</div>
+</section>
+
+<script type="application/javascript">
+  bulmaAccordion.attach();
+</script>