Lots of work on the images management page

2 files changed, 134 insertions, 89 deletions

diff --git a/pydis_site/settings.py b/pydis_site/settings.py
index 40954566..15718485 100644
--- a/pydis_site/settings.py
+++ b/pydis_site/settings.py
@@ -278,6 +278,8 @@ BULMA_SETTINGS = {
         "link": "$primary",
 
         "green": "#21c65c",  # Better contrast with the light text
+
+        "dimensions": "16 24 32 48 64 96 128 256 512"  # Image dimensions
     }
 }
 
diff --git a/pydis_site/templates/wiki/plugins/images/index.html b/pydis_site/templates/wiki/plugins/images/index.html
index 191d5533..a3474273 100644
--- a/pydis_site/templates/wiki/plugins/images/index.html
+++ b/pydis_site/templates/wiki/plugins/images/index.html
@@ -12,97 +12,140 @@
       {% trans "Back to edit page" %}
     </a>
   </p>
-  <table class="table table-bordered table-striped" style="width: 100%;">
-  {% for image in images %}
-    {% with image.current_revision.imagerevision as revision %}
-    <tr>
-      <th>{{ revision.get_filename|default:_("No file") }}</th>
-      <th>{% trans "Markdown tag" %}</th>
-      <th>{% trans "Uploaded by" %}</th>
-      <th>{% trans "Size" %}</th>
-    </tr>
-    <tr>
-      <td rowspan="3">
-        <p class="thumbnail">
-        {% thumbnail revision.image "250x250" as thumb %}
-            <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
-        {% endthumbnail %}
-        </p>
-        {% if image|can_write:user %}
-        <p>
-          {% if revision.deleted %}
-            <a href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
-              <span class="fa fa-upload"></span>
-              {% trans "Upload and publish new image" %}
-            </a> <br />
-            <a href="{% url 'wiki:images_restore' path=urlpath.path article_id=article.id image_id=image.id %}">
-              <span class="fa fa-refresh"></span>
-              {% trans "Restore image" %}
-            </a>
-          {% else %}
-            <a href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
-              <span class="fa fa-upload"></span>
-              {% trans "Upload replacement" %}
-            </a> <br />
-            <a href="{% url 'wiki:images_delete' path=urlpath.path article_id=article.id image_id=image.id %}">
-              <span class="fa fa-remove"></span>
-              {% trans "Remove image" %}
-            </a>
-          {% endif %}
-          {% if article|can_moderate:user %}
-          <br />
-          <a href="{% url 'wiki:images_purge' path=urlpath.path article_id=article.id image_id=image.id %}">
-            <span class="fa fa-trash"></span>
-            {% trans "Completely delete" %}
-          </a>
-          {% endif %}
-        </p>
-        {% endif %}
-      </td>
-      <td><code>[image:{{ image.id }}]</code></td>
-      <td>
-        <p>{% include "wiki/includes/revision_info.html" %}</p>
-      </td>
-      <td>{{ revision.get_size|filesizeformat }}<br />{{ revision.width }}x{{ revision.height }} pixels
-      </td>
-    </tr>
-    <tr>
-      <th colspan="100">{% trans "History" %}</th>
-    </tr>
-    <tr>
-      <td colspan="100">
-        <table class="table">
-          {% for old_revision in image.revision_set.all %}
-            <tr>
-              <td>
-              {% thumbnail old_revision.imagerevision.image "50x50" crop="center" as thumb %}
-                <img src="{{ thumb.url }}" alt="{{ revision.imagerevision.get_filename }}" />
-              {% endthumbnail %}
-              </td>
-              <td>{% include "wiki/includes/revision_info.html" with current_revision=image.current_revision revision=old_revision %}</td>
-              <td>{{ old_revision.imagerevision.get_size|filesizeformat }}</td>
-              <td>{{ old_revision.imagerevision.width }}x{{ old_revision.imagerevision.height }}</td>
-              <td>
-                {% if image|can_write:user and old_revision != image.current_revision %}
-                  <a href="{% url 'wiki:images_set_revision' path=urlpath.path article_id=article.id image_id=image.id rev_id=old_revision.id %}">
-                    <span class="fa fa-refresh"></span>
-                    {% trans "Revert to this version" %}
+  <table class="table is-fullwidth">
+    {% for image in images %}
+      {% with image.current_revision.imagerevision as revision %}
+        <thead>
+          <tr>
+            <th>{{ revision.get_filename|default:_("No filename") }}</th>
+            <th>Tag</th>
+            <th colspan="3">Updated</th>
+            <th>Size</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td rowspan="3">
+              <figure class="image is-128x128">
+                {% thumbnail revision.image "128x128" as thumb %}
+                  <a href="{{ revision.image.url }}">
+                    <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
                   </a>
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </table>
-      </td>
-    </tr>
-    {% endwith %}
-  {% empty %}
-    <tr>
-    <td colspan="100">
-      <p style="margin-bottom: 20px;"><em>{% trans "There are no images for this article." %}</em></p>
-    </td>
-  {% endfor %}
+                {% endthumbnail %}
+              </figure>
 
