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%">
<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>
</div>
<h3>{{ title }}</h3>
</tr>
</table>
{% for reply in replies %}
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style="background-color: #fafbfc; border: 1px solid #d1d8dd; border-radius: 3px 3px 0 0">
<table class="panel-header" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="10"></tr>
<tr>
<td width="15"></td>
<td valign="top" width="24">
{% 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 %}
<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] }}
</div>
{% endif %}
</td>
<td width="10"></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>
</div>
</td>
@ -30,13 +27,12 @@
</tr>
<tr height="10"></tr>
</table>
<table 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">
<table class="panel-body" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="10"></tr>
<tr>
<td width="15"></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 }}
</div>
</td>
@ -51,7 +47,7 @@
{% if did_not_reply %}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<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>
</div>
</tr>