From 94a50fc523c92281fdbb0dfa1a1f226ef1b21dd1 Mon Sep 17 00:00:00 2001 From: Guillem Borrell Date: Sat, 18 May 2024 09:14:00 +0200 Subject: [PATCH] Frontend in a decent state --- src/hellocomputer/static/index.html | 61 ++++++++++++++++++++++---- src/hellocomputer/static/script.js | 50 +++++++++++++++++++++ src/hellocomputer/static/style.css | 67 +++++++++++++++++++++++++++++ 3 files changed, 169 insertions(+), 9 deletions(-) create mode 100644 src/hellocomputer/static/script.js create mode 100644 src/hellocomputer/static/style.css diff --git a/src/hellocomputer/static/index.html b/src/hellocomputer/static/index.html index 012e1dd..76b1203 100644 --- a/src/hellocomputer/static/index.html +++ b/src/hellocomputer/static/index.html @@ -1,26 +1,69 @@ - + - - - Bootstrap demo + + + Chat Application - + -

Hello, world!

-

-

Swap!
-

+ +
+ + + + +
+ + +
+
+
+ +
Message 1
+
Message 2
+
Message 3
+
+
+
+ +
+ +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/src/hellocomputer/static/script.js b/src/hellocomputer/static/script.js new file mode 100644 index 0000000..42c0a74 --- /dev/null +++ b/src/hellocomputer/static/script.js @@ -0,0 +1,50 @@ +function toggleMenuArrow(a) { + if (a.innerHTML == '▶') { + a.innerHTML = '◀'; + } + else { + a.innerHTML = '▶' + } +} + +$('#menu-toggle').click(function (e) { + e.preventDefault(); + $('#sidebar').toggleClass('toggled'); + toggleMenuArrow(document.getElementById('menu-toggle')); +}); + +const textarea = document.getElementById('chatTextarea'); +const sendButton = document.getElementById('sendButton'); +const chatMessages = document.querySelector('.chat-messages'); + +textarea.addEventListener('input', function () { + this.style.height = 'auto'; + this.style.height = (this.scrollHeight <= 150 ? this.scrollHeight : 150) + 'px'; + if (this.scrollHeight > 150) { + this.style.overflowY = 'scroll'; + } else { + this.style.overflowY = 'hidden'; + } +}); + +function addUserMessage() { + const messageContent = textarea.value.trim(); + if (messageContent) { + const newMessage = document.createElement('div'); + newMessage.classList.add('message', 'bg-light', 'p-2', 'mb-2', 'rounded'); + newMessage.textContent = messageContent; + chatMessages.prepend(newMessage); // Add new message at the top + textarea.value = ''; // Clear the textarea + textarea.style.height = 'auto'; // Reset the textarea height + textarea.style.overflowY = 'hidden'; + } +}; + +sendButton.addEventListener('click', addUserMessage); + +textarea.addEventListener('keypress', function (e) { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + addUserMessage(); + } +}); \ No newline at end of file diff --git a/src/hellocomputer/static/style.css b/src/hellocomputer/static/style.css new file mode 100644 index 0000000..aa33491 --- /dev/null +++ b/src/hellocomputer/static/style.css @@ -0,0 +1,67 @@ +body, +html { + height: 100%; + margin: 0; +} + +.d-flex { + height: 100vh; +} + +#sidebar { + min-width: 250px; + max-width: 250px; +} + +#sidebar.toggled { + margin-left: -250px; +} + +#page-content-wrapper { + flex: 1; + width: 100%; +} + +.chat-wrapper { + display: flex; + justify-content: center; + align-items: flex-start; + height: calc(100vh - 56px); + /* Adjust height considering the navbar */ + padding-bottom: 70px; + /* Make space for the input box */ + box-sizing: border-box; +} + +.chat-container { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + max-width: 600px; + border: 1px solid #ddd; + border-radius: 5px; + overflow: hidden; +} + +.chat-messages { + flex: 1; + overflow-y: auto; + padding: 15px; + padding-bottom: 70px; + /* Adding bottom padding to avoid overlap */ + display: flex; + flex-direction: column-reverse; +} + +.chat-input { + position: fixed; + bottom: 0; + width: calc(100% - 250px); + /* Adjust width considering the sidebar */ + max-width: 600px; + background: #fff; + border-top: 1px solid #ddd; + padding: 10px; + box-sizing: border-box; +} \ No newline at end of file