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

Toggle menubar on mobile
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Guillem Borrell 2024-06-12 09:22:58 +02:00
parent 1b5efa99b5
commit 102fc816f8
3 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -124,8 +124,8 @@
</div> </div>
<div class="chat-input"> <div class="chat-input">
<div class="input-group"> <div class="input-group">
<textarea id="chatTextarea" class="form-control" placeholder="Type a message..." rows="1" <textarea id="chatTextarea" class="form-control" placeholder="Type a message..."
style="resize: none;"></textarea> rows="1"></textarea>
<div class="input-group-append"> <div class="input-group-append">
<button id="sendButton" class="btn btn-primary" type="button">Send</button> <button id="sendButton" class="btn btn-primary" type="button">Send</button>
</div> </div>

10
src/hellocomputer/static/script.js
View file

@ -13,6 +13,16 @@ $('#menu-toggle').click(function (e) {
toggleMenuArrow(document.getElementById('menu-toggle')); toggleMenuArrow(document.getElementById('menu-toggle'));
}); });
document.addEventListener("DOMContentLoaded", function () {
console.log('Width: ' + window.innerWidth + ' Height: ' + window.innerHeight);
if ((window.innerWidth <= 800) && (window.innerHeight <= 600)) {
$('#sidebar').toggleClass('toggled');
toggleMenuArrow(document.getElementById('menu-toggle'));
console.log('Mobile device detected. Hiding sidebar.');
}
}
);
const textarea = document.getElementById('chatTextarea'); const textarea = document.getElementById('chatTextarea');
const sendButton = document.getElementById('sendButton'); const sendButton = document.getElementById('sendButton');
const chatMessages = document.querySelector('.chat-messages'); const chatMessages = document.querySelector('.chat-messages');

2
src/hellocomputer/static/style.css
View file

@ -57,7 +57,7 @@ html {
.chat-input { .chat-input {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: calc(100% - 250px); width: 100%;
/* Adjust width considering the sidebar */ /* Adjust width considering the sidebar */
max-width: 600px; max-width: 600px;
background: #fff; background: #fff;