uniknow/chat_front_svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

фикс кривого отображения сообщений (теперь не вылазят из под div`а)

Browse source
This commit is contained in:
UNIKNOW 2024-03-07 02:02:34 +04:00
parent 5754c4fc68
commit 83662d27a9
3 changed files with 31 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/lib/userFunction.js
View file

@ -41,6 +41,7 @@ export async function UserCheck(){
msgMassive[i].created_at = localTime msgMassive[i].created_at = localTime
} }
msgMassive.reverse();
console.log(msgMassive) console.log(msgMassive)
return msgMassive return msgMassive
} }

9
src/routes/Header.svelte
View file

@ -43,6 +43,11 @@
</header> </header>
<style> <style>
.name{
}
.buttonUser { .buttonUser {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -129,11 +134,15 @@
.userAvatar { .userAvatar {
justify-content: right; justify-content: right;
width: 70px; width: 70px;
height: 70px;
border-radius: 50%; border-radius: 50%;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
min-height: 50px;
min-width: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
} }

60
src/routes/chatPage/+page.svelte
View file

@ -26,7 +26,7 @@
messages = await getLastMessages(); messages = await getLastMessages();
socket = createWebSocket(websocketUrl, (message) => { socket = createWebSocket(websocketUrl, (message) => {
messages = [message, ...messages]; messages = [...messages, message];
}); });
}); });
@ -52,21 +52,14 @@
} }
} }
let textarea;
const updateTextareaSize = () => {
// Устанавливаем высоту textarea на основе количества строк
textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
textarea.style.height = `${textarea.scrollHeight}px`;
};
function handleKeyPress(event) { function handleKeyPress(event) {
if (event.key === 'Enter' && !event.shiftKey) { if (event.key === 'Enter' && !event.shiftKey) {
// Если нажат Enter и не нажат Shift, отправляем сообщение // Если нажат Enter и не нажат Shift, отправляем сообщение
sendMessage(event); sendMessage(event);
} }
} }
</script> </script>
<body class="backgroundPic"> <body class="backgroundPic">
@ -80,7 +73,7 @@
<div class="divMessage"> <div class="divMessage">
<div class="userFiled"> <div class="userFiled">
<h3 class="MsgName">{message.username}</h3> <h3 class="MsgName">{message.username}</h3>
<Time relative timestamp={message.created_at}></Time> <div class="MsgTime"><Time relative timestamp={message.created_at}></Time></div>
</div> </div>
<p class="MsgMsg">{message.message}</p> <p class="MsgMsg">{message.message}</p>
@ -98,9 +91,7 @@
class="chatInput" class="chatInput"
placeholder="Введите сообщение" placeholder="Введите сообщение"
maxlength="2000" maxlength="2000"
rows="3" rows="1"
bind:this={textarea}
on:input={updateTextareaSize}
type="text" type="text"
bind:value={messageText} bind:value={messageText}
on:keypress={handleKeyPress} on:keypress={handleKeyPress}
@ -140,16 +131,15 @@
} }
.userFiled { .userFiled {
display: flex;
justify-content: flex-start; }
.userFiled > * {
display: inline;
margin: 0.5vw;
} }
.MsgMsg{ .MsgMsg{
word-wrap: break-word;
}
.MsgName {
} }
.MsgPic { .MsgPic {
@ -162,18 +152,19 @@
} }
.MsgAva { .MsgAva {
height: 6vh;
min-height: 50px; min-height: 50px;
width: auto; min-width: 50px;
height: 5vw;
width: 5vw;
border: 2px solid rgba(255, 255, 255, 0.6); border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 10px; border-radius: 10px;
margin: 0.25vw; margin: 0.25vw;
} }
.MsgAll { .MsgAll {
display:flex; display: grid;
flex-direction: row; grid-template-columns: 5vw 44vw;
gap: 1vw;
} }
.divMessage { .divMessage {
@ -181,20 +172,12 @@
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
margin: 3px; margin: 3px;
overflow-wrap: break-word;
} }
.chatBox { .chatBox {
display: flex;
flex: 30;
flex-direction: column-reverse;
align-items: flex-start;
overflow-x:hidden; overflow-x:auto;
width: 100%; width: 100%;
@ -219,10 +202,9 @@
.chatSend { .chatSend {
box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5); box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5);
display: flex; display: flex;
flex: 2; width: 100%;
width: 100%; justify-content: space-between;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.43); border: 1px solid rgba(255, 255, 255, 0.43);
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;