diff --git a/public/css/main.css b/public/css/main.css index 541b9b4..f60ebd0 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -640,4 +640,22 @@ button span { border: 2px solid #fff; border-radius: 50%; margin-left: -10px; +} + + +.chatImagesContainer .userCount { + height: 40px; + width: 40px; + background-color: #f1f1f1; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + border: 2px solid #fff; +} + +.chatImagesContainer img:not(:last-child), +.chatImagesContainer .userCount { + margin-left: -10px; } \ No newline at end of file diff --git a/views/chatPage.pug b/views/chatPage.pug index b71d3f8..a1f4f33 100644 --- a/views/chatPage.pug +++ b/views/chatPage.pug @@ -11,7 +11,7 @@ block content .chatPageContainer .chatTitleBarContainer +createChatImage(chat, userLoggedIn) - span#chatName Групповой чат + span#chatName Чат .mainContentContainer .chatContainer diff --git a/views/mixins/mixins.pug b/views/mixins/mixins.pug index 96e3a6c..d98a1dc 100644 --- a/views/mixins/mixins.pug +++ b/views/mixins/mixins.pug @@ -127,8 +127,22 @@ mixin creatUnpinPostModal() mixin createChatImage(chatData, userLoggedIn) if(!chatData) return - + + - var i = 0 + - var maxImagesToShow = 3 + - var remainingUsers = chatData.users.length - maxImagesToShow + - remainingUsers-- + .chatImagesContainer + if remainingUsers > 0 + .userCount + span +#{remainingUsers} each user in chatData.users - img(src=user.profilePic, alt="Фото пользователя", title=user.firstName) \ No newline at end of file + if chatData.users.length != 1 && user._id == userLoggedIn._id + - continue + else if i >= maxImagesToShow + - break + + img(src=user.profilePic, alt="Фото пользователя", title=user.firstName) + - i++ \ No newline at end of file