updated message bar x2

This commit is contained in:
Lain Iwakura 2025-06-16 03:18:02 +03:00
parent 69869073ab
commit 2f7f3772ec
No known key found for this signature in database
GPG Key ID: C7C18257F2ADC6F8
2 changed files with 63 additions and 65 deletions

View File

@ -101,6 +101,7 @@ try {
</div>
</div>
<div class="chat-container">
<?php if (!empty($error)): ?>
<div class="error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>
@ -145,6 +146,7 @@ try {
</div>
</form>
</div>
</div>
<script>
let isScrolledToBottom = true;
@ -165,7 +167,7 @@ try {
messagesContainer.innerHTML = doc.getElementById('messages').innerHTML;
if (isScrolledToBottom) {
window.scrollTo(0, document.body.scrollHeight);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
});
}, 5000);

View File

@ -12,20 +12,20 @@ body {
.container {
max-width: 700px;
margin: 0 auto;
padding: 24px 12px;
padding: 0;
flex: 1;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
margin-bottom: 18px;
position: sticky;
top: 0;
padding: 12px;
background: #fff;
padding: 12px 0;
z-index: 100;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.header h1 {
@ -48,23 +48,21 @@ body {
font-size: 1em;
}
.source-btn {
background: #222;
color: #fff !important;
padding: 4px 12px;
border-radius: 4px;
text-decoration: none !important;
}
.source-btn:hover {
background: #444;
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
}
.messages-container {
margin-bottom: 180px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 12px;
}
.message {
@ -100,20 +98,14 @@ body {
}
.message-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 12px;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
flex-shrink: 0;
}
.message-form {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
@ -223,10 +215,14 @@ button:hover {
}
.container {
padding: 12px 8px 0 8px;
padding: 0;
}
.message {
padding: 8px;
}
.chat-container {
padding: 8px;
}
}