From 442b292c0978d602aa89f679bc66138989f15fc9 Mon Sep 17 00:00:00 2001
From: uniknow <000-drakon@mail.ru>
Date: Sun, 9 Jun 2024 23:30:44 +0400
Subject: [PATCH] =?UTF-8?q?=D0=B7=D0=B0=D0=BA=D1=80=D0=B5=D0=BF=D1=8B=20(?=
 =?UTF-8?q?=D0=BD=D0=B5=D1=82=20=D0=B5=D1=89=D0=B5=20unpin,=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=D0=B8=D0=BB=20=D0=BF=D0=BE=D0=BB=D0=B5?=
 =?UTF-8?q?=20=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/chat/+page.svelte | 58 ++++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 07f7642..fbf5f0f 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -32,6 +32,9 @@
 	let scrollableDiv;
 	let answerMessageTextShow = false
 	let answerMessageImgShow = false
+	let imageFile = undefined
+  	let imageShow = false;
+  	$: console.log(imageFile, "картинка")
 	
 	let answerMessage = ""
 	let answerMessageImg = ""
@@ -134,6 +137,7 @@
 
 	function adjustTextareaHeight() {
   const textarea = document.getElementById("msg");
+  //console.log(textarea.scrollHeight)
   if (textarea) {
     textarea.style.height = '1em'; //??
     textarea.style.height = (textarea.scrollHeight > maxRows * 18) ? `${maxRows * 18}px` : `${textarea.scrollHeight}px`; // Limit height based on maxRows and font size
@@ -223,12 +227,8 @@ function helperDivShow(event, id, text, img, username) {
 								"user_id": userId,
   								"id": pickedId
 								}));
-	
-  } 
-
-  let imageFile = undefined
-  let imageShow = false;
-  $: console.log(imageFile, "картинка")
+  pinnedMsg = pinnedMsg.filter(pinnedMsg => pinnedMsg.id !== pickedId)
+  }
 
   function triggerFileInput() {
     imageFile.click();
@@ -409,13 +409,15 @@ function helperDivShow(event, id, text, img, username) {
 						 			  on:input={onInput} name="msg" id="msg"></textarea>
 						
 						 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-						 	<img class="logoForImage"  src="logoForImage.svg" alt=""
-						      	 on:click={() => document.getElementById('fileInput').click()}>
+							<div class="logoForImageDiv">
+						 		<img class="logoForImage"  src="logoForImage.svg" alt=""
+						      		 on:click={() => document.getElementById('fileInput').click()}>
+							</div>
 
 						</div>
 
-						 <input type="file" accept="image/*" id="fileInput" 
-							    on:change={handleFileChange} style="display: none;">
+						<input type="file" accept="image/*" id="fileInput" 
+							   on:change={handleFileChange} style="display: none;">
 						
 					</div>
 					{/if}
@@ -551,20 +553,24 @@ function helperDivShow(event, id, text, img, username) {
 .pinnedMsg{
 	display: flex;
 	width: 90%;
+	margin-bottom: 10px;
 }
 
 .pinDiv{
 	display: flex;
-	width: 100%;
+	//background-color: red;
 }
 
 .pinnedMain{
 	display: flex;
 	flex-direction: column;
-	margin: 10px;
 	width: 100%;
 	height: 100%;
-	margin-bottom: 10px;
+	margin: 0 10px;
+	overflow: auto;
+	scroll-behavior: smooth;
+	
+	//background-color: red;
 }
 
 .nameAnswerDiv > p,img{
@@ -689,18 +695,23 @@ function helperDivShow(event, id, text, img, username) {
 }
 
 .logoForImage{
-	display: flex;
-	justify-self: center;
-	align-self: flex-start;
-	width:  2rem;
+	width: 2rem;
 	height: 2rem;
-	padding: 5px;
+}
+
+.logoForImageDiv{
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	margin-top: -7px;
+	width:  50px;
+	height: 100%;
 	//background-color: red;
 }
 
 .messageImage{
 	padding-bottom: 0px;
-	border-radius: 0 0 10px 10px;
+	border-radius: 10px;
 	max-width: 500px;
 	max-height: 500px;
 }
@@ -738,9 +749,7 @@ padding-bottom: 10px;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	margin-bottom: 10px;
 	overflow: auto;
-	//background-color: red;
 	scroll-behavior: smooth;
 }
 
@@ -752,12 +761,14 @@ padding-bottom: 10px;
 		background:
 			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
+	margin-top: 5px;
 	//padding: 5px;
 	//background-color: red;
 }
 
 #msg{
 	width: 100%;
+	height: 34px;
 	background-color: transparent;
 	border: 0;
 	line-height: 1em;
@@ -769,8 +780,9 @@ padding-bottom: 10px;
 
 .chatDiv{
 	//background-color: red;
-	width: 98%;
-	height: 98%;
+	width: 100%;
+	height: 99%;
+	margin: 0 10px 5px 10px;
 	display: flex;
 	flex-direction: column;
 	align-self: center;