Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve styling for digest page #11095

Closed
wants to merge 1 commit into from
Closed

Improve styling for digest page #11095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 110 additions & 75 deletions templates/zerver/emails/digest.source.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,136 @@
{% extends "zerver/emails/email_base_messages.html" %}

{% block content %}
Hello {{ name }},

<p>A lot has happened on Zulip while you've been away! <a href="{{ realm_uri }}">Visit Zulip</a> to catch up.</p>
<div class='alert'>
Hello {{ name }}! <br>
A lot has happened on Zulip while you've been away! <a href="{{ realm_uri }}">Visit Zulip</a> to catch up.
</div>

{% if unread_pms %}
<h2>Missed private messages</h2>
<p>You have some missed private messages. Here are some of them:</p>
<div id='private-messages'>
{% for recipient_block in unread_pms %}
<div class='recipient_block'>
<div class='recipient_header'>{{ recipient_block.header.html|safe }}</div>
<div class='message_content'>
{% for sender_block in recipient_block.senders %}
{% if sender_block.sender %} <div class="message_sender">{{ sender_block.sender }}</div>{% endif %}
{% for message_block in sender_block.content %}
<div class='message_content_block'>
{{ message_block.html|safe }}
<div class='container' style="border:1px solid; border-radius: 5px; margin-bottom: 20px; padding:0px; max-width: none;">
<h2 style="margin-bottom: 10px">Missed private messages</h2>
<h4>You have some missed private messages. Here are some of them:</h4>

<div style="padding: 0px 20px 0px 20px">
<div id='private-messages' style="width: auto">
{% for recipient_block in unread_pms %}
<div class='recipient_block'>
<div class='recipient_header'>
{{ recipient_block.header.html|safe }}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}

{% if remaining_unread_pms_count > 0 %}<p>+ {{ remaining_unread_pms_count }} more new private message{{ remaining_unread_pms_count|pluralize }}</p>{% endif %}
<p><a href="{{ realm_uri }}/#narrow/is/private">Catch up on the rest of your PMs.</a></p>
</div>
{% endif %}


{% if hot_conversations %}
<br />
<h2>Hot conversations</h2>
<p>
Here are some of the hot conversations that have happened while you've been gone:
</p>

{% for convo in hot_conversations %}
<div id='messages'>
{% for recipient_block in convo.first_few_messages %}
<div class='hot_convo_recipient_block'>
<div class='hot_convo_recipient_header'>{{ recipient_block.header.html|safe }}</div>
<div class='hot_convo_message_content'>
<div class='message_content' style="text-align: left">
{% for sender_block in recipient_block.senders %}
{% if sender_block.sender %} <div class="hot_convo_message_sender">{{ sender_block.sender }}</div>{% endif %}
{% if sender_block.sender %}
<div class="message_sender" style="padding:1px 6px 1px 6px">
{{ sender_block.sender }}
</div>
{% endif %}
{% for message_block in sender_block.content %}
<div class='hot_convo_message_content_block'>
<div class='message_content_block'>
{{ message_block.html|safe }}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% if convo.count > 0 %}<p>+ {{ convo.count }} more message{{ convo.count|pluralize }} by {{ convo.participants|display_list(4) }}.</p>{% endif %}
{% endfor %}
</div>
{% endfor %}
<p><a href="{{ realm_uri }}">Catch up on the rest of these conversations.</a></p>

{% endif %}

{% if new_users and new_streams.html %}
<br />
<h2>Group updates</h2>
{% elif new_users %}
<br />
<h2>New users</h2>
{% elif new_streams.html %}
<br />
<h2>New streams</h2>
{% endfor %}
</div>
{% if remaining_unread_pms_count > 0 %}
<p>+ {{ remaining_unread_pms_count }} more new private message{{ remaining_unread_pms_count|pluralize }}</p>
{% endif %}
<p>
<a href="{{ realm_uri }}/#narrow/is/private">Catch up on the rest of your PMs.</a>
</p>
</div>
</div>
{% endif %}

{% if new_streams.html %}
<p>{% if new_stream_count and new_stream_count > 1 %}A new stream was{% else %}Some new streams were{% endif %} created:</p>

<p>{{ new_streams.html|display_list(4)|safe }}.</p>

<p>Click on {% if new_stream_count and new_stream_count > 1 %}a{% else %}the{% endif %} name to check out some of the traffic, or visit your <a href="{{ realm_uri }}/#streams">Streams page</a> to subscribe.</p>
{% if hot_conversations %}
<div class='container' style="border:1px solid; border-radius: 5px; margin-bottom: 20px; padding:0px; max-width: none;">
<h2 style="margin-bottom: 10px">Hot conversations</h2>
<h4>Here are some of the hot conversations that have happened while you've been gone:</h4>

