Redesigned post karmas view for cranefly

static/cranefly/css/cranefly.css

@@ -860,6 +860,7 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 .header-primary .header-tabs li .form-inline{margin:0px;margin-left:14px;margin-bottom:7px;}.header-primary .header-tabs li .form-inline .btn-icon{padding-left:7px;padding-right:7px;}
 html,body{height:100%;}
 #wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -100px;}#wrap .container-primary{padding-top:20px;padding-bottom:120px;}#wrap .container-primary .page-description{margin-bottom:20px;}
+#wrap .container-primary hr{border:none;border-top:1px solid #eeeeee;}
 footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
 footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .credits a:active,footer .credits a:visited,footer .credits a:hover{color:#555555;}
 ::selection{background:#cf402e;color:#f89406;}
@@ -1093,6 +1094,12 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .thread-quick-reply{overflow:auto;margin-top:20px;}.thread-quick-reply .user-avatar{border-radius:3px;float:left;width:125px;height:125px;}
 .thread-quick-reply .arrow{border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:14px solid #ffffff;float:left;width:0;height:0;position:relative;top:7px;left:15px;z-index:999;}
 .thread-quick-reply .editor{margin-left:153px;}
+.post-votes-list .vote-user,.post-votes-list .vote-user:link,.post-votes-list .vote-user:visited{display:block;color:#555555;font-size:17.5px;font-weight:bold;}
+.post-votes-list .vote-user .vote-icon{background-color:#999999;border-radius:3px;padding:2px 3px;position:relative;bottom:1.75px;font-size:14px;}.post-votes-list .vote-user .vote-icon i{background-image:url("../img/glyphicons-halflings-white.png");}
+.post-votes-list a.vote-user:hover,.post-votes-list a.vote-user:active{color:#333333;text-decoration:none;}
+.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;}
 .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.less

@@ -88,6 +88,7 @@
 @import "cranefly/profiles.less";
 @import "cranefly/forum.less";
 @import "cranefly/thread.less";
+@import "cranefly/karmas.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/karmas.less

@@ -0,0 +1,55 @@
+// Post Love/Hate Votes List
+// -------------------------
+
+.post-votes-list {
+  .vote-user {
+    &, &:link, &:visited {
+      display: block;
+
+      color: @gray;
+      font-size: @fontSizeLarge;
+      font-weight: bold;
+    }
+
+    .vote-icon {
+      background-color: @grayLight;
+      border-radius: @baseBorderRadius;
+      padding: 2px 3px;
+      position: relative;
+      bottom: (@fontSizeLarge - @baseFontSize) / 2;
+
+      font-size: @baseFontSize;
+
+      i {
+        background-image: url("@{iconWhiteSpritePath}");
+      }
+    }
+  }
+
+  a.vote-user {
+    &:hover, &:active {
+      color: @textColor;
+      text-decoration: none;
+    }
+  }
+
+  .post-likes {
+    .vote-icon {
+      background-color: @green;
+    }
+  }
+
+  .post-hates {
+    .vote-icon {
+      background-color: @red;
+    }
+  }
+
+  .vote-date {
+    margin: 0px;
+    padding: 0px;
+    
+    color: @grayLight;
+    font-size: @fontSizeMini;
+  }
+}

static/cranefly/css/cranefly/scaffolding.less

@@ -18,6 +18,11 @@ html, body {
     .page-description {
       margin-bottom: @baseLineHeight;
     }
+
+    hr {
+      border: none;
+      border-top: 1px solid @grayLighter;
+    }
   }
 }
 

templates/cranefly/threads/karmas.html

@@ -5,95 +5,97 @@
 
 {% block title %}{{ macros.page_title(title=(_("Post #%(post)s Votes") % {'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 'thread' thread=thread.pk, slug=thread.slug %}">{{ thread.name }}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
 <li class="active">{% trans post=post.pk %}Post #{{ post }} Votes{% endtrans %}
 {%- endblock %}
 
-{% block content %}
-<div class="page-header">
-  <ul class="breadcrumb">
-    {{ self.breadcrumb() }}</li>
-  </ul>
-  <h1>{% trans post=post.pk %}Post #{{ post }} Votes{% 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-thumbs-up"></i> {{ post.upvotes - post.downvotes }}</li>
-  </ul>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {{ messages_list(messages) }}
+    <ul class="breadcrumb">
+      {{ self.breadcrumb() }}</li>
+    </ul>
+    <h1>{% trans post=post.pk %}Post #{{ post }} Votes{% 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>
+      <li><i class="icon-thumbs-up"></i> {{ post.upvotes }}</li>
+      <li><i class="icon-thumbs-down"></i> {{ post.downvotes }}</li>
+    </ul>
+  </div>
 </div>
 
-<h2>{% trans %}Upvotes{% endtrans %} <small>{% trans count=upvotes|length, votes=upvotes|length|intcomma -%}
-    One upvote
-    {%- pluralize -%}
-    {{ votes }} upvotes
-    {%- endtrans %}</small></h2>
-{% if upvotes %}
-<table class="table table-striped table-users list-tiny">
-  <thead>
-    <tr>
-      <th colspan="4">{% trans %}Votes List{% endtrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for row in upvotes|batch(4, '') %}
-    <tr>
-      {% for vote in row %}
-      <td class="span3">
-        {% if vote %}
-        {{ vote_details(vote) }}
-        {% else %}
-        &nbsp;
-        {% endif %}
-      </td>
-      {% endfor %}
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<p class="lead">{% trans %}Nobody has upvoted this post.{% endtrans %}</p>
-{% endif %}
+<div class="container container-primary">
+  <div class="post-votes-list">
+    <div class="post-likes">
+      <h2>{% trans count=upvotes|length, votes=upvotes|length|intcomma -%}
+        One like
+        {%- pluralize -%}
+        {{ votes }} likes
+        {%- endtrans %}</h2>
+      {% if upvotes %}
+      <table class="table table-striped">
+        <tbody>
+          {% for row in upvotes|batch(4, '') %}
+          <tr>
+            {% for vote in row %}
+            <td class="span3">
+              {% if vote %}
+              {{ vote_details(vote, 'thumbs-up') }}
+              {% else %}
+              &nbsp;
+              {% endif %}
+            </td>
+            {% endfor %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      {% else %}
+      <p class="lead">{% trans %}Nobody liked this post.{% endtrans %}</p>
+      {% endif %}
+    </div>
 
-<hr>
+    <hr>
 
-<h2>{% trans %}Downvotes{% endtrans %} <small>{% trans count=downvotes|length, votes=downvotes|length|intcomma -%}
-    One downvote
-    {%- pluralize -%}
-    {{ votes }} downvotes
-    {%- endtrans %}</small></h2>
-{% if downvotes %}
-<table class="table table-striped table-users list-tiny">
-  <thead>
-    <tr>
-      <th colspan="4">{% trans %}Votes List{% endtrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for row in downvotes|batch(4, '') %}
-    <tr>
-      {% for vote in row %}
-      <td class="span3">
-        {% if vote %}
-        {{ vote_details(vote) }}
-        {% else %}
-        &nbsp;
-        {% endif %}
-      </td>
-      {% endfor %}
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% else %}
-<p class="lead">{% trans %}Nobody has downvoted this post.{% endtrans %}</p>
-{% endif %}
+    <div class="post-hates">
+      <h2>{% trans count=downvotes|length, votes=downvotes|length|intcomma -%}
+        One hate
+        {%- pluralize -%}
+        {{ votes }} hates
+        {%- endtrans %}</h2>
+      {% if downvotes %}
+      <table class="table table-striped">
+        <tbody>
+          {% for row in downvotes|batch(4, '') %}
+          <tr>
+            {% for vote in row %}
+            <td class="span3">
+              {% if vote %}
+              {{ vote_details(vote, 'thumbs-down') }}
+              {% else %}
+              &nbsp;
+              {% endif %}
+            </td>
+            {% endfor %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      {% else %}
+      <p class="lead">{% trans %}Nobody hated this post.{% endtrans %}</p>
+      {% endif %}
+    </div>
+  </div>
+</div>
 {% endblock %}
 
-{% macro vote_details(vote) %}
-<div>{% if vote.user_id %}<a href="{% url 'user' user=vote.user_id, username=vote.user_slug %}">{{ vote.user_name }}</a>{% else %}<em><strong>{{ vote.user_name }}</strong></em>{% endif %}</div>
-<div class="muted{% if acl.users.can_see_users_trails() %} tooltip-top{% endif %}"{% if acl.users.can_see_users_trails() %} title="{{ vote.agent }}"{% endif %}>{{ vote.date|reldate }}{% if acl.users.can_see_users_trails() %}, {{ vote.ip }}{% endif %}</div>
+{% macro vote_details(vote, icon) %}
+{% if vote.user_id %}<a href="{% url 'user' user=vote.user_id, username=vote.user_slug %}" class="vote-user"><span class="vote-icon"><i class="icon-{{ icon }}"></i></span> {{ vote.user_name }}</a>{% else %}<span class="vote-user"><span class="vote-icon"><i class="icon-{{ icon }}"></i></span> {{ vote.user_name }}</span>{% endif %}
+<p class="vote-date {% if acl.users.can_see_users_trails() %} tooltip-top{% endif %}"{% if acl.users.can_see_users_trails() %} title="{{ vote.agent }}"{% endif %}>{{ vote.date|reldate }}{% if acl.users.can_see_users_trails() %}, {{ vote.ip }}{% endif %}</p>
 {% endmacro %}