group chat images styling

pestsov-v · Oct 31, 2021 · 2b06d5d · 2b06d5d
1 parent 2c6bccf
commit 2b06d5d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -625,4 +625,19 @@ button span {
     flex-direction: column;
     overflow-y: auto;
     padding: var(--spacing);
+}
+
+.chatImagesContainer {
+    display: flex;
+    flex-direction: row-reverse;
+    height: 100%;
+    margin-right: 10px;
+}
+
+.chatImagesContainer img {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    margin-left: -10px;
 }
diff --git a/views/chatPage.pug b/views/chatPage.pug
@@ -9,8 +9,9 @@ block content
             const chatId = '!{chat._id}';
 
         .chatPageContainer 
-            .chatTitleBarContainer 
-                span#chatName Название чата
+            .chatTitleBarContainer
+                +createChatImage(chat, userLoggedIn)
+                span#chatName Групповой чат
 
             .mainContentContainer 
                 .chatContainer

diff --git a/views/mixins/mixins.pug b/views/mixins/mixins.pug
@@ -122,4 +122,13 @@ mixin creatUnpinPostModal()
                     p Вы уверены, что хотите открепить закреплённое сообщение?
                 .modal-footer
                     button.btn.btn-secondary(type='button', data-dismiss='modal') Отменить
-                    button#unpinPostButton.btn.btn-primary(type='button') Открепить
+                    button#unpinPostButton.btn.btn-primary(type='button') Открепить
+
+mixin createChatImage(chatData, userLoggedIn)
+    if(!chatData)
+        return 
+
+    .chatImagesContainer 
+
+        each user in chatData.users
+            img(src=user.profilePic, alt="Фото пользователя", title=user.firstName)