summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--hyperkitty/static/css/hyperkitty.css104
-rw-r--r--hyperkitty/static/js/hyperkitty.js19
-rw-r--r--hyperkitty/templates/message.html2
-rw-r--r--hyperkitty/templates/messages/first_email.html7
-rw-r--r--hyperkitty/templates/messages/like_form.html12
-rw-r--r--hyperkitty/templates/messages/message.html96
-rw-r--r--hyperkitty/templates/thread.html20
7 files changed, 126 insertions, 134 deletions
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
generated by cgit (git 2.34.1) at 2025-07-03 01:19:00 +0000