Merge remote-tracking branch 'origin/main'

static/css/styles(boris).css

@@ -233,7 +233,7 @@
 }
 
 .block-chat{
-    width: 70%;
+    width: 67%;
     height: 100%;
     border-radius: 10px;
     border: 1px solid #E6E6E6;
@@ -243,6 +243,18 @@
 
 }
 
+.block-list-of-users{
+    width: 30%;
+    margin-left: 20px;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px solid #E6E6E6;
+    background: #ffffff;
+    box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20);
+    float: right;
+
+}
+
 .container-header-chat{
     border-radius: 10px;
     border: 1px solid #E6E6E6;
@@ -290,18 +302,25 @@
 
 .footer-chat{
     width: calc(100% - 40px);
-    height: 20px;
+    height: 60px;
     background: #FFFFFF;
     border-radius: 10px;
     border: 1px solid #E6E6E6;
-    padding: 20px;
+    padding: 0 20px 0 20px;
 }
 
 .left-part-block-enter-message{
-    width: 90%;
+    width: 80%;
     float: left;
 }
 
+.right-part-block-enter-message{
+    width: 20%;
+    float: right;
+    padding-top: 11px;
+    text-align: right;
+}
+
 .enter-message-inp{
     color: #000000;
     width: 100%;
@@ -309,6 +328,7 @@
     background: none;
     outline: none;
     border: none;
+    padding: 20px;
 }
 
 
@@ -319,6 +339,8 @@
     background-size: 24px;
     background-repeat: no-repeat;
     background-position: center;
+    position: relative;
+    bottom: 6px;
 }
 
 .send-message{
@@ -340,4 +362,52 @@
     font-size: 11px;
     color: #ffb3b3;
     float: left;
+}
+
+.title-list-of-users{
+    font-size: 18px;
+    font-weight: 600;
+    padding: 20px 20px 40px 20px;
+    display: block;
+}
+
+/*tab_user*/
+
+.tab_user_messanger{
+    width: calc(100% - 40px);
+    margin: auto;
+    height: 75px;
+}
+
+.left-part-tab-user{
+    width: 10%;
+    height: 100%;
+    float: left;
+}
+.center-part-tab-user{
+    width: 70%;
+    height: 100%;
+    display: inline-block;
+}
+
+.right-part-tab-user{
+    width: 20%;
+    height: 100%;
+    float: right;
+}
+
+.user_avatar_messenger{
+    width: 40px;
+    height: 40px;
+}
+
+.user_name_messenger{
+    color: #000000;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.last-message-messenger-user-tab{
+    font-size: 12px;
+    color: #27242499;
 }

static/css/styles.css

@@ -761,7 +761,7 @@ section.profile {
 }
 
 .menu_profile {
-    width: clamp(200px, 400px, 400px);
+    width: 31%;
     margin-right: 40px;
 }
 
@@ -795,7 +795,7 @@ section.profile {
 }
 
 .info_profile{
-    width: clamp(400px, 827px, 900px)
+    width: 69%;
 }
 
 .info_profile>h1 {

templates/blocks/profile/b_new_msg_to_user.html

@@ -29,11 +29,8 @@
             </div>
         </div>
     </div>
-    <div>
-        <div>
-
-        </div>
-
-
+    <div class="block-list-of-users">
+        <span class="title-list-of-users">Пользователи</span>
+        {% include "widgets/w_tab_user.html" %}
     </div>
 </div>

templates/widgets/w_tab_user.html

@@ -0,0 +1,15 @@
+{% load static %}
+<div class="tab_user_messanger">
+    <div class="left-part-tab-user">
+        <img class="user_avatar_messenger" src="{% static "delete_later/Avatar.png" %}">
+        <div class="status_user">
+        </div>
+    </div>
+    <div class="center-part-tab-user">
+        <span class="user_name_messenger">Сергейко Сергей</span>
+        <span class="last-message-messenger-user-tab">Текст сообщения</span>
+    </div>
+    <div class="right-part-tab-user">
+        <div class="cost-messages-in-user-tab-messenger"></div>
+    </div>
+</div>