Improve styling in headers and thread view

15 files changed, 206 insertions, 113 deletions

diff --git a/hyperkitty/static/css/style.css b/hyperkitty/static/css/style.css
index fe53a2f..a8c7a16 100644
--- a/hyperkitty/static/css/style.css
+++ b/hyperkitty/static/css/style.css
@@ -55,24 +55,27 @@ body {
 
 
 /* Add icons to some text */
-.participant {
-    background: url("../img/participant.png") no-repeat scroll left top;
+.participant, .discussion, .saved, .notsaved {
     padding-left: 20px;
+    padding-right: 10px;
+    background: no-repeat scroll left center;
+}
+
+.participant {
+    background-image: url("../img/participant.png");
+    padding-left: 16px;
 }
 
 .discussion {
-    background: url("../img/discussion.png") no-repeat scroll left top;
-    padding-left: 20px;
+    background-image: url("../img/discussion.png");
 }
 
 .saved {
-    background: url("../img/saved.png") no-repeat scroll left top;
-    padding-left: 20px;
+    background-image: url("../img/saved.png");
 }
 
 .notsaved {
-    background: url("../img/notsaved.png") no-repeat scroll left top;
-    padding-left: 20px;
+    background-image: url("../img/notsaved.png");
 }
 
 .gravatar {
@@ -209,7 +212,7 @@ body {
     font-style: italic;
 }
 
-#recent_activities{
+#recent_activities, #month-view {
     width: 88%;
     margin-top: 20px;
     margin-right: 10px;
@@ -234,9 +237,43 @@ body {
 #archives li {
     list-style-type: none;
 }
+#archives li.current {
+    font-weight: bold;
+}
+
+/* Month view header */
+
+#month-view header {
+    margin-bottom: 4em;
+}
+
+#month-view header .list-name {
+    display: inline;
+    font-size: 190%;
+    font-weight: bold;
+    padding-right: 0.5em;
+}
+
+#month-view header .month-name {
+    display: inline;
+    font-size: 190%;
+    padding-right: 1em;
+}
+
+#month-view header .month-info {
+    display: inline;
+    list-style-type: none;
+}
+#month-view header .month-info li {
+    display: inline;
+}
 
 /* Thread list */
 
