From fa04cb6fb6da7861c6d23991a5c2636e5b2a641f Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Wed, 6 Feb 2013 21:29:42 +0100
Subject: Refactoring of HTML tags and CSS classes

---
 hyperkitty/static/css/hyperkitty.css           | 104 ++++++++++++-------------
 hyperkitty/static/js/hyperkitty.js             |  19 +++--
 hyperkitty/templates/message.html              |   2 +-
 hyperkitty/templates/messages/first_email.html |   7 --
 hyperkitty/templates/messages/like_form.html   |  12 +--
 hyperkitty/templates/messages/message.html     |  96 ++++++++++++-----------
 hyperkitty/templates/thread.html               |  20 ++---
 7 files changed, 126 insertions(+), 134 deletions(-)
 delete mode 100644 hyperkitty/templates/messages/first_email.html

(limited to 'hyperkitty')

diff --git a/hyperkitty/static/css/hyperkitty.css b/hyperkitty/static/css/hyperkitty.css
index 0cadda5..ad73d02 100644
--- a/hyperkitty/static/css/hyperkitty.css
+++ b/hyperkitty/static/css/hyperkitty.css
@@ -169,41 +169,45 @@ table.user-data {
     width: 40px;
 }
 
+
 /* Like / dislike */
 
 form.likeform {
     display: inline;
     margin: 0;
+    margin-right: 1em;
     padding: 0;
 }
 .likestatus {
     padding-left: 20px;
-    margin-right: 3em;
+    margin-right: 1.5em;
     font-weight: bold;
 }
+
 .neutral {
     background: url("../img/neutral.png") no-repeat scroll left;
 }
-
 .like {
     background: url("../img/like.png") no-repeat scroll left;
 }
-
 .likealot {
     background: url("../img/likealot.png") no-repeat scroll left;
 }
 
+.youlike,
+.youdislike {
+    padding-left: 15px;
+    margin-left: 0.5em;
+}
 .youlike {
     background: url("../img/youlike.png") no-repeat scroll left;
-    padding-left: 15px;
-    padding-right: 5px;
 }
 .youdislike {
     background: url("../img/youdislike.png") no-repeat scroll left;
-    padding-left: 15px;
-    padding-right: 5px;
 }
 
