Redesigned post changellog and diff

static/cranefly/css/cranefly.css

@@ -1100,6 +1100,20 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .post-votes-list .post-likes .vote-icon{background-color:#46a546;}
 .post-votes-list .post-hates .vote-icon{background-color:#cf402e;}
 .post-votes-list .vote-date{margin:0px;padding:0px;color:#999999;font-size:10.5px;}
+.post-changelog table td{vertical-align:middle;}.post-changelog table td .change-added,.post-changelog table td .change-removed,.post-changelog table td .change-none{display:block;font-size:28px;font-weight:bold;text-align:right;}.post-changelog table td .change-added.change-small,.post-changelog table td .change-removed.change-small,.post-changelog table td .change-none.change-small{font-size:14px;}
+.post-changelog table td .change-neutral{color:#555555;}
+.post-changelog table td .change-added{color:#46a546;}
+.post-changelog table td .change-removed{color:#cf402e;}
+.post-changelog table td .change-reason a:link,.post-changelog table td .change-reason a:active,.post-changelog table td .change-reason a:visited,.post-changelog table td .change-reason a:hover{color:#333333;font-weight:bold;}
+.post-changelog table td .change-no:link,.post-changelog table td .change-no:active,.post-changelog table td .change-no:visited,.post-changelog table td .change-no:hover{float:right;color:#555555;font-weight:bold;}
+.post-changelog table td .change-description{float:left;font-size:11.9px;}.post-changelog table td .change-description a:link,.post-changelog table td .change-description a:active,.post-changelog table td .change-description a:visited,.post-changelog table td .change-description a:hover{color:#333333;}
+.post-changelog table td .change-description .change-details{color:#999999;}.post-changelog table td .change-description .change-details a:link,.post-changelog table td .change-description .change-details a:visited{color:#555555;}
+.post-diff .diff-extra{overflow:auto;}
+.post-diff .post-diff-details{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.post-diff .post-diff-details table{margin:0px;width:100%;}.post-diff .post-diff-details table td{padding:1px 4px;}.post-diff .post-diff-details table td.line{background-color:#eeeeee;border-right:1px solid #d5d5d5;padding-left:14px;width:1%;text-align:right;}.post-diff .post-diff-details table td.line a:link,.post-diff .post-diff-details table td.line a:active,.post-diff .post-diff-details table td.line a:visited,.post-diff .post-diff-details table td.line a:hover{color:#999999;}
+.post-diff .post-diff-details table td.even{background-color:#f7f7f7;}
+.post-diff .post-diff-details table td.added{background-color:#faeae8;color:#7c261b;font-weight:bold;}.post-diff .post-diff-details table td.added.even{background-color:#f5d7d4;}
+.post-diff .post-diff-details table td.removed{background-color:#faeae8;color:#7c261b;font-weight:bold;}.post-diff .post-diff-details table td.removed.even{background-color:#f5d7d4;}
+.post-diff .post-diff-details table td.stag{color:#555555;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .post-label-team{background-color:#cf402e;}

static/cranefly/css/cranefly/changelog.less

@@ -1,2 +1,133 @@
 // Post Changelog
-// -------------------------
+// -------------------------
+
+.post-changelog {
+  table {
+    td {
+      vertical-align: middle;
+
+      .change-added, .change-removed, .change-none {
+        display: block;
+        font-size: @baseFontSize * 2;
+        font-weight: bold;
+        text-align: right;
+
+        &.change-small {
+          font-size: @baseFontSize;
+        }
+      }
+
+      .change-neutral {
+        color: @gray;
+      }
+
+      .change-added {
+        color: @green;
+      }
+
+      .change-removed {
+        color: @red;
+      }
+
+      .change-reason {
+        a:link, a:active, a:visited, a:hover {
+          color: @textColor;
+          font-weight: bold;
+        }
+      }
+
+      .change-no {
+        &:link, &:active, &:visited, &:hover {
+          float: right;
+
+          color: @gray;
+          font-weight: bold;
+        }
+      }
+
+      .change-description {
+        float: left;
+
+        font-size: @fontSizeSmall;
+
+        a:link, a:active, a:visited, a:hover {
+          color: @textColor;
+        }
+
+        .change-details {
+          color: @grayLight;
+
+          a:link, a:visited {
+            color: @gray;
+          }
+        }
+      }
+    }
+  }
+}
+
+.post-diff {
+  .diff-extra {
+    overflow: auto;
+  }
+
+  .post-diff-details {
+    background-color: @white;
+    border: 1px solid @categoryBorder;
+    border-radius: @borderRadiusSmall;
+    .box-shadow(0px 0px 0px 3px @categoryShadow);
+    margin-bottom: @baseLineHeight;
+
+    table {
+      margin: 0px;
+      width: 100%;
+
+      td {
+        padding: 1px 4px;
+
+        &.line {
+          background-color: @categoryShadow;
+          border-right: 1px solid @categoryBorder;
+          padding-left: @baseFontSize;
+          width: 1%;
+
+          text-align: right;
+
+          a:link, a:active, a:visited, a:hover {
+            color: @grayLight;
+          }
+        }
+
+        &.even {
+          background-color: darken(@white, 3%);
+        }
+
+        &.added {
+          background-color: lighten(@green, 45%);
+
+          color: darken(@green, 20%);
+          font-weight: bold;
+
+          &.even {
+            background-color: lighten(@green, 40%);
+          }
+        }
+
+        &.removed {
+          background-color: lighten(@red, 45%);
+
+          color: darken(@red, 20%);
+          font-weight: bold;
+
+          &.even {
+            background-color: lighten(@red, 40%);
+          }
+        }
+
+        &.stag {
+          color: @gray;
+        }
+      }
+    }
+  }
+}

templates/cranefly/threads/changelog.html

@@ -20,7 +20,7 @@
     <ul class="breadcrumb">
       {{ self.breadcrumb() }}</li>
     </ul>
-    <h1>{% trans post=post.pk %}Post #{{ post }} Votes{% endtrans %} <small>{{ thread.name }}</small></h1>
+    <h1>{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %} <small>{{ thread.name }}</small></h1>
     <ul class="unstyled header-stats">
       <li><i class="icon-time"></i> <a href="{% url 'thread_find' thread=thread.pk, slug=thread.slug, post=post.pk %}">{{ post.date|reltimesince }}</a></li>
       <li><i class="icon-user"></i> {% if post.user %}<a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}">{{ post.user.username }}</a>{% else %}{{ post.user_name }}{% endif %}</li>
@@ -33,6 +33,45 @@
 <div class="container container-primary">
   <div class="post-changelog">
     {% if edits %}
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th style="width: 1%;">&nbsp;</th>
+          <th>{% trans %}Change Log{% endtrans %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for edit in edits %}
+        <tr>
+          <td>
+            <span class="change-{% if edit.change > 0 %}added{% elif edit.change < 0 %}removed{% else %}none{% endif %}{% if not edit.reason %} change-small{% endif %}">
+              {% if edit.change > 0 %}+{% endif %}{{ edit.change }}
+            </span>
+          </td>
+          <td>
+            <a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=edit.pk %}" class="change-no">#{{ loop.revindex }}</a>
+            {% if edit.reason %}
+            <div class="change-reason">
+              <a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=edit.pk %}">{{ edit.reason }}</a>
+            </div>{% endif %}
+            <div class="change-description">
+              <a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=edit.pk %}">
+              {% if edit.change != 0 %}{% if edit.change > 0 -%}
+              {% trans chars=edit.change %}Added one character to post.{% pluralize %}Added {{ chars }} characters to post.{% endtrans %}
+              {%- elif edit.change < 0 -%}
+              {% trans chars=edit.change|abs %}Removed one character from post.{% pluralize %}Removed {{ chars }} characters from post.{% endtrans %}
+              {%- else -%}
+              {% trans %}No change in message's length.{% endtrans %}
+              {%- endif %}{% endif %}{% if edit.thread_name_old %} {% trans old=edit.thread_name_old, new=edit.thread_name_new %}Changed thread name from "{{ old }}" to "{{ new }}".{% endtrans %}{% endif %}{% if edit.thread_name_old %} {% trans old=edit.thread_name_old, new=edit.thread_name_new %}Renamed thread from "{{ old }}" to "{{ new }}".{% endtrans %}{% endif %}</a>
+              <span class="change-details">
+                {% trans user=edit_user(edit), date=edit.date|reldate|low %}By {{ user }} {{ date }}{% endtrans %}
+              </span>
+            </div>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
     {% else %}
     <p class="lead">{% trans %}This post was never edited.{% endtrans %}</p>
     {% endif %}
@@ -40,42 +79,7 @@
 </div>
 {% endblock %}
 
-{% block content %}
-<div class="page-header">
-  <ul class="breadcrumb">
-    {{ self.breadcrumb() }}</li>
-  </ul>
-  <h1>{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %} <small>{{ thread.name }}</small></h1>
-  <ul class="unstyled thread-info">
-    <li><i class="icon-time"></i> <a href="{% url 'thread_find' thread=thread.pk, slug=thread.slug, post=post.pk %}">{{ post.date|reltimesince }}</a></li>
-    <li><i class="icon-user"></i> {% if post.user %}<a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}">{{ post.user.username }}</a>{% else %}{{ post.user_name }}{% endif %}</li>
-    <li><i class="icon-pencil"></i> {% trans edits=post.edits %}One edit{% pluralize %}{{ edits }} edits{% endtrans %}</li>
-    {% if post.protected %}<li><i class="icon-lock"></i> {% trans %}Protected{% endtrans %}</li>{% endif %}
-  </ul>
-</div>
-{% if edits %}
-<table class="table table-striped">
-  <thead>
-    <tr>
-      <th>{% trans %}Logged Changes{% endtrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for edit in edits %}
-    <tr>
-      <td>
-        <div><strong><a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=edit.pk %}">#{{ loop.revindex }}</a></strong>{% if edit.change != 0 %} {% if edit.change > 0 -%}
-  {% trans chars=edit.change %}Added one character to post.{% pluralize %}Added {{ chars }} characters to post.{% endtrans %}
-  {%- elif edit.change < 0 -%}
-  {% trans chars=edit.change|abs %}Removed one character from post.{% pluralize %}Removed {{ chars }} characters from post.{% endtrans %}
-  {%- endif %}{% endif %}{% if edit.thread_name_old %} {% trans old=edit.thread_name_old, new=edit.thread_name_new %}Changed thread name from "{{ old }}" to "{{ new }}".{% endtrans %}{% endif %}{% if edit.thread_name_old %} {% trans old=edit.thread_name_old, new=edit.thread_name_new %}Renamed thread from "{{ old }}" to "{{ new }}".{% endtrans %}{% endif %}</div>
-        <div class="muted">{% if edit.user_id %}<a href="{% url 'user' user=edit.user_id, username=edit.user_slug %}">{{ edit.user_name }}</a>{% else %}{{ edit.user_name }}{% endif %}, {{ edit.date|reltimesince }}{% if edit.reason %}, <em>{{ edit.reason }}</em>{% endif %}</div>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<p class="lead">{% trans %}This post was never edited.{% endtrans %}</p>
-{% endif %}
-{% endblock %}
+
+{% macro edit_user(edit) -%}
+{% if edit.user_id %}<a href="{% url 'user' user=edit.user_id, username=edit.user_slug %}">{{ edit.user_name }}</a>{% else %}{{ edit.user_name }}{% endif %}
+{%- endmacro %}

templates/cranefly/threads/changelog_diff.html

@@ -5,82 +5,95 @@
 
 {% block title %}{{ macros.page_title(title=(_("Post #%(post)s Changelog") % {'post': post.pk}),parent=thread.name) }}{% endblock %}
 
-{% block breadcrumb %}{{ super() }} <span class="divider">/</span></li>
+{% block breadcrumb %}{{ super() }} <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% for parent in parents %}
-<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider">/</span></li>
+<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% endfor %}
-<li><a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}">{{ thread.name }}</a> <span class="divider">/</span></li>
-<li><a href="{% url 'changelog' thread=thread.pk, slug=thread.slug, post=post.pk %}">{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %}</a> <span class="divider">/</span></li>
+<li><a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}">{{ thread.name }}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
+<li><a href="{% url 'changelog' thread=thread.pk, slug=thread.slug, post=post.pk %}">{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
 <li class="active">{% trans date=change.date|reltimesince|low %}Edit from {{ date }}{% endtrans %}
 {%- endblock %}
 
-{% block content %}
-<div class="page-header">
-  <ul class="breadcrumb">
-    {{ self.breadcrumb() }}</li>
-  </ul>
-  <h1>{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %} <small>{{ thread.name }}</small></h1>
-  <ul class="unstyled thread-info">
-    <li><i class="icon-time"></i> <a href="{% url 'thread_find' thread=thread.pk, slug=thread.slug, post=post.pk %}">{{ post.date|reltimesince }}</a></li>
-    <li><i class="icon-user"></i> {% if post.user %}<a href="{% url 'user' user=post.user.pk, username=post.user.username_slug %}">{{ post.user.username }}</a>{% else %}{{ post.user_name }}{% endif %}</li>
-    <li><i class="icon-pencil"></i> {% trans edits=post.edits %}One edit{% pluralize %}{{ edits }} edits{% endtrans %}</li>
-    {% if post.protected %}<li><i class="icon-lock"></i> {% trans %}Protected{% endtrans %}</li>{% endif %}
-  </ul>
-</div>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-
-<h2>{% trans date=change.date|reltimesince|low %}Edit from {{ date }}{% endtrans %} <small>#{{ change.pk }}</small></h2>
-<ul class="unstyled thread-info">
-  <li><i class="icon-time"></i> <a href="{% url 'thread_find' thread=thread.pk, slug=thread.slug, post=post.pk %}">{{ post.date|reltimesince }}</a></li>
-  <li><i class="icon-user"></i> {% if change.user_id %}<a href="{% url 'user' user=change.user_id, username=change.user_slug %}">{{ change.user_name }}</a>{% else %}{{ change.user_name }}{% endif %}</li>
-  {% if acl.users.can_see_users_trails() %}
-  <li><i class="icon-globe"></i> {{ change.ip }}</li>
-  <li><i class="icon-qrcode"></i> {{ change.agent }}</li>
-  {% endif %}
-  {% if change.change != 0 %}<li><i class="icon-{% if change.change > 0 %}plus{% elif change.change < 0 %}minus{% endif %}"></i> {% if change.change > 0 -%}
-  {% trans chars=change.change %}Added one character{% pluralize %}Added {{ chars }} characters{% endtrans %}
-  {%- elif change.change < 0 -%}
-  {% trans chars=change.change|abs %}Removed one character{% pluralize %}Removed {{ chars }} characters{% endtrans %}
-  {%- endif %}</li>{% endif %}
-</ul>
-{% if change.reason %}
-<p class="lead">{{ change.reason }}</p>
-{% endif %}
-{% if acl.threads.can_edit_reply(user, forum, thread, post) or prev or next %}
-<div class="list-nav">
-  {{ pager() }}
-  {% if user.is_authenticated() and acl.threads.can_make_revert(forum, thread) %}
-  <form class="form-inline" action="{% url 'changelog_revert' thread=thread.pk, slug=thread.slug, post=post.pk, change=change.pk %}" method="post">
-    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-    <ul class="nav nav-pills pull-right">
-      <li class="danger"><button type="submit" class="btn btn-danger">{% trans %}Revert this edit{% endtrans %}</button></li>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {{ messages_list(messages) }}
+    <ul class="breadcrumb">
+      {{ self.breadcrumb() }}</li>
     </ul>
-  </form>
-  {%- endif %}
-</div>
-{% endif %}
-<div class="well diff">
-  <table>
-    {% for line in diff %}{% if line[0] != "?" %}
-    <tr>
-      <td class="line"><a href="#{{ l }}">{{ l }}.</a></td>
-      <td class="{% if line[0] == '+' %}added{% elif line[0] == '-' %}removed{% else %}stag{% endif %}{% if l is even %} even{% endif %}">{% if line[2:] %}{{ line[2:] }}{% else %}&nbsp;{% endif %}</td>
-    </tr>
-    {% set l = l + 1 %}
-    {% endif %}{% endfor %}
-  </table>
+    <h1>{% trans date=change.date|reltimesince|low %}Edit from {{ date }}{% endtrans %} <small>{% trans post=post.pk %}Post #{{ post }} Changelog{% endtrans %}</small></h1>
+    <ul class="unstyled header-stats pull-left">
+      <li><i class="icon-time"></i> <a href="{% url 'thread_find' thread=thread.pk, slug=thread.slug, post=post.pk %}">{{ post.date|reltimesince }}</a></li>
+      <li><i class="icon-user"></i> {% if change.user_id %}<a href="{% url 'user' user=change.user_id, username=change.user_slug %}">{{ change.user_name }}</a>{% else %}{{ change.user_name }}{% endif %}</li>
+      {% if acl.users.can_see_users_trails() %}
+      <li><i class="icon-globe"></i> {{ change.ip }}</li>
+      <li><i class="icon-qrcode"></i> {{ change.agent }}</li>
+      {% endif %}
+      {% if change.change != 0 %}<li><i class="icon-{% if change.change > 0 %}plus{% elif change.change < 0 %}minus{% endif %}"></i> {% if change.change > 0 -%}
+      {% trans chars=change.change %}Added one character{% pluralize %}Added {{ chars }} characters{% endtrans %}
+      {%- elif change.change < 0 -%}
+      {% trans chars=change.change|abs %}Removed one character{% pluralize %}Removed {{ chars }} characters{% endtrans %}
+      {%- endif %}</li>{% endif %}
+    </ul>
+  </div>
 </div>
-{% if prev or next %}
-<div class="list-nav last">
-  {{ pager() }}
+
+<div class="container container-primary">
+  <div class="post-diff">
+    {% if message %}
+    <div class="messages-list">
+      {{ macros.draw_message(message) }}
+    </div>
+    {% endif %}
+
+    {% if change.reason %}
+    <p class="lead">{{ change.reason }}</p>
+    {% endif %}
+
+    {% if acl.threads.can_edit_reply(user, forum, thread, post) or prev or next %}
+    <div class="diff-extra">
+      {{ pager() }}
+      {% if user.is_authenticated() and acl.threads.can_make_revert(forum, thread) %}
+      <form class="form-inline pull-right" action="{% url 'changelog_revert' thread=thread.pk, slug=thread.slug, post=post.pk, change=change.pk %}" method="post">
+        <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+        <button type="submit" class="btn btn-danger">{% trans %}Revert this edit{% endtrans %}</button></li>
+      </form>
+      {%- endif %}
+    </div>
+    {% endif %}
+
+    <div class="post-diff-details">
+      <table>
+        <tbody>
+          {% for line in diff %}{% if line[0] != "?" %}
+          <tr>
+            <td class="line"><a href="#{{ l }}">{{ l }}.</a></td>
+            <td class="{% if line[0] == '+' %}added{% elif line[0] == '-' %}removed{% else %}stag{% endif %}{% if l is even %} even{% endif %}">{% if line[2:] %}{{ line[2:] }}{% else %}&nbsp;{% endif %}</td>
+          </tr>
+          {% set l = l + 1 %}
+          {% endif %}{% endfor %}
+        </tbody>
+      </table>
+    </div>
+
+    {% if prev or next %}
+    <div class="diff-extra">
+      {{ pager() }}
+    </div>
+    {% endif %}
+
+  </div>
 </div>
-{% endif %}
 {% endblock %}
 
 
 {% macro pager() %}
-  <ul class="pager pull-left">
-{% if prev %}<li><a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=prev.pk %}"><i class="icon-chevron-left"></i> {{ prev.date|reldate }}</a></li>{% endif %}
-{% if next %}<li><a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=next.pk %}">{{ next.date|reldate }} <i class="icon-chevron-right"></i></a></li>{% endif %}
+{% if prev or prev %}
+<div class="pagination pull-left">
+  <ul>
+    {% if prev %}<li><a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=prev.pk %}"><i class="icon-chevron-left"></i> {{ prev.date|reldate }}</a></li>{% endif %}
+    {% if next %}<li><a href="{% url 'changelog_diff' thread=thread.pk, slug=thread.slug, post=post.pk, change=next.pk %}">{{ next.date|reldate }} <i class="icon-chevron-right"></i></a></li>{% endif %}
   </ul>
+</div>
+{% endif %}
 {% endmacro %}