Fix login click area

Signed-off-by: Eatham532 <[email protected]>
Chicken · Aug 15, 2024 · bd57721 · bd57721
1 parent c6548bc
commit bd57721
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 25 deletions.
diff --git a/BlueMap/Chat/src/main/resources/bluemap-chat.css b/BlueMap/Chat/src/main/resources/bluemap-chat.css
@@ -28,12 +28,7 @@
     text-shadow: -2px 2px 0px black;
 }
 
-#chat-root.chat-logged-out:hover > #chat-input,
-#chat-root.chat-logged-out:active > #chat-input {
-    color: hsl(0, 0%, 60%);
-    cursor: pointer;
-    text-decoration: underline;
-}
+
 
 #chat-root.no-messages {
     grid-gap: 0;
@@ -53,16 +48,6 @@
     margin: 0;
 }
 
-#chat-root.chat-logged-out > #chat-input {
-    pointer-events: none;
-    user-select: none;
-}
-
-/*#chat-root.chat-logged-out > :not(#chat-input) {
-    display: none;
-    visibility: hidden;
-}*/
-
 #chat-messages, #chat-messages-popup {
     width: 100%;
     height: 100%;
@@ -90,15 +75,33 @@
     color: #fbd726;
 }
 
+#chat-input-wrapper {
+    grid-row: 2;
+    width: 100%;
+    height: 36px;
+    box-sizing: border-box;
+}
+#chat-input-wrapper.chat-logged-out > #chat-input {
+    pointer-events: none;
+    user-select: none;
+    cursor: pointer;
+}
+#chat-input-wrapper.chat-logged-out:hover > #chat-input,
+#chat-input-wrapper.chat-logged-out:active > #chat-input {
+    color: var(--theme-fg);
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+}
+
 #chat-input {
     background-color: transparent;
     width: 100%;
-    height: 36px;
+    height: 100%;
     padding: 6px;
     margin: 0;
     box-sizing: border-box;
     text-shadow: inherit;
-    grid-row: 2;
 }
 
 #zoom-buttons > .chat-toggle {

diff --git a/BlueMap/Chat/src/main/resources/bluemap-chat.js b/BlueMap/Chat/src/main/resources/bluemap-chat.js
@@ -53,25 +53,30 @@ void async function() {
     root.appendChild(chatMessages);
     root.appendChild(toggleChatViewControl);
 
+    const chatInputWrapper = document.createElement("div");
+    chatInputWrapper.id = "chat-input-wrapper";
     const chatInput = document.createElement("input");
     chatInput.id = "chat-input";
     chatInput.placeholder = "Enter your message...";
     chatInput.maxLength = 256;
     chatInput.enterKeyHint = "enter";
-    root.appendChild(chatInput);
+    chatInputWrapper.appendChild(chatInput);
+    root.appendChild(chatInputWrapper);
     document.body.insertBefore(root, document.getElementById("app"));
 
-    if (!auth || !auth.loggedIn) {
+    function setupChatLoggedOut() {
         chatInput.disabled = true;
         chatInput.placeholder = "Log in to send messages";
-        root.classList.add("chat-logged-out");
+        chatInputWrapper.classList.add("chat-logged-out");
 
-        root.onclick = () => {
+        chatInputWrapper.onclick = () => {
             console.log("[Chat/info] Log in to send messages");
             window.location.href = `{{auth-path}}login?redirect=${encodeURIComponent(window.location.pathname)}`;
         }
     }
 
+    if (!auth || !auth.loggedIn) setupChatLoggedOut();
+
     const toggleBtnControl = document.createElement("div");
     toggleBtnControl.className = "svg-button chat-toggle";
     toggleBtnControl.innerHTML = chatSvg;
@@ -199,9 +204,8 @@ void async function() {
 
     const e = new EventSource("./addons/chat/stream");
     e.onerror = () => {
-        console.log("[Chat/info] Chat requires login to receive messages");
-        chatInput.placeholder = "Log in to receive messages";
-        if (chatIsOpen) toggleChat()
+        setupChatLoggedOut();
+        if (chatIsOpen) toggleChat();
     };
     e.onmessage = (event) => {
         const data = JSON.parse(event.data);