Fix up image replacement page

2 files changed, 45 insertions, 38 deletions

diff --git a/pydis_site/templates/wiki/plugins/images/render.html b/pydis_site/templates/wiki/plugins/images/render.html
index ced3f917..df09f48f 100644
--- a/pydis_site/templates/wiki/plugins/images/render.html
+++ b/pydis_site/templates/wiki/plugins/images/render.html
@@ -7,19 +7,19 @@
     class="image{% if align %} is-pulled-{{ align }}{% endif %}" {% if width %}
     style="width: {{ width }}px;" {% endif %}
 >
-    <a href="{{ revision.image.url }}">
-      {% if size %}
-        {% thumbnail revision.image size upscale=False as thumb %}
-          <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
-        {% empty %}
-          <figcaption>
-            <em>"Image not found"</em>
-          </figcaption>
-        {% endthumbnail %}
-      {% else %}
-        <img src="{{ revision.image.url }}" alt="{{ revision.get_filename }}" />
-      {% endif %}
-    </a>
+  <a href="{{ revision.image.url }}">
+    {% if size %}
+      {% thumbnail revision.image size upscale=False as thumb %}
+        <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
+      {% empty %}
+        <figcaption>
+          <em>"Image not found"</em>
+        </figcaption>
+      {% endthumbnail %}
+    {% else %}
+      <img src="{{ revision.image.url }}" alt="{{ revision.get_filename }}" />
+    {% endif %}
+  </a>
   <figcaption>{{ caption|safe }}</figcaption>
 </figure>
 {% endspaceless %}{% endwith %}
diff --git a/pydis_site/templates/wiki/plugins/images/revision_add.html b/pydis_site/templates/wiki/plugins/images/revision_add.html
index 87ca7a08..60c91c6a 100644
--- a/pydis_site/templates/wiki/plugins/images/revision_add.html
+++ b/pydis_site/templates/wiki/plugins/images/revision_add.html
@@ -1,33 +1,40 @@
 {% extends "wiki/article.html" %}
-{% load wiki_tags i18n humanize wiki_thumbnails %}
+{% load wiki_tags wiki_thumbnails %}
 
-
-{% block wiki_pagetitle %}{% trans "Replace image" %}: {{ image }}{% endblock %}
+{% block wiki_pagetitle %}Replace Image: {{ image }}{% endblock %}
 
 {% block wiki_contents_tab %}
-  {% thumbnail image.current_revision.imagerevision.image "250x250" as thumb %}
-    <p class="thumbnail pull-right">
-      <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
-    </p>
-  {% endthumbnail %}
-  <p class="lead">
-    {% trans "Choose an image file to replace current image." %}
-  </p>
-  <form method="POST" class="form-horizontal" enctype="multipart/form-data">
-    {% wiki_form form %}
-    <div class="form-group form-actions">
-      <div class="col-lg-2"></div>
-      <div class="col-lg-10">
-        <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}" class="btn btn-default">
-          <span class="fa fa-arrow-left"></span>
-          {% trans "Go back" %}
+  <div class="columns">
+    <div class="column is-two-thirds">
+      <p class="lead">
+        Upload an image to replace the current one.
+      </p>
+      <form method="POST" class="form-horizontal" enctype="multipart/form-data">
+        {% wiki_form form %}
+
+        <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}" class="button is-light">
+          <span class="icon">
+            <i class="fas fa-arrow-left"></i>
+          </span>
+          <span>Go Back</span>
         </a>
-        <button class="btn btn-primary">
-          <span class="fa fa-upload"></span>
-          {% trans "Upload replacement" %}
+
+        <button class="button is-primary" type="submit">
+          <span class="icon">
+            <i class="fas fa-upload"></i>
+          </span>
+          <span>Upload</span>
         </button>
-      </div>
+      </form>
     </div>
-  </form>
-
+    <div class="column is-one-third">
+      {% thumbnail image.current_revision.imagerevision.image "250x250" as thumb %}
+        <figure class="image">
+          <a href="{{ image.current_revision.imagerevision.image.url }}">
+            <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
+          </a>
+        </figure>
+      {% endthumbnail %}
+    </div>
+  </div>
 {% endblock %}