diff --git a/src/sym/arrow_back-24px.svg b/public/sym/arrow_back-24px.svg similarity index 100% rename from src/sym/arrow_back-24px.svg rename to public/sym/arrow_back-24px.svg diff --git a/src/sym/menu-24px.svg b/public/sym/menu-24px.svg similarity index 100% rename from src/sym/menu-24px.svg rename to public/sym/menu-24px.svg diff --git a/src/sym/supervisor_account-24px.svg b/public/sym/supervisor_account-24px.svg similarity index 100% rename from src/sym/supervisor_account-24px.svg rename to public/sym/supervisor_account-24px.svg diff --git a/src/components/icon.vue b/src/components/icon.vue index 8b8fac1..1a7ce83 100644 --- a/src/components/icon.vue +++ b/src/components/icon.vue @@ -28,7 +28,8 @@ name: "icon", position: absolute; height: 1.5rem; width: auto; - top: 0.75rem; - left: 0.75rem; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } \ No newline at end of file diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue index 97ab8f3..74f91bb 100644 --- a/src/components/newMessage.vue +++ b/src/components/newMessage.vue @@ -1,8 +1,10 @@ - - + + @@ -30,7 +32,7 @@ export default { id.style.height = `${id.scrollHeight}px` let msgContainer = document.getElementById("messagesContainer") msgContainer.style.height - = `calc(100% - ${id.parentElement.clientHeight}px)` + = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)` //msgContainer.scrollTo(0, msgContainer.scrollHeight) } }, diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue index ef2807d..ed151e4 100644 --- a/src/components/topBanner.vue +++ b/src/components/topBanner.vue @@ -1,50 +1,60 @@ - - + + - OpenChat - 9 Mitglieder + {{roomInfo.name}} + {{roomInfo.user.length}} members - + - \ No newline at end of file diff --git a/src/views/chat.vue b/src/views/chat.vue index b4a4ed1..353a6f0 100644 --- a/src/views/chat.vue +++ b/src/views/chat.vue @@ -26,6 +26,7 @@ + @@ -33,13 +34,15 @@ import message from '@/components/message.vue'; import messageReceive from '@/components/messageReceive.vue'; import newMessage from '@/components/newMessage.vue'; +import topBanner from "@/components/topBanner"; export default { name: 'chat', components: { message, messageReceive, - newMessage + newMessage, + topBanner } } @@ -49,8 +52,8 @@ export default { position: absolute; margin: 0; left: 0; - top: 0; - height: calc(100% - 4rem); + top: 3rem; + height: calc(100% - 7rem); width: 100%; overflow-y: auto; }