From 8b0b1f2f9c5e0775e838524950396932e346497f Mon Sep 17 00:00:00 2001
From: Torsten Simon <simon@edu-sharing.net>
Date: Wed, 30 Apr 2025 11:59:27 +0200
Subject: [PATCH] markdown carta, layout

---
 src/routes/+page.svelte        | 24 ++++++++++--------------
 src/routes/q/[id]/+page.svelte | 13 ++++++++-----
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c9f1038..bd0b3f2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -79,25 +79,25 @@
 
 	{#if !$questionId}
 		<div class="mx-auto p-4">
-			<h1 class="mb-4 text-2xl font-bold">Join a session!</h1>
+			<h1 class="mb-4 text-2xl font-bold">An einer Ideensammlung teilnehmen</h1>
 			{#if $connected}
 				<div class="join">
-					<input type="number" class="border p-2" placeholder="Session id" bind:value={sessionId} />
-					<button class="btn btn-primary rounded" onclick={() => joinSession()}> Join </button>
+					<input type="number" class="border p-2" placeholder="12345678" bind:value={sessionId} />
+					<button class="btn btn-primary rounded" onclick={() => joinSession()}> Teilnehmen </button>
 				</div>
 			{/if}
 		</div>
 		<div class="divider" />
 	{/if}
 	<div class="mx-auto p-4">
-		<h1 class="mb-4 text-2xl font-bold">Ask a Question</h1>
+		<h1 class="mb-4 text-2xl font-bold">Eine Ideensammlung starten</h1>
 
 		{#if $connected}
 		{#key $questionId}
 			{#if $questionId === ''}
-				<div>
+				<div class="flex flex-col justify-center items-center">
 					<MarkdownEditor bind:value={$question} {carta} />
-					<button class="btn btn-primary rounded mt-5" onclick={postQuestion}> Post Question </button>
+					<div><button class="btn btn-primary rounded mt-5" onclick={postQuestion}> Starten </button></div>
 				</div>
 			{:else}
 				<div class="qr-share mt-4">
@@ -130,16 +130,12 @@
 </div>
 
 <style>
-	/* Optional styling */
-	:global(.carta-font-code) {
-			font-family: 'Monaco', monospace;
-			font-size: 1.1rem;
-			line-height: 1.1rem;
-			letter-spacing: normal;
-	}
 	:global(.carta-input) {
-  	height: 150px !important;
+			height: 150px !important;
 	}
+  :global(.carta-editor) {
+      width: 100% !important;
+  }
 	input[type='number']::-webkit-inner-spin-button,
 	input[type='number']::-webkit-outer-spin-button {
 		-webkit-appearance: none;
diff --git a/src/routes/q/[id]/+page.svelte b/src/routes/q/[id]/+page.svelte
index 7824ac5..50646fe 100644
--- a/src/routes/q/[id]/+page.svelte
+++ b/src/routes/q/[id]/+page.svelte
@@ -15,12 +15,16 @@
 		sanitizer: DOMPurify.sanitize
 	});
 	function submitComment() {
+		if(!$comment) {
+			return;
+		}
 		const commentEvent = new NDKEvent($ndk, {
 			kind: 2222,
 			content: $comment,
 			tags: [['E', data.id]]
 		});
 		commentEvent.publish();
+		comment.set('');
 	}
 
 	let comment = writable('');
@@ -43,15 +47,14 @@
 		{#await $ndk.fetchEvent(data.id) then question}
 			{#if question}
 				<div class="question mb-4 w-full rounded border p-4 text-xl">
-					<h2>Question:<br />
-						<Markdown {carta} value={question.content} />
-				</h2>
+					<h2 class="text-xl font-bold">Frage / Thema:</h2>
+					<Markdown {carta} value={question.content} />
 				</div>
 
 				<div class="mb-2 flex w-full flex-col items-center justify-center gap-2">
-					<h1 class="text-xl">Ideensammlung</h1>
+					<h1 class="text-xl font-bold pt-15">Meine Idee hinzufügen</h1>
 					<MarkdownEditor bind:value={$comment} {carta} />
-					<button class="btn btn-primary mb-10" onclick={() => submitComment()}>Absenden</button>
+					<button class="btn btn-primary mb-10 mt-5" onclick={() => submitComment()}>Hinzufügen</button>
 				</div>
 			{:else}
 				<p>Loading...</p>