Merge pull request #24 from AveselsJS/chat-page-ui

Chat page UI
pestsov-v · Oct 31, 2021 · d12163f · d12163f
2 parents 7244c40 + 2b06d5d
commit d12163f
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 2 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -13,6 +13,13 @@
     --greenBackground: rgba(23,191,99,0.1);
 }
 
+html, body {
+    height: 100%;
+    min-height: 100%;
+    background-color: #fff;
+    font-weight: 300;
+}
+
 * {
     outline: none !important;
 }
@@ -60,8 +67,15 @@ nav a:hover {
     border-radius: 50%;
 }
 
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .wrapper > .row {
     margin: 0;
+    height: 100%;
 }
 
 button {
@@ -448,6 +462,7 @@ button span {
     display: flex;
     flex-direction: column;
     min-height: 0;
+    flex: 1;
 }
 
 .chatTitleBar {
@@ -556,3 +571,73 @@ button span {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.chatTitleBarContainer {
+    border-bottom: 1px solid var(--lightGrey);
+    display: flex;
+    align-items: center;
+    padding: var(--spacing);
+}
+
+#chatName {
+    width: 100%;
+    border-bottom: 1px solid transparent;
+    padding: 0 5px;
+}
+
+#chatName:hover {
+    border: 1px solid var(--lightGrey);
+    cursor: text;
+}
+
+.chatContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+}
+
+.chatContainer .footer {
+    display: flex;
+    padding: var(--spacing);
+    flex-shrink: 0px;
+}
+
+.chatContainer .footer textarea {
+    flex: 1;
+    resize: none;
+    background-color: rgba(0,0,0,0.05);
+    border-radius: 18px;
+    border: none;
+    padding: 8px 12px;
+    height: 42px;
+}
+
+.chatContainer .footer button {
+    background-color: transparent;
+    color: var(--blue);
+    font-size: 24px;
+}
+
+.chatMessages {
+    flex: 1;
+    display: flex;
+    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
@@ -6,7 +6,20 @@ block content
         span.errorMessage #{errorMessage}
     else 
         script.
-            const chatId = '!{chat._id}'
+            const chatId = '!{chat._id}';
+
+        .chatPageContainer 
+            .chatTitleBarContainer
+                +createChatImage(chat, userLoggedIn)
+                span#chatName Групповой чат
+
+            .mainContentContainer 
+                .chatContainer
+                    .chatMessages
+                    .footer
+                        textarea(name="messageInput", placeholder="Введите сообщение...")
+                        button.sendMessageButton
+                            i.fas.fa-paper-plane
 
 block scripts 
     script(src="/js/chat.js") 
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)