guillem/hellocomputer
guillem/hellocomputer
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

Frontend in a decent state

Browse source
This commit is contained in:
Guillem Borrell 2024-05-18 09:14:00 +02:00
parent 21e30b2e16
commit 94a50fc523
3 changed files with 169 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/hellocomputer/static/index.html
View file

@ -1,26 +1,69 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Application</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://unpkg.com/htmx.org@1.9.12"
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<p>
<div hx-get="/health" hx-swap="outerHTML">Swap!</div>
</p>
<div class="d-flex">
<!-- Sidebar -->
<div id="sidebar" class="bg-light border-right">
<div class="list-group list-group-flush">
<p class="font-weight-bold">
<a href="#" class="list-group-item list-group-item-action">
Hello, computer!
</a>
</p>
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 2</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 3</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 4</a>
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">◀</button>
</nav>
<div class="container chat-wrapper mt-4">
<div class="chat-container">
<div class="chat-messages">
<!-- Messages will be appended here -->
<div class="message bg-light p-2 mb-2 rounded">Message 1</div>
<div class="message bg-light p-2 mb-2 rounded">Message 2</div>
<div class="message bg-light p-2 mb-2 rounded">Message 3</div>
</div>
<div class="chat-input">
<div class="input-group">
<textarea id="chatTextarea" class="form-control" placeholder="Type a message..." rows="1"
style="resize: none;"></textarea>
<div class="input-group-append">
<button id="sendButton" class="btn btn-primary" type="button">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

50
src/hellocomputer/static/script.js Normal file
View file

@ -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();
}
});

67
src/hellocomputer/static/style.css Normal file
View file

@ -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;
}