+              {% if image|can_write:user %}
+                {% if revision.deleted %}
+                  <a class="button is-success" title="Upload and publish new image" href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-upload"></i>
+                    </span>
+                    <span>Upload</span>
+                  </a>
+                  <a class="button is-primary" title="Restore deleted image" href="{% url 'wiki:images_restore' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-sync"></i>
+                    </span>
+                    <span>Restore</span>
+                  </a>
+                {% else %}
+                  <a class="button is-success" title="Upload replacement image" href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-upload"></i>
+                    </span>
+                    <span>Upload</span>
+                  </a>
+                  <a class="button is-warning" title="Remove image" href="{% url 'wiki:images_delete' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-times"></i>
+                    </span>
+                    <span>Remove</span>
+                  </a>
+                {% endif %}
+                {% if article|can_moderate:user %}
+                  <a class="button is-danger tooltip" href="{% url 'wiki:images_purge' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-trash"></i>
+                    </span>
+                    <span>Delete</span>
+                  </a>
+                {% endif %}
+              {% endif %}
+            </td>
+            <td>
+              <code>[image:{{ image.id }}]</code>
+            </td>
+            <td colspan="3">
+              {% include "wiki/includes/revision_info.html" %}
+            </td>
+            <td>
+              {{ revision.get_size|filesizeformat }}<br />{{ revision.width }}x{{ revision.height }} pixels
+            </td>
+          </tr>
+          <tr>
+            <th colspan="5">
+              History
+            </th>
+          </tr>
+          <tr>
+            <td class="is-paddingless" colspan="5">
+              <table class="table is-striped">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>Updated</th>
+                    <th>Size</th>
+                    <th>Dimensions</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for old_revision in image.revision_set.all %}
+                    <tr {% if forloop.first %}class="is-selected"{% endif %}>
+                      <td>
+                        <figure class="image">
+                          {% thumbnail old_revision.imagerevision.image "50x50" crop="center" as thumb %}
+                            <a href="{{ old_revision.imagerevision.image.url }}">
+                              <img src="{{ thumb.url }}" alt="{{ revision.imagerevision.get_filename }}" />
+                            </a>
+                          {% endthumbnail %}
+                        </figure>
+                      </td>
+                      <td>
+                        {% include "wiki/includes/revision_info.html" with current_revision=image.current_revision revision=old_revision %}
+                      </td>
+                      <td>
+                        {{ old_revision.imagerevision.get_size|filesizeformat }}
+                      </td>
+                      <td>
+                        {{ old_revision.imagerevision.width }}x{{ old_revision.imagerevision.height }} pixels
+                      </td>
+                      <td>
+                        {% if image|can_write:user and old_revision != image.current_revision %}
+                          <a class="button is-primary" href="{% url 'wiki:images_set_revision' path=urlpath.path article_id=article.id image_id=image.id rev_id=old_revision.id %}">
+                            <span class="icon">
+                              <i class="fas fa-sync"></i>
+                            </span>
+                            <span>Restore</span>
+                          </a>
+                        {% else %}
+                          <a class="button is-static has-text-black">
+                            <span class="icon">
+                              <i class="fas fa-times"></i>
+                            </span>
+                            <span>Current</span>
+                          </a>
+                        {% endif %}
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      {% endwith %}
+    {% endfor %}
   </table>
 
   {% include "wiki/includes/pagination.html" %}