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.reverse();
console.log(msgMassive)
return msgMassive
}

9
src/routes/Header.svelte
View file

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

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

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