Merge pull request #68 from Qwiri/develop

feat[frontend]: Lobby-Screen Overhaul and some minor Enhancements
Qwiri · Jan 12, 2022 · 2ba2e2d · 2ba2e2d
2 parents d3d31e0 + 93fa7f2
commit 2ba2e2d
Show file tree

Hide file tree

Showing 13 changed files with 486 additions and 159 deletions.
diff --git a/frontend/public/assets/addTopic.svg b/frontend/public/assets/addTopic.svg
diff --git a/frontend/public/assets/downloadTopics.svg b/frontend/public/assets/downloadTopics.svg
diff --git a/frontend/public/assets/import_checkmark.svg b/frontend/public/assets/import_checkmark.svg
diff --git a/frontend/public/assets/nukeTopics.svg b/frontend/public/assets/nukeTopics.svg
diff --git a/frontend/public/assets/saveTopics.svg b/frontend/public/assets/saveTopics.svg
diff --git a/frontend/public/global.css b/frontend/public/global.css
@@ -89,6 +89,7 @@ button:focus {
 	background-color: #000000;
 	color: #ffffff;
 	border: none;
-	border-radius: 4px;
+	border-radius: .5rem;
 	font-size: 1.1rem;
+	margin: 0;
 }
diff --git a/frontend/src/Game.svelte b/frontend/src/Game.svelte
@@ -57,7 +57,7 @@
     }
 
     #lobby {
-        width: 50vw;
+        width: 75vw;
     }
     #chat {
 

diff --git a/frontend/src/assets/Chat.svelte b/frontend/src/assets/Chat.svelte
@@ -21,11 +21,13 @@
     };
 
     let chatElement: HTMLElement;
-    let shouldAutoScroll = true;
+    let chatContainer: HTMLElement;
 
+    let shouldAutoScroll = true;
     afterUpdate(() => {
-        if (shouldAutoScroll) {
-            chatElement.scrollIntoView(false);
+        const mobile = (window?.getComputedStyle(chatContainer)?.flexDirection) === "column-reverse";
+        if (shouldAutoScroll || mobile) {
+            chatElement.scrollIntoView(mobile);
         }
     });
 
@@ -37,7 +39,7 @@
 </script>
 
 <div>
-    <div id="chatContainer">
+    <div id="chatContainer" bind:this={chatContainer}>
         <div id="messageContainer">
             <ul on:scroll={onScroll} id="chat-messages">
                 {#each $chatMessages as message}
@@ -69,6 +71,8 @@
         display: flex;
         flex-direction: column;
 
+        margin-bottom: 1rem;
+
         /* turn the chat arround, if on mobile */
         @media (max-width: 40rem) {
             flex-direction: column-reverse;