diff --git a/svelte-ui/package-lock.json b/svelte-ui/package-lock.json index 5d846e5..56ac432 100644 --- a/svelte-ui/package-lock.json +++ b/svelte-ui/package-lock.json @@ -2460,6 +2460,12 @@ "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", "dev": true }, + "@types/marked": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-1.2.1.tgz", + "integrity": "sha512-d5adCgRHB+NAme23hkiTkvpfZUDqoNtL2Sr2nZBJqSj3zyHLxsfFWsGQ2sK2z9aX6L1xkJzon2c0jTPcsEjpaQ==", + "dev": true + }, "@types/node": { "version": "14.14.17", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.17.tgz", @@ -3495,6 +3501,12 @@ "sourcemap-codec": "^1.4.4" } }, + "marked": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.7.tgz", + "integrity": "sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA==", + "dev": true + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", diff --git a/svelte-ui/package.json b/svelte-ui/package.json index 74f16a3..1cae9e7 100644 --- a/svelte-ui/package.json +++ b/svelte-ui/package.json @@ -17,11 +17,13 @@ "@rollup/plugin-replace": "^2.3.4", "@rollup/plugin-typescript": "^6.0.0", "@tsconfig/svelte": "^1.0.0", + "@types/marked": "^1.2.1", "@types/node": "^14.14.17", "amazon-cognito-identity-js": "^4.5.6", "aws-amplify": "^3.3.13", "fa-svelte": "^3.1.0", "lodash-es": "^4.17.20", + "marked": "^1.2.7", "rollup": "^2.3.4", "rollup-plugin-css-only": "^3.1.0", "rollup-plugin-dev": "^1.1.3", diff --git a/svelte-ui/src/components/ChildEntry.svelte b/svelte-ui/src/components/ChildEntry.svelte index 3d37412..b0d7f83 100644 --- a/svelte-ui/src/components/ChildEntry.svelte +++ b/svelte-ui/src/components/ChildEntry.svelte @@ -3,6 +3,7 @@ import DaysLeft from "./DaysLeft.svelte"; import Icon from "./Icon.svelte"; import LinkHook from "./LinkHook.svelte"; + import Markdown from "./Markdown.svelte"; interface EntryCommon { id: string @@ -50,8 +51,8 @@ {/if} -
-

{entry.description}

+
+
@@ -98,14 +99,10 @@ padding: 0.125em 0; } - div.description { + div.entry-body { padding: 0.25em 1ch; background: #222; color: #aaa; border-bottom-right-radius: 0.5em; } - div.description p { - padding: 0; - margin: 0.25em 0; - } diff --git a/svelte-ui/src/components/Markdown.svelte b/svelte-ui/src/components/Markdown.svelte new file mode 100644 index 0000000..f4bf61a --- /dev/null +++ b/svelte-ui/src/components/Markdown.svelte @@ -0,0 +1,75 @@ + + +
{@html outputHtml}
+ + \ No newline at end of file diff --git a/svelte-ui/src/components/Modal.svelte b/svelte-ui/src/components/Modal.svelte index a8047f4..da9a173 100644 --- a/svelte-ui/src/components/Modal.svelte +++ b/svelte-ui/src/components/Modal.svelte @@ -164,7 +164,7 @@ div.modal :global(input), div.modal :global(select), div.modal :global(textarea) color: #777; border: none; outline: none; - resize: none; + resize: vertical; } div.modal :global(select) { padding-left: 0.5ch; @@ -178,6 +178,7 @@ div.modal :global(input:disabled) { color: #aaa; } div.modal :global(textarea) { + min-height: 6em; height: 6em; } div.modal :global(textarea:disabled) { diff --git a/svelte-ui/src/components/ParentEntry.svelte b/svelte-ui/src/components/ParentEntry.svelte index 01312a0..43328ff 100644 --- a/svelte-ui/src/components/ParentEntry.svelte +++ b/svelte-ui/src/components/ParentEntry.svelte @@ -2,7 +2,8 @@ import type { IconName } from "../external/icons"; import DaysLeft from "./DaysLeft.svelte"; import Icon from "./Icon.svelte"; -import LinkHook from "./LinkHook.svelte"; + import LinkHook from "./LinkHook.svelte"; + import Markdown from "./Markdown.svelte"; import Progress from "./Progress.svelte"; interface EntryIconHolder { @@ -63,9 +64,7 @@ import LinkHook from "./LinkHook.svelte"; {/if} {#if (full)} -
-

{entry.description}

-
+ {/if} @@ -112,9 +111,4 @@ import LinkHook from "./LinkHook.svelte"; color: inherit; text-decoration-color: #777; } - - div.description > p { - padding: 0; - margin: 0.25em 0; - } \ No newline at end of file