Remove inline styling, add css classes (#10077)

This commit is contained in:
Faris Ansari
2017-07-26 18:46:13 +05:30
committed by Makarand Bauskar
parent 58c9934452
commit fbec103ae7
3 changed files with 69 additions and 12 deletions

View File

@@ -0,0 +1,29 @@
.panel-header {
background-color: #fafbfc;
border: 1px solid #d1d8dd;
border-radius: 3px 3px 0 0;
}
.panel-body {
background-color: #fff;
border: 1px solid #d1d8dd;
border-top: none;
border-radius: 0 0 3px 3px;
overflow-wrap: break-word;
}
.sender-avatar {
width: 24px;
height: 24px;
border-radius: 3px;
vertical-align: middle;
}
.sender-avatar-placeholder {
width: 24px;
height: 24px;
border-radius: 3px;
vertical-align: middle;
line-height: 24px;
text-align: center;
color: #d1d8dd;
border: 1px solid #d1d8dd;
background-color: #fff;
}

View File

@@ -0,0 +1,32 @@
@import "../../../../frappe/frappe/public/less/variables.less";
.panel-header {
background-color: @light-bg;
border: 1px solid @border-color;
border-radius: 3px 3px 0 0;
}
.panel-body {
background-color: #fff;
border: 1px solid @border-color;
border-top: none;
border-radius: 0 0 3px 3px;
overflow-wrap: break-word;
}
.sender-avatar {
width: 24px;
height: 24px;
border-radius: 3px;
vertical-align: middle;
}
.sender-avatar-placeholder {
.sender-avatar;
line-height: 24px;
text-align: center;
color: @border-color;
border: 1px solid @border-color;
background-color: #fff;
}

View File

@@ -1,28 +1,25 @@
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> <tr>
<div style="color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; overflow-wrap: break-word;"> <h3>{{ title }}</h3>
<h3>{{ title }}</h3>
</div>
</tr> </tr>
</table> </table>
{% for reply in replies %} {% for reply in replies %}
<table border="0" cellpadding="0" cellspacing="0" width="100%" <table class="panel-header" border="0" cellpadding="0" cellspacing="0" width="100%">
style="background-color: #fafbfc; border: 1px solid #d1d8dd; border-radius: 3px 3px 0 0">
<tr height="10"></tr> <tr height="10"></tr>
<tr> <tr>
<td width="15"></td> <td width="15"></td>
<td valign="top" width="24"> <td valign="top" width="24">
{% if reply.image %} {% if reply.image %}
<img width="24" height="24" embed="{{ reply.image }}" style="border-radius: 3px; vertical-align: middle;" /> <img class="sender-avatar" width="24" height="24" embed="{{ reply.image }}"/>
{% else %} {% else %}
<div style="width: 24px; height: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;background: #fff; border-radius: 3px; border: 1px solid #d1d8dd; text-align: center; line-height: 24px; color: #d1d8dd;"> <div class="sender-avatar-placeholder">
{{ reply.sender_name[0] }} {{ reply.sender_name[0] }}
</div> </div>
{% endif %} {% endif %}
</td> </td>
<td width="10"></td> <td width="10"></td>
<td> <td>
<div style="font-size: 12px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;"> <div class="text-medium text-muted">
<span>{{ reply.sender_name }}</span> <span>{{ reply.sender_name }}</span>
</div> </div>
</td> </td>
@@ -30,13 +27,12 @@
</tr> </tr>
<tr height="10"></tr> <tr height="10"></tr>
</table> </table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" <table class="panel-body" border="0" cellpadding="0" cellspacing="0" width="100%">
style="background-color: #fff; border: 1px solid #d1d8dd; border-top: none; border-radius: 0 0 3px 3px">
<tr height="10"></tr> <tr height="10"></tr>
<tr> <tr>
<td width="15"></td> <td width="15"></td>
<td> <td>
<div style="font-size: 14px; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;"> <div>
{{ reply.content }} {{ reply.content }}
</div> </div>
</td> </td>
@@ -51,7 +47,7 @@
{% if did_not_reply %} {% if did_not_reply %}
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> <tr>
<div style="font-size: 14px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;"> <div class="text-muted">
<p>{{ did_not_reply_title }}: {{ did_not_reply }}</p> <p>{{ did_not_reply_title }}: {{ did_not_reply }}</p>
</div> </div>
</tr> </tr>