improvement and restoration of the message view - refs #2681
parent
e5cf341244
commit
5a7045a05c
@ -0,0 +1,87 @@ |
||||
.email-head { |
||||
background-color: #fff; |
||||
.email-head-subject { |
||||
padding: 25px 25px; |
||||
border-bottom: 1px solid #e6e6f2; |
||||
.icons{ |
||||
font-size: 14px; |
||||
float: right; |
||||
.icon{ |
||||
color: #71738d; |
||||
vertical-align: middle; |
||||
} |
||||
} |
||||
.title { |
||||
display: block; |
||||
font-size: 1.769rem; |
||||
font-weight: 500; |
||||
color: #3d405c; |
||||
a{ |
||||
.icon{ |
||||
color: silver; |
||||
font-size: 14px; |
||||
margin-right: 6px; |
||||
vertical-align: middle; |
||||
line-height: 31px; |
||||
position: relative; |
||||
top: -1px; |
||||
} |
||||
&.active{ |
||||
.icon{ |
||||
color: #ffc600; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.email-head-sender { |
||||
padding: 13px 25px; |
||||
line-height: 40px; |
||||
.date { |
||||
float: right; |
||||
font-size: 12px; |
||||
} |
||||
.avatar{ |
||||
float: left; |
||||
margin-right: 10px; |
||||
width: 2.25rem; |
||||
height: 2.25rem; |
||||
border-radius: 50%; |
||||
border: 2px solid #e6e6f2; |
||||
background: #F7F9FA; |
||||
color: #fff; |
||||
} |
||||
.sender{ |
||||
font-size: 1.15rem; |
||||
.email{ |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.email-body{ |
||||
background-color: #fff; |
||||
border-top: 1px solid #e6e6f2; |
||||
padding: 30px 28px; |
||||
} |
||||
.email-attachments{ |
||||
background-color: #fff; |
||||
padding: 25px 28px; |
||||
border-top: 1px solid #e6e6f2; |
||||
.title{ |
||||
display: block; |
||||
font-weight: 500; |
||||
} |
||||
ul{ |
||||
list-style: none; |
||||
margin: 15px 0 0; |
||||
padding: 0; |
||||
li{ |
||||
line-height: 23px; |
||||
a{ |
||||
color: #404040; |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,62 @@ |
||||
{% extends '@ChamiloTheme/Layout/layout_one_col.html.twig' %} |
||||
{% block content %} |
||||
|
||||
{% autoescape false %} |
||||
<div id="message_{{ message.id }}" data-status="{{ message.status }}" class="mail-email"> |
||||
<div class="email-head"> |
||||
<div class="email-head-subject"> |
||||
<div class="title"> |
||||
<a class="active" href="#"> |
||||
<span class="icon"> |
||||
<i class="fas fa-star"></i> |
||||
</span> |
||||
</a> |
||||
<span> |
||||
{{ message.title }} |
||||
</span> |
||||
<div class="icons"> |
||||
<div class="btn-group" role="group" > |
||||
<a href="{{ message.url.back }}" class="btn btn-outline-secondary icon"><i class="fas fa-arrow-circle-left"></i> {{ 'Back'|trans }}</a> |
||||
<a href="#" onclick="window.print();" class="btn btn-outline-secondary icon"><i class="fas fa-print"></i> {{ 'Print'|trans }}</a> |
||||
<a href="{{ message.url.new_message }}" class="btn btn-outline-secondary icon"><i class="fas fa-reply"></i> {{ 'Reply'|trans }}</a> |
||||
<a href="{{ message.url.delete }}" class="btn btn-outline-secondary icon"><i class="fas fa-trash"></i> {{ 'Delete'|trans }}</a> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="email-head-sender"> |
||||
<div class="date">{{ message.date }}</div> |
||||
<div class="avatar"> |
||||
<img src="{{ message.form_user.avatar }}" alt="Avatar" class="rounded-circle user-avatar-md"> |
||||
</div> |
||||
<div class="sender"> |
||||
<a href="{{ _p.web }}main/social/profile.php?u={{ message.form_user.id }}">{{ message.form_user.name }}</a> |
||||
<div class="email">{{ message.form_user.email }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="email-body"> |
||||
{{ message.content }} |
||||
</div> |
||||
|
||||
{% if message.attachments %} |
||||
<div class="email-attachments"> |
||||
<div class="title">{{ 'Attachments'|trans }} <span>({{ message.attachments.quantity }} {{ 'Files'|trans }}, {{ message.attachments.total_size }})</span></div> |
||||
<ul> |
||||
{% for item in message.attachments.files %} |
||||
<li> |
||||
<a href="{{ item.url }}"> |
||||
<i class="fas fa-paperclip"></i> {{ item.filename }} |
||||
<span>({{ item.size }})</span> |
||||
</a> |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
|
||||
{% endautoescape %} |
||||
{% endblock %} |
Loading…
Reference in new issue