+
+
 /* Top of the page -- header */
 .header {
     background-color: rgb(236, 236, 236);
@@ -533,30 +537,42 @@ form.likeform {
     display: none;
 }
 
+
+
+/* Attachments */
+
 p.attachments {
     margin-bottom: 0;
     font-weight: bold;
 }
-li.attachments a.attachments {
-    padding-left: 20px;
-    margin-left: 1em;
+a.attachments {
+    padding-left: 18px;
     background: url("../img/mail-attachment.png") no-repeat scroll left;
 }
-li.attachments ul {
+.email-info div.attachments {
+    display: inline;
+    padding: 0 1em;
+}
+.email-info .attachments ul.attachments-list {
+    display: none;
     position: absolute;
-    background-color: #F6F6F6;
-    padding-left: 20px;
-    margin-left: 1em;
+    margin-left: 0;
+    padding-right: 0.5em;
+    border: 1px solid #aaa;
+    border-top: none;
+    z-index: 1;
+}
+.even .email-info .attachments ul.attachments-list {
+    background-color: rgb(246, 246, 246);
+}
+.odd .email-info .attachments ul.attachments-list {
+    background-color: rgb(238, 238, 238);
 }
-li.attachments ul li {
+.email-info .attachments ul.attachments-list li {
     list-style-position: inside;
     padding-left: 0.5em;
 }
 
-ul.attachments-list li {
-    display: list-item;
-    list-style-type: disc;
-}
 
 
 /* Message view */
@@ -738,41 +754,35 @@ ul.attachments-list li {
 
 /* First email of the thread. */
 
-.first_email {
-}
-
-.email_header {
+.email-header {
     position:relative;
     margin-bottom: 1em;
     height: 40px;
 }
 
-.email_header .gravatar {
+.email-header .gravatar {
     margin-right: 10px;
     display: inline-block;
     vertical-align: middle;
 }
 
-.email_author .name{
+.email-author .name{
     color: rgb(55, 113, 200);
     font-weight: bold;
 }
-.email_author .rank{
+.email-author .rank{
     color: rgb(167, 169, 172);
     font-size: 80%;
     font-weight: bold;
 }
 
-.email .email_date {
-    font-size: 90%;
-}
-.first_email .email_date {
+.email-first .email-date {
     text-align: right;
 }
-.email_date .date {
+.email-date .date {
     font-weight: bold;
 }
-.email_date .time {
+.email-date .time {
     color: rgb(167, 169, 172);
     margin-left: 0.5em;
     border-bottom: 1px dashed rgb(167, 169, 172);
@@ -800,27 +810,11 @@ ul.attachments-list li {
     background-color: rgb(238, 238, 238);
 }
 
-.email {
-}
-
-.email .email_header {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.email .email_author {
-    font-size: 90%;
-}
-
-.first_email_body, .email_body {
+.email-body {
     white-space: pre;
-    display: inline-block;
-}
-.first_email_body {
-    width: 100%;
     overflow: auto;
 }
-.email_body{
+.replies .email-body {
     -webkit-border-radius: 5px 5px 5px 5px;
     -moz-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
@@ -830,17 +824,15 @@ ul.attachments-list li {
     padding: 5px;
     min-height: 40px;
     background-color: rgb(255, 255, 255);
-    width: 95%;
 }
 
-
-.email_body span.read-more a,
-.email_body span.read-less a {
+.email-body span.read-more a,
+.email-body span.read-less a {
     float: right;
     padding: 3px 10px 0px 0px;
 }
 
-.email_info {
+.email-info {
     padding: 0px;
     margin-top: 5px;
 }
@@ -867,7 +859,7 @@ ul.attachments-list li {
 a.reply {
   background: url("../img/reply.png") no-repeat left center;
   padding-left: 20px;
-  margin-left: 2em;
+  margin-left: 1em;
 }
 .reply-form {
     display: none;
diff --git a/hyperkitty/static/js/hyperkitty.js b/hyperkitty/static/js/hyperkitty.js
index 7464314..36812cf 100644
--- a/hyperkitty/static/js/hyperkitty.js
+++ b/hyperkitty/static/js/hyperkitty.js
@@ -61,8 +61,8 @@ function vote(elem, value) {
 
 
 function setup_vote() {
-    $(".voteup").click(function(e) { e.preventDefault(); vote(this, 1); });
-    $(".votedown").click(function(e) { e.preventDefault(); vote(this, -1); });
+    $("a.youlike").click(function(e) { e.preventDefault(); vote(this, 1); });
+    $("a.youdislike").click(function(e) { e.preventDefault(); vote(this, -1); });
 }
 
 
@@ -163,7 +163,7 @@ function setup_replies() {
                 });
                 $('<div class="reply-result"><div class="alert alert-success">'
                   + response + '</div></div>')
-                    .appendTo(form.parents('.email_info').first())
+                    .appendTo(form.parents('.email-info').first())
                     .delay(2000).fadeOut('slow', function() { $(this).remove(); });
             },
             error: function(jqXHR, textStatus, errorThrown) {
@@ -246,15 +246,18 @@ function activity_graph(dates, data, baseurl) {
  */
 
 function setup_attachments() {
-    $("ul.email_info li.attachments ul.attachments-list").hide();
-    $("ul.email_info li.attachments > a").click(function() {
-        $(this).next("ul").fadeToggle('fast');
+    $(".email-info .attachments a.attachments").each(function() {
+        var att_list = $(this).next("ul.attachments-list");
+        var pos = $(this).position();
+        att_list.css("left", pos.left);
+        $(this).click(function() {
+            att_list.slideToggle('fast');
+        });
     });
 }
 
 function setup_quotes() {
-    $('div.email_body .quoted-switch a')
-        .add('div.first_email_body .quoted-switch a')
+    $('div.email-body .quoted-switch a')
         .click(function() {
             $(this).parent().next(".quoted-text").slideToggle('fast');
             return false;
diff --git a/hyperkitty/templates/message.html b/hyperkitty/templates/message.html
index c4df974..10e71ec 100644
--- a/hyperkitty/templates/message.html
+++ b/hyperkitty/templates/message.html
@@ -24,7 +24,7 @@
 		</div>
 
 		<section id="thread_content">
-			{% include 'messages/first_email.html' with first_mail=message %}
+			{% include 'messages/message.html' with email=message unfolded='True' %}
 		</section>
 
 	</div>
diff --git a/hyperkitty/templates/messages/first_email.html b/hyperkitty/templates/messages/first_email.html
deleted file mode 100644
index 50e0371..0000000
--- a/hyperkitty/templates/messages/first_email.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load gravatar %}
-
-<div class="first_email">
-	{% include 'messages/message.html' with email=first_mail unfolded='True' %}
-</div>
-
-{# vim: set noet: #}
diff --git a/hyperkitty/templates/messages/like_form.html b/hyperkitty/templates/messages/like_form.html
index 40b85c0..c27eaeb 100644
--- a/hyperkitty/templates/messages/like_form.html
+++ b/hyperkitty/templates/messages/like_form.html
@@ -1,15 +1,11 @@
 	<form method="post" class="likeform"
 	      action="{% url message_vote mlist_fqdn=list_address, message_id_hash=message_id_hash %}">
 	{% csrf_token %}
-	<li class="likestatus {{ object.likestatus }}">
+	<span class="likestatus {{ object.likestatus }}">
 		+<span class="likecount">{{ object.likes }}</span>/-<span class="dislikecount">{{ object.dislikes }}</span>
-	</li>
-	<li class="voteup">
-		<a class="youlike" href="#like">Like</a>
-	</li>
-	<li class="votedown">
-		<a class="youdislike" href="#dislike">Dislike</a>
-	</li>
+	</span>
+	<a class="youlike" href="#like">Like</a>
+	<a class="youdislike" href="#dislike">Dislike</a>
 	</form>
 
 {# vim: set noet: #}
diff --git a/hyperkitty/templates/messages/message.html b/hyperkitty/templates/messages/message.html
index 89ecda7..4e37290 100644
--- a/hyperkitty/templates/messages/message.html
+++ b/hyperkitty/templates/messages/message.html
@@ -2,52 +2,41 @@
 {% load gravatar %}
 {% load hk_generic %}
 
-<div class="email_header" id="{{email.message_id_hash}}">
-	<div class="email_date inline-block pull-right">
-		{% ifchanged %}
-		<span class="date">
-			{{email|viewer_date|date:"l, j F"}}
-			{% if unfolded %}
-			{{email|viewer_date|date:"Y"}}
+<div class="email{% if unfolded %} email-first{% endif %}">
+
+	<div class="email-header" id="{{email.message_id_hash}}">
+		<div class="email-date inline-block pull-right">
+			{% ifchanged %}
+			<span class="date">
+				{{email|viewer_date|date:"l, j F"}}
+				{% if unfolded %}
+				{{email|viewer_date|date:"Y"}}
+				{% endif %}
+			</span>
+			{% endifchanged %}
+			{% if unfolded %}<br />{% endif %}
+			<span class="time" title="Sender's time: {{email|sender_date|date:"l, j F H:i:s"}}">{{email|viewer_date|date:"H:i:s"}}</span>
+		</div>
+		<div class="gravatar{% if use_mockups %} pull-left{% endif %}">
+			{% gravatar email.sender_email 40 %}
+		</div>
+		<div class="email-author inline-block">
+			<span class="name"><a href="{% url message_index mlist_fqdn=list_address, message_id_hash=email.message_id_hash %}">{{email.sender_name|escapeemail}}</a></span>
+			{% if use_mockups %}
+			<br />
+			<span class="rank">
+				Rank 8
+			</span>
 			{% endif %}
-		</span>
-		{% endifchanged %}
-		{% if unfolded %}<br />{% endif %}
-		<span class="time" title="Sender's time: {{email|sender_date|date:"l, j F H:i:s"}}">{{email|viewer_date|date:"H:i:s"}}</span>
-	</div>
-	<div class="gravatar{% if use_mockups %} pull-left{% endif %}">
-		{% gravatar email.sender_email 40 %}
-	</div>
-	<div class="email_author inline-block">
-		<span class="name"><a href="{% url message_index mlist_fqdn=list_address, message_id_hash=email.message_id_hash %}">{{email.sender_name|escapeemail}}</a></span>
-		{% if use_mockups %}
-		<br />
-		<span class="rank">
-			Rank 8
-		</span>
-		{% endif %}
+		</div>
 	</div>
-</div>
-
-<div class="{% if unfolded %}first_{% endif %}email_body"
- >{{ email.content|snip_quoted|wordwrap:90|urlizetrunc:76|escapeemail }}</div>
 
-{% if unfolded and email.attachments|count %}
-<p class="attachments">Attachments:</p>
-<ul class="attachments-list">
-{% for attachment in email.attachments %}
-	<li><a href="{% url message_attachment mlist_fqdn=list_address, message_id_hash=email.message_id_hash, counter=attachment.counter, filename=attachment.name %}">{{attachment.name}}</a>
-		({{attachment.content_type}} &mdash; {{attachment.size|filesizeformat}})
-	</li>
-{% endfor %}
-</ul>
-{% endif %}
+	<div class="email-body"
+	 >{{ email.content|snip_quoted|wordwrap:90|urlizetrunc:76|escapeemail }}</div>
 
-<ul class="email_info inline">
-	{% include "messages/like_form.html" with message_id_hash=email.message_id_hash object=email %}
-	{% if not unfolded and email.attachments|count %}
-	<li class="attachments">
-		<a class="attachments" href="#attachments">{{ email.attachments|count }} attachment(s)</a>
+	{% if unfolded and email.attachments|count %}
+	<div class="attachments">
+		<p class="attachments">Attachments:</p>
 		<ul class="attachments-list">
 		{% for attachment in email.attachments %}
 			<li><a href="{% url message_attachment mlist_fqdn=list_address, message_id_hash=email.message_id_hash, counter=attachment.counter, filename=attachment.name %}">{{attachment.name}}</a>
@@ -55,9 +44,26 @@
 			</li>
 		{% endfor %}
 		</ul>
-	</li>
+	</div>
 	{% endif %}
-	{% include "messages/reply_form.html" with mlist_fqdn=list_address message_id_hash=email.message_id_hash %}
-</ul>
+
+	<div class="email-info">
+		{% include "messages/like_form.html" with message_id_hash=email.message_id_hash object=email %}
+		{% if not unfolded and email.attachments|count %}
+		<div class="attachments">
+			<a class="attachments" href="#attachments">{{ email.attachments|count }} attachment(s)</a>
+			<ul class="attachments-list">
+			{% for attachment in email.attachments %}
+				<li><a href="{% url message_attachment mlist_fqdn=list_address, message_id_hash=email.message_id_hash, counter=attachment.counter, filename=attachment.name %}">{{attachment.name}}</a>
+					({{attachment.content_type}} &mdash; {{attachment.size|filesizeformat}})
+				</li>
+			{% endfor %}
+			</ul>
+		</div>
+		{% endif %}
+		{% include "messages/reply_form.html" with mlist_fqdn=list_address message_id_hash=email.message_id_hash %}
+	</div>
+
+</div>
 
 {# vim: set noet: #}
diff --git a/hyperkitty/templates/thread.html b/hyperkitty/templates/thread.html
index 3cc3819..71e9da2 100644
--- a/hyperkitty/templates/thread.html
+++ b/hyperkitty/templates/thread.html
@@ -35,7 +35,7 @@
 		<section id="thread_content">
 
 			<!-- Start first email -->
-			{% include 'messages/first_email.html' %}
+			{% include 'messages/message.html' with email=first_mail unfolded='True' %}
 			<!-- End first email -->
 
 			<p class="sort-mode">
@@ -48,14 +48,16 @@
 				{% endif %}
 			</p>
 
-			{% for email in replies %}
-			<div class="{% cycle 'even' 'odd' %}"
-				{% if email.level %}style="margin-left:{{ email.level|multiply:"2" }}em;"{% endif %}>
-				<!-- Start email -->
-				{% include 'messages/message.html' %}
-				<!-- End of email -->
+			<div class="replies">
+				{% for email in replies %}
+				<div class="{% cycle 'even' 'odd' %}"
+					{% if email.level %}style="margin-left:{{ email.level|multiply:"2" }}em;"{% endif %}>
+					<!-- Start email -->
+					{% include 'messages/message.html' %}
+					<!-- End of email -->
+				</div>
+				{% endfor %}
 			</div>
-			{% endfor %}
 
 		</section>
 		</div>
@@ -79,7 +81,7 @@
 <script type="text/javascript">
 	$(document).ready(function() {
 		// hide quotes by default in the thread view
-		$('div.email_body .quoted-text').each(function() {
+		$('div.email-body .quoted-text').each(function() {
 			var linescount = $(this).text().split("\n").length;
 			if (linescount > 3) {
 				// hide if the quote is more than 3 lines long
-- 
cgit