Scrollable modalcard
This commit is contained in:
parent
0d8530a364
commit
acfa546b6c
|
|
@ -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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #1e1e1e;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
max-width: 1000px;
|
||||
max-height: 90vh;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal input,
|
||||
.modal textarea {
|
||||
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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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 |
Loading…
Reference in New Issue