<div style="padding: 0px 20px 0px 20px">
{% for convo in hot_conversations %}
<div id='messages' style="width:auto;">
{% for recipient_block in convo.first_few_messages %}
<div class='hot_convo_recipient_block'>
<div class='hot_convo_recipient_header'>
{{ recipient_block.header.html|safe }}
</div>
<div class='hot_convo_message_content' style="text-align: left;">
{% for sender_block in recipient_block.senders %}
{% if sender_block.sender %}
<div class="hot_convo_message_sender" style="padding:1px 6px 1px 6px">
{{ sender_block.sender }}
</div>
{% endif %}
{% for message_block in sender_block.content %}
<div class='hot_convo_message_content_block'>
{{ message_block.html|safe }}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% if convo.count > 0 %}
<p>+ {{ convo.count }} more message{{ convo.count|pluralize }} by {{ convo.participants|display_list(4) }}.</p>
{% endif %}
{% endfor %}
</div>
{% endfor %}
<p><a href="{{ realm_uri }}">Catch up on the rest of these conversations.</a></p>
</div>
</div>
{% endif %}

{% if new_users %}
<p>{% if new_streams.html or unread_pms or hot_conversations %}And finally, please{% else %}Please{% endif %} welcome {{ new_users|display_list(4) }} to Zulip!</p>
{% if new_users or new_streams.html %}
<div class="container" style="width:70%; border:1px solid; border-radius: 5px; margin-bottom: 20px; margin-top: 40px; padding: 0px; max-width: none;">

{% if new_users and new_streams.html %}
<h2>Group updates</h2>
{% elif new_users %}
<h2>New users</h2>
{% elif new_streams.html %}
<h2>New streams</h2>
{% endif %}

<div style="text-align: left; margin: 0px 15px 0px 15px;">
{% if new_streams.html %}
<p>
{% if new_stream_count and new_stream_count > 1 %}A new stream was{% else %}Some new streams were{% endif %} created:
{{ new_streams.html|display_list(4)|safe }}.
</p>

<p>
Click on {% if new_stream_count and new_stream_count > 1 %}a{% else %}the{% endif %} name to check out some of the traffic, or visit your <a href="{{ realm_uri }}/#streams">Streams page</a> to subscribe.
</p>
{% endif %}

{% if new_users %}
<p>
{% if new_streams.html or unread_pms or hot_conversations %}And finally, please{% else %}Please{% endif %} welcome {{ new_users|display_list(4) }} to Zulip!
</p>
{% endif %}

<br />

<p style="margin-top: 30px">
<a href="{{ realm_uri }}">Click here to log in to Zulip and catch up.</a>
</p>

<p>Cheers,<br />
The Zulip Team
</p>
</div>
</div>
{% endif %}

<br />

<p><a href="{{ realm_uri }}">Click here to log in to Zulip and catch up.</a></p>

<p>Cheers,<br />
The Zulip Team</p>
{% endblock %}

{% block manage_preferences %}
<p>
<div class='alert' style="margin-bottom: 0px">
<a href="{{ realm_uri }}/#settings/notifications">Manage email preferences</a> |
<a href="{{ unsubscribe_link }}">Unsubscribe from digest emails</a>
</p>
</div>
{% endblock %}
10 changes: 8 additions & 2 deletions templates/zerver/emails/email.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ table td {
margin-top: 0px;
}


h1,
h2,
h3,
Expand Down Expand Up @@ -126,8 +127,13 @@ a:hover {
color: hsl(164, 51%, 55%);
}

.important {
border-bottom: 3px solid hsl(195, 31%, 87%);
.alert {
border:1px solid #fbeed5;
margin-bottom: 25px;
padding: 10px 20px 10px 20px;
background-color: hsl(50, 81%, 94%);
border-radius: 5px;
color: hsl(25, 46%, 40%)
}

.button {
Expand Down
35 changes: 15 additions & 20 deletions templates/zerver/emails/email_base_messages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<html lang='{{LANGUAGE_CODE}}'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zulip</title>
{% block title %}
{% if user_profile and user_profile.realm.name %}
<title>{{user_profile.realm.name}} - Zulip</title>
{% else %}
<title>Zulip</title>
{% endif %}
{% endblock %}
<link href="/static/favicon.ico?v=2" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">{{ render_bundle('common', attrs='nonce="%s"' % (csp_nonce)) }}
</head>
<body>
<span style="display:none !important;
visibility:hidden;
color:transparent;
mso-hide:all;
font-size:1px;
color:hsl(0, 0%, 100%);
line-height:1px;
max-height:0px;
height:0px;
max-width:0px;
width:0px;
opacity:0;
overflow:hidden;">
{% block preheader %}{% endblock %}
</span>
{% block content %}{% endblock %}
{% block manage_preferences %}{% endblock %}
<body style="-ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; background-color:hsl(165, 25%, 97%); font-family:sans-serif; font-size:14px; font-weight:normal; line-height:1.4; margin:0; padding:0" bgcolor="hsl(165, 25%, 97%)">
<div class='container' style="text-align: center; padding: 0px; max-width: none">
{% block content %}{% endblock %}
{% block manage_preferences %}{% endblock %}
</div>
</body>
</html>