+.thread {
+    margin-bottom: 3em;
+}
+
 .thread_title {
     font-weight: bold;
     font-size: 125%;
@@ -249,12 +286,20 @@ body {
 }
 
 .thread_content {
-    margin-top:10px;
+    margin-top: 0.5em;
 }
 
 .thread_info {
     text-align:right;
-    padding-right: 50px;
+}
+.thread_info .btn {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.thread_content .thread_email {
+    display: inline-block;
+    margin-bottom: 5px;
 }
 
 .tags {
@@ -265,7 +310,7 @@ body {
 
 /* Part containing the body of the mail which can be shown/hidden */
 .expander {
-    width: 665px;
+    width: 740px;
     background-image: linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
     background-image: -o-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
     background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
diff --git a/hyperkitty/static/css/thread.css b/hyperkitty/static/css/thread.css
index 43fca6b..cc3e8a4 100644
--- a/hyperkitty/static/css/thread.css
+++ b/hyperkitty/static/css/thread.css
@@ -153,6 +153,7 @@ header .thread-newer {
     vertical-align: middle;
 }
 
+
 /* Main section with the whole thread */
 
 /* First email of the thread. */
diff --git a/hyperkitty/templates/base.html b/hyperkitty/templates/base.html
index 7a62c5f..c679687 100644
--- a/hyperkitty/templates/base.html
+++ b/hyperkitty/templates/base.html
@@ -18,22 +18,22 @@
 	      <div class="navbar-inner">
 	        <div class="container">
 	          <div class="nav-collapse collapse">
-	          	
-	           	{% if user.is_authenticated %}
+
+				{% if user.is_authenticated %}
 					 <li class="user_nav">
-					 	<a class="mm_logout" style="float:right;" href="{% url user_logout %}">Logout</a>
+						<a class="mm_logout" style="float:right;" href="{% url user_logout %}">Logout</a>
 					 </li>
 					 <li class="user_nav" style="float:right;">
-					 	<a style="float:right;" href="{% url user_profile %}">{{ user.username }}</a>
+						<a style="float:right;" href="{% url user_profile %}">{{ user.username }}</a>
 					</li>
 				{% else %}
 					 <li class="user_nav" style="float:right;">
-					 	<a class="mm_user" style="float:right;" href="{% url user_login %}">Login</a>
+						<a class="mm_user" style="float:right;" href="{% url user_login %}">Login</a>
 					 </li>
 					 <li class="user_nav" style="float:right;">
-					 	<a style="float:right;" href="{% url user_registration %}"> Sign Up </a>
+						<a style="float:right;" href="{% url user_registration %}"> Sign Up </a>
 					</li>
-				{% endif %}		  
+				{% endif %}
 
 
 	            <ul class="nav">
diff --git a/hyperkitty/templates/messages/message.html b/hyperkitty/templates/messages/message.html
index c4325dc..874a849 100644
--- a/hyperkitty/templates/messages/message.html
+++ b/hyperkitty/templates/messages/message.html
@@ -33,7 +33,7 @@
 {% else %}
 <div class="email_body">
 {% endif %}
-{{email.content}}
+{{email.content|urlizetrunc:76}}
 </div>
 
 {% if unfolded and email.attachments|count %}
@@ -49,7 +49,7 @@
 
 <ul class="email_info inline" messageid="{{email.message_id_hash}}">
 {% if settings.USE_MOCKUPS == True %}
-	<li class="likestatus neutral">
+	<li class="likestatus {{email.likestatus}}">
 		+{{email.likes}}/-{{email.dislikes}}
 	</li>
 	<li class="voteup">
diff --git a/hyperkitty/templates/month_view.html b/hyperkitty/templates/month_view.html
index 205fe79..27f9f99 100644
--- a/hyperkitty/templates/month_view.html
+++ b/hyperkitty/templates/month_view.html
@@ -1,18 +1,37 @@
 {% extends "base.html" %}
-{% load poll_extras %}
 {% load gravatar %}
+{% load hk_generic %}
 {% load storm %}
 
 {% block content %}
 
-<div id="recent_activities">
+<div id="month-view">
+
+    <header>
+        <div class="list-name">{{ mlist.display_name|default:mlist.name }}</div>
+        <div class="month-name">{{ month|date:"F Y"|capfirst }}</div>
+        <ul class="month-info">
+            <li class="participant">
+                {{ month_participants }} participants
+            </li>
+            <li class="discussion">
+                {{ month_discussions }} discussions
+            </li>
+        </ul>
+        {% if mlist.display_name %}
+        <p class="list-address">
+            <a href="mailto:{{ list_address }}">{{ list_address }}</a>
+        </p>
+        {% endif %}
+    </header>
+
 	{% for email in threads %}
 	<!-- New thread -->
 	<div class="thread">
 		<div class="notsaved">
-			<span class="thread_title"> <a name="{{email.thread_id}}"
-				href="{% url thread threadid=email.thread_id, mlist_fqdn=list_address %}">{{ email.subject|strip_subject:mlist }}</a> </span>
-			<span class="thread_date"> {{email.date}}</span>
+			<span class="thread_title"><a name="{{email.thread_id}}"
+				href="{% url thread threadid=email.thread_id, mlist_fqdn=list_address %}">{{ email.subject|strip_subject:mlist }}</a></span>
+			<span class="thread_date">{{email.date|timesince }}</span>
 		</div>
 		<div class="thread_content">
 			{% if email.category_tag %}
@@ -32,7 +51,7 @@
 				{% endif %}
 				{{email.sender_name}}
 			</div>
-			<div class="inline-block thread_email">
+			<div class="thread_email">
 				<span class="expander"> {{email.content}} </span>
 			</div>
 		</div>
@@ -58,11 +77,19 @@
 				</li>
 			</ul>
             {% if settings.USE_MOCKUPS == True %}
-			<ul class="inline-block">
-				<li class="like">
-					+{{email.avglike}} / - {{email.avgdislike}}
+			<ul class="inline-block" messageid="{{email.message_id_hash}}">
+				<li class="likestatus {{email.likestatus}}">
+					+{{email.avglike}}/-{{email.avgdislike}}
+				</li>
+				<li class="voteup">
+					<a class="youlike" href="#like">Like</a>
+				</li>
+				<li class="votedown">
+					<a class="youdislike" href="#dislike">Dislike</a>
 				</li>
 			</ul>
+            <a href="{% url thread threadid=email.thread_id, mlist_fqdn=list_address %}"
+               class="btn">Show discussion</a>
             {% endif %}
 		</div>
 	</div>
@@ -70,24 +97,11 @@
 	{% empty %}
 		Sorry no emails could be found for your search.
 	{% endfor %}
-	
+
 	{% include "paginator.html" %}
 </div>
 
-<div id="archives">
-	{% for key, value in archives_length|sort %}
-	<h3>{{ key }}</h3>
-	<div>
-		<ul>
-			{% for ar_month in value %}
-			<li>
-				<a href="{% url archives_with_month year=key, mlist_fqdn=list_address, month=ar_month %}"> {{ ar_month|tomonth }} </a>
-			</li>
-			{% endfor %}
-		</ul>
-	</div>
-	{% endfor %}
-</div>
+{% include 'threads/month_list.html' %}
 
 {% endblock %}
 
diff --git a/hyperkitty/templates/recent_activities.html b/hyperkitty/templates/recent_activities.html
index 4bca218..f044dad 100644
--- a/hyperkitty/templates/recent_activities.html
+++ b/hyperkitty/templates/recent_activities.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load poll_extras %}
+{% load hk_generic %}
 {% load gravatar %}
 {% load storm %}
 
@@ -202,20 +202,9 @@
     {% endif %}
 
 </section>
-<section id="archives">
-	{% for key, value in archives_length|sort %}
-	<h3>{{ key }}</h3>
-	<div>
-		<ul>
-			{% for ar_month in value %}
-			<li>
-				<a href="{% url archives_with_month year=key, mlist_fqdn=list_address, month=ar_month %}">{{ ar_month|tomonth }}</a>
-			</li>
-			{% endfor %}
-		</ul>
-	</div>
-	{% endfor %}
-</section>
+
+{% include 'threads/month_list.html' %}
+
 {% endblock %}
 
 {% block additionaljs %}
diff --git a/hyperkitty/templates/search.html b/hyperkitty/templates/search.html
index 0fd6e44..5763eeb 100644
--- a/hyperkitty/templates/search.html
+++ b/hyperkitty/templates/search.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load poll_extras %}
+{% load hk_generic %}
 {% load gravatar %}
 
 {% block content %}
@@ -59,14 +59,14 @@
 			</li>
 		</ul>
 		<ul class="inline-block">
-			<li class="like">
+			<li class="likestatus {{email.likestatus}}">
 				+{{email.liked}}
 			</li>
-			<li class="youlike">
-				<a href="#like"> Like</a>
+			<li class="voteup">
+				<a class="youlike" href="#like">Like</a>
 			</li>
-			<li class="youdislike">
-				<a href="#dislike"> Dislike</a>
+			<li class="votedown">
+				<a class="youdislike" href="#dislike">Dislike</a>
 			</li>
 		</ul>
 	</div>
diff --git a/hyperkitty/templates/thread.html b/hyperkitty/templates/thread.html
index b019d8a..3fe03f6 100644
--- a/hyperkitty/templates/thread.html
+++ b/hyperkitty/templates/thread.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% load gravatar %}
-{% load storm %}
+{% load hk_generic %}
 
 {% block additional_stylesheets %}
 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" />
diff --git a/hyperkitty/templates/threads/month_list.html b/hyperkitty/templates/threads/month_list.html
new file mode 100644
index 0000000..b3918f8
--- /dev/null
+++ b/hyperkitty/templates/threads/month_list.html
@@ -0,0 +1,17 @@
+{% load hk_generic %}
+
+<div id="archives">
+	{% for year, months in archives_length|sort %}
+	<h3>{{ year }}</h3>
+	<div>
+		<ul>
+			{% for ar_month in months %}
+			<li class="{% if ar_month == month.month %}current{% endif %}">
+				<a href="{% url archives_with_month year=year, mlist_fqdn=list_address, month=ar_month %}"
+                   >{{ ar_month|monthtodate:year|date:"F" }}</a>
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+	{% endfor %}
+</div>
diff --git a/hyperkitty/templates/user_profile.html b/hyperkitty/templates/user_profile.html
index 6e58549..f5bca76 100644
--- a/hyperkitty/templates/user_profile.html
+++ b/hyperkitty/templates/user_profile.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% load poll_extras %}
+{% load hk_generic %}
 
 {% block content %}
     <h1>User Profile <span>- {{ user }}</span></h1>
diff --git a/hyperkitty/templatetags/poll_extras.py b/hyperkitty/templatetags/hk_generic.py
index 0f243c6..5f30bc2 100644
--- a/hyperkitty/templatetags/poll_extras.py
+++ b/hyperkitty/templatetags/hk_generic.py
@@ -1,14 +1,17 @@
+import datetime
+import re
+
 from django import template
-from django.http import HttpRequest
 from django.utils.datastructures import SortedDict
-import re
 
 register = template.Library()
 
-@register.filter(name="trimString")
+
+@register.filter
 def trimString(str):
     return re.sub('\s+', ' ', str)
 
+
 @register.filter(name='sort')
 def listsort(value):
     if isinstance(value, dict):
@@ -30,13 +33,13 @@ def listsort(value):
         return value
     listsort.is_safe = True
 
-@register.filter(name="tomonth")
-def to_month(value):
-    months = ('January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December')
-    return months[value -1]
 
-@register.filter(name="strip_page")
+@register.filter(name="monthtodate")
+def to_date(month, year):
+    return datetime.date(year, month, 1)
+
+
+@register.filter
 def strip_page(value):
     print repr(value), repr(value)[-2]
     if not value:
@@ -53,3 +56,37 @@ def strip_page(value):
     else:
         output = value.rsplit('/', 1)
     return output[0]
+
+
+# From http://djangosnippets.org/snippets/1259/
+@register.filter
+def truncatesmart(value, limit=80):
+    """
+    Truncates a string after a given number of chars keeping whole words.
+
+    Usage:
+        {{ string|truncatesmart }}
+        {{ string|truncatesmart:50 }}
+    """
+    try:
+        limit = int(limit)
+    # invalid literal for int()
+    except ValueError:
+        # Fail silently.
+        return value
+
+    # Make sure it's unicode
+    value = unicode(value)
+
+    # Return the string itself if length is smaller or equal to the limit
+    if len(value) <= limit:
+        return value
+
+    # Cut the string
+    value = value[:limit]
+
+    # Break into words and remove the last
+    words = value.split(' ')[:-1]
+
+    # Join the words and return
+    return ' '.join(words) + '...'
diff --git a/hyperkitty/templatetags/storm.py b/hyperkitty/templatetags/storm.py
index e0443ad..a116430 100644
--- a/hyperkitty/templatetags/storm.py
+++ b/hyperkitty/templatetags/storm.py
@@ -11,37 +11,3 @@ def count(expr):
 @register.filter(name="strip_subject")
 def count(subject, mlist):
     return stripped_subject(mlist, subject)
-
-
-# From http://djangosnippets.org/snippets/1259/
-@register.filter
-def truncatesmart(value, limit=80):
-    """
-    Truncates a string after a given number of chars keeping whole words.
-
-    Usage:
-        {{ string|truncatesmart }}
-        {{ string|truncatesmart:50 }}
-    """
-    try:
-        limit = int(limit)
-    # invalid literal for int()
-    except ValueError:
-        # Fail silently.
-        return value
-
-    # Make sure it's unicode
-    value = unicode(value)
-
-    # Return the string itself if length is smaller or equal to the limit
-    if len(value) <= limit:
-        return value
-
-    # Cut the string
-    value = value[:limit]
-
-    # Break into words and remove the last
-    words = value.split(' ')[:-1]
-
-    # Join the words and return
-    return ' '.join(words) + '...'
diff --git a/hyperkitty/views/list.py b/hyperkitty/views/list.py
index d8ea29a..91caa99 100644
--- a/hyperkitty/views/list.py
+++ b/hyperkitty/views/list.py
@@ -140,6 +140,14 @@ def archives(request, mlist_fqdn, year=None, month=None, day=None):
         except:
             thread.avgdislike = 0
 
+        thread.likestatus = "neutral"
+        if thread.avglike - thread.avgdislike >= 10:
+            thread.likestatus = "likealot"
+        elif thread.avglike - thread.avgdislike > 0:
+            thread.likestatus = "like"
+        #elif thread.avglike - thread.avgdislike < 0:
+        #    thread.likestatus = "dislike"
+
         threads[cnt] = thread
         cnt = cnt + 1
 
@@ -170,7 +178,8 @@ def archives(request, mlist_fqdn, year=None, month=None, day=None):
         'is_last': pageNo == paginator.num_pages,
         'list_address': mlist_fqdn,
         'search_form': search_form,
-        'month': month_string,
+        'month': begin_date,
+        'month_num': begin_date.month,
         'month_participants': len(participants),
         'month_discussions': len(threads),
         'threads': threads,
@@ -256,7 +265,7 @@ def list(request, mlist_fqdn=None):
         'mlist' : mlist,
         'list_address': mlist_fqdn,
         'search_form': search_form,
-        'month': 'Recent activity',
+        'month': None,
         'month_participants': len(participants),
         'month_discussions': len(threads),
         'top_threads': top_threads[:5],
diff --git a/hyperkitty/views/message.py b/hyperkitty/views/message.py
index 19242fd..a1ca917 100644
--- a/hyperkitty/views/message.py
+++ b/hyperkitty/views/message.py
@@ -70,6 +70,13 @@ def index(request, mlist_fqdn, hashid):
     message.votes = votes
     message.likes = likes
     message.dislikes = dislikes
+    message.likestatus = "neutral"
+    if message.likes - message.dislikes >= 10:
+        message.likestatus = "likealot"
+    elif thread.likes - message.dislikes > 0:
+        message.likestatus = "like"
+    #elif message.likes - message.dislikes < 0:
+    #    message.likestatus = "dislike"
 
     c = RequestContext(request, {
         'list_name' : list_name,
diff --git a/hyperkitty/views/thread.py b/hyperkitty/views/thread.py
index 558e51d..577c8f4 100644
--- a/hyperkitty/views/thread.py
+++ b/hyperkitty/views/thread.py
@@ -72,6 +72,14 @@ def thread_index (request, mlist_fqdn, threadid):
         message.votes = votes
         message.likes = likes
         message.dislikes = dislikes
+        message.likestatus = "neutral"
+        if message.likes - message.dislikes >= 10:
+            message.likestatus = "likealot"
+        elif thread.likes - message.dislikes > 0:
+            message.likestatus = "like"
+        #elif message.likes - message.dislikes < 0:
+        #    message.likestatus = "dislike"
+
 
         # Statistics on how many participants and messages this month
         participants[message.sender_name] = {'email': message.sender_email}