Finish history view page

5 files changed, 112 insertions, 144 deletions

diff --git a/pydis_site/templates/wiki/edit.html b/pydis_site/templates/wiki/edit.html
index 0ebfa2f6..c0cb8de6 100644
--- a/pydis_site/templates/wiki/edit.html
+++ b/pydis_site/templates/wiki/edit.html
@@ -82,7 +82,7 @@
         <iframe name="previewWindow" frameborder="0" style="width: 100%; height: 100%;"></iframe>
       </div>
       <div class="modal-card-foot">
-        <button class="button is-white" aria-label="close">
+        <button class="button is-light" aria-label="close">
           <span class="icon">
             <i class="fas fa-arrow-left"></i>
           </span>
diff --git a/pydis_site/templates/wiki/history.html b/pydis_site/templates/wiki/history.html
index 2e909df0..7946508e 100644
--- a/pydis_site/templates/wiki/history.html
+++ b/pydis_site/templates/wiki/history.html
@@ -50,154 +50,119 @@
 
   {% include "wiki/includes/pagination.html" %}
 
-<form method="GET">
-  <div class="tab-content" style="overflow: visible;">
-    {% for revision in revisions %}
-      <div class="panel-group" id="accordion{{ revision.revision_number }}">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <a class="panel-toggle" style="float: left;" href="#collapse{{ revision.revision_number }}" onclick="get_diff_json('{% url 'wiki:diff' revision.id %}', $('#collapse{{ revision.revision_number }}'))">
-              {% if revision == article.current_revision %}
-                <i class="fa fa-flag"></i>
-              {% else %}
-                <i class="fa fa-plus"></i>
-              {% endif %}
-              {% include "wiki/includes/revision_info.html" with current_revision=article.current_revision %}
-              <div class="text-muted">
-                <small>
-                {% if revision.user_message %}
-                  {{ revision.user_message }}
-                {% elif revision.automatic_log %}
-                  {{ revision.automatic_log }}
-                {% else %}
-                  ({% trans "no log message" %})
-                {% endif %}
-                </small>
-              </div>
-            </a>
-            <div class="progress progress-striped active" style="display: none; width: 40px; float: left; margin-top: 7px; margin-bottom: -7px;">
-              <div class="bar" style="width: 100%;"></div>
-            </div>
-            <div class="pull-right" style="vertical-align: middle; margin: 8px 8px;">
-              {% if revision == article.current_revision %}
-              <a href="#" class="btn btn-default disabled">
-                <span class="fa fa-lock fa-fw"></span>
-                {% trans "Preview this revision" %}
+<form method="GET" id="historyForm">
+  <table class="table is-striped">
+    <thead>
+      <tr>
+        <th>Updated</th>
+        <th>Summary</th>
+        <th class="has-text-right">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for revision in revisions %}
+        <tr {% if revision == article.current_revision %}class="is-selected"{% endif %}>
+          <td>
+            {% include "wiki/includes/revision_info.html" with current_revision=article.current_revision %}
+          </td>
+          <td>
+            {% if revision.user_message %}
+              {{ revision.user_message }}
+            {% elif revision.automatic_log %}
+              {{ revision.automatic_log }}
+            {% else %}
+              <em>No summary</em>
+            {% endif %}
+          </td>
+          <td class="has-text-right">
+            {% if revision == article.current_revision %}
+              <a class="button is-static has-text-grey">
+                <span class="icon">
+                  <i class="fas fa-eye"></i>
+                </span>
+                <span>Preview</span>
               </a>
-              {% else %}
-              <button type="submit" class="btn btn-default" onclick="$('#previewModal').modal('show'); this.form.target='previewWindow'; this.form.r.value='{{ revision.id }}'; this.form.action='{% url 'wiki:preview_revision' article.id %}'; $('#previewModal .switch-to-revision').attr('href', '{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}')">
-                <span class="fa fa-eye fa-fw"></span>
-                {% trans "Preview this revision" %}
+              <a class="button is-static has-text-grey">
+                <span class="icon">
+                  <i class="fas fa-sync"></i>
+                </span>
+                <span>Switch</span>
+              </a>
+            {% else %}
+              <button type="submit" class="button" onclick="showPreviewModal('{{ revision.id }}', '{% url 'wiki:preview_revision' article.id %}', '{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}'); event.preventDefault();">
+                <span class="icon">
+                  <i class="fas fa-eye"></i>
+                </span>
+                <span>Preview</span>
               </button>
