FLO/user-to-supporter-chat-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layouts

Browse Source
This commit is contained in:
Bartal Læarsson
2026-06-18 22:46:33 +01:00
parent 9d9b04d01b
commit fb9b719d52
5 changed files with 322 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/user.html
+42 -11
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>Support Chat</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<style>
@@ -25,18 +25,26 @@
--radius: 12px;
}
html, body {
width: 100%;
height: 100%;
height: var(--app-height, 100dvh);
overflow: hidden;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg);
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
padding: 4.4rem 1rem 1rem;
padding: 4.4rem 1rem max(1rem, env(safe-area-inset-bottom));
}
button, input { font: inherit; }
.page-timer {
display: inline-flex;
align-items: center;
@@ -88,7 +96,8 @@
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 0.95rem;
font-size: 16px;
line-height: 1.25;
margin-bottom: 1rem;
outline: none;
transition: border-color 0.2s;
@@ -115,8 +124,7 @@
display: none;
flex-direction: column;
width: min(390px, 100%);
height: min(620px, calc(100vh - 5.4rem));
height: min(620px, calc(100dvh - 5.4rem));
height: min(620px, calc(var(--app-height, 100dvh) - 5.4rem));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
@@ -269,8 +277,9 @@
#chat-form {
display: flex;
gap: 0.45rem;
padding: 0.65rem 0.85rem 0.8rem;
padding: 0.65rem 0.85rem max(0.8rem, env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
flex-shrink: 0;
}
#chat-form input[type="text"] {
@@ -281,7 +290,8 @@
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 0.9rem;
font-size: 16px;
line-height: 1.25;
outline: none;
transition: border-color 0.2s;
}
@@ -304,12 +314,15 @@
#chat-form button:hover { background: var(--accent-dim); }
@media (max-width: 520px) {
body { align-items: stretch; padding: 4.2rem 0.75rem 0.75rem; }
body { align-items: stretch; padding: 4.2rem 0.75rem max(0.75rem, env(safe-area-inset-bottom)); }
.page-timer { top: 0.75rem; width: calc(100% - 1.5rem); text-align: center; justify-content: center; }
#start-form { align-self: center; padding: 1.45rem; border-radius: 18px; }
#chat-container { height: calc(100vh - 5rem); height: calc(100dvh - 5rem); border-radius: 18px; }
#chat-container { width: 100%; height: calc(var(--app-height, 100dvh) - 5rem); max-height: none; border-radius: 18px; }
.chat-session-id { display: none; }
.msg-user, .msg-supporter { max-width: 86%; }
#messages { padding: 0.8rem; }
#chat-form { gap: 0.4rem; }
#chat-form button { padding-inline: 0.85rem; }
}
</style>
</head>
@@ -333,6 +346,18 @@
let ws = null;
let userTypingActive = false;
function setAppHeight() {
const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
document.documentElement.style.setProperty('--app-height', `${height}px`);
}
setAppHeight();
window.addEventListener('resize', setAppHeight);
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', setAppHeight);
window.visualViewport.addEventListener('scroll', setAppHeight);
}
function scrollMessages() {
const el = document.getElementById('messages');
if (el) el.scrollTop = el.scrollHeight;
@@ -424,6 +449,12 @@
hideSupporterTyping();
htmx.trigger('#messages', 'refresh');
};
const chatInput = document.getElementById('chat-input');
if (chatInput) {
chatInput.addEventListener('focus', () => setTimeout(setAppHeight, 80));
chatInput.addEventListener('blur', () => setTimeout(setAppHeight, 80));
}
setAppHeight();
ws.onerror = () => console.warn('WebSocket error; polling will continue.');
}
});