From acfa546b6cb97470ac6c528a2def04a2bf3670d0 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Thu, 18 Jan 2024 02:31:04 +0100
Subject: [PATCH] Scrollable modalcard

---
 .../src/lib/components/card/ModalCard.svelte  | 92 +++++++++----------
 .../lib/components/icons/CrossedEye.svelte    |  6 ++
 .../src/lib/components/icons/EyeIcon.svelte   |  6 ++
 3 files changed, 57 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/lib/components/icons/CrossedEye.svelte
 create mode 100644 frontend/src/lib/components/icons/EyeIcon.svelte

diff --git a/frontend/src/lib/components/card/ModalCard.svelte b/frontend/src/lib/components/card/ModalCard.svelte
index 09ab901..42b4b9c 100644
--- a/frontend/src/lib/components/card/ModalCard.svelte
+++ b/frontend/src/lib/components/card/ModalCard.svelte
@@ -5,6 +5,8 @@
 	import type Card from '$lib/types/Card';
 	import { cards } from '$lib/types/Card';
 	import SvelteMarkdown from 'svelte-markdown';
+	import CrossedEye from '../icons/CrossedEye.svelte';
+	import EyeIcon from '../icons/EyeIcon.svelte';
 
 	export let card: Card;
 
@@ -32,7 +34,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="modal" on:click|self={() => save(true)}>
 	<div class="content">
-		<div class="header">
+		<header>
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">
 				<button
@@ -52,13 +54,17 @@
 					<CloseIcon />
 				</button>
 			</div>
-		</div>
+		</header>
 		<div class="tags">
 			<ModalTags {card} />
 		</div>
 		<div class="body">
 			<div class="toggleEdit" on:click|preventDefault={() => (editDescription = !editDescription)}>
-				👁
+				{#if editDescription}
+					<EyeIcon />
+				{:else}
+					<CrossedEye />
+				{/if}
 			</div>
 			{#if editDescription}
 				<textarea
@@ -84,22 +90,30 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
-		.content {
-			background: #1e1e1e;
-			padding: 20px;
-			border-radius: 8px;
-			max-width: 1000px;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			flex-direction: column;
-			gap: 30px;
-		}
+		box-sizing: border-box;
 	}
 
-	.modal input,
-	.modal textarea {
+	.content {
+		background: #1e1e1e;
+		padding: 20px;
+		border-radius: 8px;
+		max-width: 1000px;
+		max-height: 90vh;
+		overflow-y: scroll;
+		width: 100%;
+		display: block;
+		box-sizing: border-box;
+	}
+
+	header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 20px;
+	}
+
+	input,
+	.body {
 		background: none;
 		color: inherit;
 		border: 1px solid #333;
@@ -107,25 +121,26 @@
 		padding: 4px;
 	}
 
-	.modal .title {
+	input {
 		font-size: 2rem;
 		font-weight: bold;
 		width: 100%;
 	}
 
-	.modal .header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
+	.body {
+		position: relative;
+		font-size: 1.5rem;
+		min-height: 300px;
+		margin-top: 20px;
 	}
 
-	.modal .buttons {
+	.buttons {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
-	.modal button {
+	button {
 		margin-left: 5px;
 		height: 50px;
 		width: 50px;
@@ -134,48 +149,31 @@
 		border-radius: 10px;
 	}
 
-	.modal button:hover {
+	button:hover {
 		background-color: #333;
 		cursor: pointer;
 	}
 
-	.modal .buttons button:first-child:hover {
+	button:first-child:hover {
 		background-color: #433;
 	}
 
-	.modal .body {
-		margin-bottom: 20px;
-		// border: 1px solid red;
-		font-size: 1.5rem;
-
-		border: 1px solid #444;
-		min-height: 300px;
-		border-radius: 5px;
-		padding: 5px;
-		position: relative;
-
-		&:before {
-			transition: color 0.2s ease-in-out;
-		}
-
-		&:before:hover {
-			color: #333;
-		}
-	}
-
 	.toggleEdit {
 		position: absolute;
 		top: 10px;
 		right: 10px;
+		font-size: 2rem;
 		cursor: pointer;
 	}
 
-	.modal textarea {
+	textarea {
 		width: 100%;
 		min-height: 300px;
 		height: fit-content;
 		border: 0;
 		resize: none;
 		font-family: inherit;
+		background: none;
+		color: inherit;
 	}
 </style>
diff --git a/frontend/src/lib/components/icons/CrossedEye.svelte b/frontend/src/lib/components/icons/CrossedEye.svelte
new file mode 100644
index 0000000..24cc8bd
--- /dev/null
+++ b/frontend/src/lib/components/icons/CrossedEye.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"
+	><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		fill="currentColor"
+		d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+	/></svg
+>
diff --git a/frontend/src/lib/components/icons/EyeIcon.svelte b/frontend/src/lib/components/icons/EyeIcon.svelte
new file mode 100644
index 0000000..5e90e53
--- /dev/null
+++ b/frontend/src/lib/components/icons/EyeIcon.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"
+	><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		fill="currentColor"
+		d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+	/></svg
+>