Файл: upload/core/templates/default/pages/messages/download-history.html
Строк: 103
<?php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Переписка {{ userA }} и {{ userB }}</title>
<style>
html, body {
min-height: calc(100vh) !important;
}
body {
padding: 0;
margin: 0;
font-family: arial;
font-size: 15px;
background: #f3f5f7;
color: #4d666d;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home_us.tematic {
margin-bottom: 20px;
flex: 1 1;
width: -webkit-fill-available;
}
.home_us.tematic.profile {
max-width: 1192px;
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1;
height: 100%;
margin: 0 auto;
justify-content: center;
overflow: hidden;
}
.messages_block-home { display: block; max-height: auto; min-height: auto; }
#messages-history #chat {
padding: 20px;
display: flex;
flex-direction: column;
width: -webkit-fill-available;
overflow-y: auto;
gap: 15px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 0 0 10px 10px;
max-height: 639px;
}
.messages_block-home, .chat-list open, .chat_orez {
display: flex;
height: calc(100vh - 200px) !important;
overflow: hidden;
border-radius: 10px;
overflow: hidden;
}
.message_block_home { box-shadow: 3px 4px 5px 0px #879baf21; }
.messages-history { border-radius: 10px; }
.groups_flex {
display: flex; justify-content: space-around; color: #616161;
background: #fff; border-radius: 10px 10px 0 0;
border: 1px solid #e6e6e6; border-bottom: 0; align-items: center;
}
.group-left, .group-right {
width: -webkit-fill-available; text-align: center; height: 40px;
display: flex; align-items: center; justify-content: center;
}
.group-left { border-right: 1px solid #e6e6e6; }
.my-message, .other-message {
display: flex;
flex-direction: column;
}
.my-message {
align-items: flex-end;
}
.other-message {
align-items: flex-start;
}
.my-message .mes, .other-message .mes {
padding: 5px 10px;
border-radius: 10px;
}
.my-message .mes {
background: #63bf9a;
color: #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.other-message .mes {
background: #cdd6df;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.text_message {
white-space: pre-line;
line-height: 1.5;
}
.avatar-users-message img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 100px
}
.cit {
background: #ffffff4d;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
}
.other-message .mes .cit { background: #d5dee7; }
.my-message .mes .cit {
background: #72cda8;
color: #fff;
}
.my-message .box-message-users .nick-message-users-box .nick-message-users {
display: flex;
flex-direction: row-reverse;
font-size: 13px;
margin-right: 3px;
}
.other-message .box-message-users .nick-message-users-box .nick-message-users {
display: flex;
flex-direction: row;
font-size: 13px;
margin-left: 3px;
}
.avatar-users-message img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 100px
}
.my-message .box-message-users {
display: flex;
flex-direction: row-reverse;
gap: 5px;
}
.other-message .box-message-users {
display: flex;
flex-direction: row;
gap: 5px;
}
.nick-message-users-box {
display: flex;
flex-direction: column;
gap: 5px;
}
.mes .time_mes { font-size: 13px; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-thumb { background: #c6c6c6; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }
::-webkit-scrollbar-track { background: none; }
::-webkit-scrollbar-track:hover { background: none; }
</style>
</head>
<body>
<div class="home_us tematic profile mes">
<div class="messages_block-home">
<div id="messages-history" style="width: -webkit-fill-available;">
<div class="groups_flex">
<div class="group-left">Исполнитель</div>
<div class="group-right">Заказчик</div>
</div>
<div id="chat">
{% for m in messages %}
<div class="{{ m.class }}">
<span class="box-message-users">
<div class="avatar-users-message">
<img class="avatar" src="{{ m.avatar }}">
</div>
<div class="nick-message-users-box">
<span class="nick-message-users">{{ m.nick }}</span>
<span class="mes">
{{ m.text|raw }}
<span class="time_mes">{{ m.time }}</span>
</span>
</div>
</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</body>
</html>
?>