-              {% endif %}
-
-              {% if article|can_write:user and not article.current_revision.locked %}
-              <input type="radio"{% if revision == article.current_revision %} disabled="true"{% endif %} style="margin: 0 10px;" value="{{ revision.id }}" name="revision_id" switch-button-href="{% url 'wiki:change_revision' path=urlpath.path revision_id=revision.id %}" merge-button-href="{% url 'wiki:merge_revision_preview' article_id=article.id revision_id=revision.id %}" merge-button-commit-href="{% url 'wiki:merge_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}" />
-              {% endif %}
-
-            </div>
-            <div style="clear: both"></div>
-          </div>
-          <div id="collapse{{ revision.revision_number }}" class="panel-collapse collapse">
-            <div class="panel-body diff-container" style="padding: 0;">
-              <dl class="dl-horizontal">
-                <dt>{% trans "Auto log:" %}</dt>
-                <dd>{{ revision.automatic_log|default:"-"|linebreaksbr }}</dd>
-              </dl>
-              <table class="table table-condensed" style="margin: 0; border-collapse: collapse;">
-                <thead>
-                  <tr>
-                    <th class="linenumber">{% if revision.previous_revision %}#{{revision.previous_revision.revision_number}}{% endif %}</th>
-                    <th class="linenumber">#{{revision.revision_number}}</th>
-                    <th>{% trans "Change" %}</th>
-                  </tr>
-                </thead>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    {% endfor %}
+              <a class="button is-primary" href="{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}">
+                <span class="icon">
+                  <i class="fas fa-sync"></i>
+                </span>
+                <span>Switch</span>
+              </a>
+            {% endif %}
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 
-    {% include "wiki/includes/pagination.html" %}
+  {% include "wiki/includes/pagination.html" %}
 
-    {% if revisions.count > 1 and article|can_write:user and not article.current_revision.locked %}
+  <input type="hidden" name="r" value="" id="r" />
 
-    <div class="form-group form-actions">
-      <div class="pull-right">
-        <button type="submit" name="preview" value="1" class="btn btn-default" onclick="$('#mergeModal').modal('show'); this.form.target='mergeWindow'; this.form.action=$('input[type=radio]:checked').attr('merge-button-href'); $('.merge-revision-commit').attr('href', $('input[type=radio]:checked').attr('merge-button-commit-href'))">
-          <span class="fa fa-random"></span>
-          {% trans "Merge selected with current..." %}
-        </button>
-        <button type="submit" name="save" value="1" class="btn btn-primary" onclick="this.form.target='_self'; this.form.action=$('input[type=radio]:checked').attr('switch-button-href')">
-          <span class="fa fa-flag"></span>
-          {% trans "Switch to selected version" %}
-        </button>
+  <div class="modal" id="previewModal">
+    <div class="modal-background"></div>
+    <div class="modal-card" style="height: 80%; width: 80%;">
+      <div class="modal-card-head">
+        <p class="modal-card-title">Revision Preview</p>
       </div>
-      <div style="clear:both"></div>
-    </div>
-
-    {% endif %}
-
-  </div>
-  <input type="hidden" name="r" value="" />
-  <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 history view" %}
-          </a>
-          {% if article|can_write:user %}
-          <a href="#" class="btn btn-lg btn-primary switch-to-revision">
-            <span class="fa fa-flag"></span>
-            {% trans "Switch to this version" %}
-          </a>
-          {% else %}
-            <a href="#" class="btn btn-lg btn-primary disabled">
-              <span class="fa fa-lock"></span>
-              {% trans "Switch to this version" %}
-            </a>
-          {% endif %}
-        </div>
+      <div class="modal-card-body" style="padding: 0; overflow: hidden;">
+        <iframe name="previewWindow" id="previewWindow" frameborder="0" style="width: 100%; height: 100%;"></iframe>
       </div>
-    </div>
-  </div>
-
-  <div class="modal fade wiki-modal" id="mergeModal">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1>{% trans "Merge with current" %}</h1>
-          <p class="lead"><span class="fa fa-info-circle"></span> {% trans "When you merge a revision with the current, all data will be retained from both versions and merged at its approximate location from each revision." %} <strong>{% trans "After this, it's important to do a manual review." %}</strong></p>
-        </div>
-        <div class="modal-body">
-          <iframe name="mergeWindow" frameborder="0" style="min-height: 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 history view" %}
+      <div class="modal-card-foot">
+        <button class="button is-light" aria-label="close">
+          <span class="icon">
+            <i class="fas fa-arrow-left"></i>
+          </span>
+          <span>Back</span>
+        </button>
+        {% if article|can_write:user %}
+          <a href="#" class="button is-primary switch-to-revision">
+            <span class="icon">
+              <i class="fas fa-sync"></i>
+            </span>
+            <span>Switch to this version</span>
           </a>
