Scrollable modalcard

This commit is contained in:
Brieuc Dubois 2024-01-18 02:31:04 +01:00
parent 0d8530a364
commit acfa546b6c
3 changed files with 57 additions and 47 deletions

View File

@ -5,6 +5,8 @@
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import { cards } from '$lib/types/Card'; import { cards } from '$lib/types/Card';
import SvelteMarkdown from 'svelte-markdown'; import SvelteMarkdown from 'svelte-markdown';
import CrossedEye from '../icons/CrossedEye.svelte';
import EyeIcon from '../icons/EyeIcon.svelte';
export let card: Card; export let card: Card;
@ -32,7 +34,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="modal" on:click|self={() => save(true)}> <div class="modal" on:click|self={() => save(true)}>
<div class="content"> <div class="content">
<div class="header"> <header>
<input class="title" bind:value={newTitle} on:blur={() => save(false)} /> <input class="title" bind:value={newTitle} on:blur={() => save(false)} />
<div class="buttons"> <div class="buttons">
<button <button
@ -52,13 +54,17 @@
<CloseIcon /> <CloseIcon />
</button> </button>
</div> </div>
</div> </header>
<div class="tags"> <div class="tags">
<ModalTags {card} /> <ModalTags {card} />
</div> </div>
<div class="body"> <div class="body">
<div class="toggleEdit" on:click|preventDefault={() => (editDescription = !editDescription)}> <div class="toggleEdit" on:click|preventDefault={() => (editDescription = !editDescription)}>
👁 {#if editDescription}
<EyeIcon />
{:else}
<CrossedEye />
{/if}
</div> </div>
{#if editDescription} {#if editDescription}
<textarea <textarea
@ -84,22 +90,30 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box;
}
.content { .content {
background: #1e1e1e; background: #1e1e1e;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
max-width: 1000px; max-width: 1000px;
max-height: 90vh;
overflow-y: scroll;
width: 100%; width: 100%;
display: flex; display: block;
justify-content: center; box-sizing: border-box;
flex-direction: column;
gap: 30px;
}
} }
.modal input, header {
.modal textarea { display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
input,
.body {
background: none; background: none;
color: inherit; color: inherit;
border: 1px solid #333; border: 1px solid #333;
@ -107,25 +121,26 @@
padding: 4px; padding: 4px;
} }
.modal .title { input {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
} }
.modal .header { .body {
display: flex; position: relative;
flex-direction: row; font-size: 1.5rem;
justify-content: space-between; min-height: 300px;
margin-top: 20px;
} }
.modal .buttons { .buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.modal button { button {
margin-left: 5px; margin-left: 5px;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -134,48 +149,31 @@
border-radius: 10px; border-radius: 10px;
} }
.modal button:hover { button:hover {
background-color: #333; background-color: #333;
cursor: pointer; cursor: pointer;
} }
.modal .buttons button:first-child:hover { button:first-child:hover {
background-color: #433; 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 { .toggleEdit {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
font-size: 2rem;
cursor: pointer; cursor: pointer;
} }
.modal textarea { textarea {
width: 100%; width: 100%;
min-height: 300px; min-height: 300px;
height: fit-content; height: fit-content;
border: 0; border: 0;
resize: none; resize: none;
font-family: inherit; font-family: inherit;
background: none;
color: inherit;
} }
</style> </style>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -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
>

After

Width:  |  Height:  |  Size: 1002 B