-          {% if article|can_write:user %}
-          <a href="#" class="btn btn-lg btn-primary merge-revision-commit">
-            <span class="fa fa-file"></span>
-            {% trans "Create new merged version" %}
+        {% else %}
+          <a class="button is-static">
+            <span class="icon">
+              <i class="fas fa-check"></i>
+            </span>
+            <span>Switch to this version</span>
           </a>
-          {% else %}
-            <a href="#" class="btn btn-lg btn-primary disabled">
-              <span class="fa fa-lock"></span>
-              {% trans "Create new merged version" %}
-            </a>
-          {% endif %}
-        </div>
+        {% endif %}
       </div>
     </div>
   </div>
 </form>
+  <script src="{% static "js/wiki/modal.js" %}" type="text/javascript"></script>
+  <script type="text/javascript">
+    function showPreviewModal(revision_id, action_url, change_revision_url) {
+      let iframe = $("#previewWindow");
+
+      iframe.attr("src", action_url + "?r=" + revision_id);
+
+      console.log(revision_id);
+      console.log(action_url + "?r=" + revision_id);
+      console.log(change_revision_url);
+
+      $('#previewModal .switch-to-revision').attr('href', change_revision_url);
+      open_modal('previewModal');
+    }
+  </script>
 
 {% endblock %}
+
+
diff --git a/pydis_site/templates/wiki/includes/pagination.html b/pydis_site/templates/wiki/includes/pagination.html
index bd113dd6..0bdcbdc2 100644
--- a/pydis_site/templates/wiki/includes/pagination.html
+++ b/pydis_site/templates/wiki/includes/pagination.html
@@ -8,7 +8,7 @@
     {% endif %}
 
     {% if page_obj.has_next %}
-        <a class="pagination-next" href="{% if search_query %}q={{ search_query  }}&{% endif %}page={{ page_obj.next_page_number }}{% if appended_key %}&{{ appended_key }}={{ appended_value }}{% endif %}">Next</a>
+        <a class="pagination-next" href="?{% if search_query %}q={{ search_query  }}&{% endif %}page={{ page_obj.next_page_number }}{% if appended_key %}&{{ appended_key }}={{ appended_value }}{% endif %}">Next</a>
     {% else %}
         <a class="pagination-next tooltip" data-tooltip="This is the last page" disabled>Older</a>
     {% endif %}
diff --git a/pydis_site/templates/wiki/includes/revision_info.html b/pydis_site/templates/wiki/includes/revision_info.html
index 95b01baf..724f7296 100644
--- a/pydis_site/templates/wiki/includes/revision_info.html
+++ b/pydis_site/templates/wiki/includes/revision_info.html
@@ -8,9 +8,6 @@
 
 {% load wiki_tags i18n %}
 {% if not hidedate %}{{ revision.created }}{% endif %} {% if not hidenumber %}(#{{ revision.revision_number }}) {% trans "by" %}{% endif %} {% if revision.user %}{{ revision.user }}{% else %}{% if article|can_moderate:user %}{{ revision.ip_address|default:"anonymous (IP not logged)" }}{% else %}{% trans "anonymous (IP logged)" %}{% endif %}{% endif %}
-{% if revision == current_revision %}
-  <strong>*</strong>
-{% endif %}
 {% if revision.deleted %}
 <span class="badge badge-important">{% trans "deleted" %}</span>
 {% endif %}
diff --git a/pydis_site/templates/wiki/preview_inline.html b/pydis_site/templates/wiki/preview_inline.html
index 829fee4c..a130df05 100644
--- a/pydis_site/templates/wiki/preview_inline.html
+++ b/pydis_site/templates/wiki/preview_inline.html
@@ -7,9 +7,15 @@
 
 {% block wiki_body %}
   {% if revision %}
-    <div class="alert alert-info">
-      <strong>{% trans "Previewing revision" %}:</strong>
-      {% include "wiki/includes/revision_info.html" %}
+    <div class="container">
+      <div class="message">
+        <div class="message-header">
+          <p>Previewing Revision</p>
+        </div>
+        <div class="message-body">
+          {% include "wiki/includes/revision_info.html" %}
+        </div>
+      </div>
     </div>
   {% endif %}