Better highlighting of editability and shit

lyssieth · Jan 6, 2024 · 2b037f8 · 2b037f8
1 parent b1a2801
commit 2b037f8
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 45 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -154,3 +154,30 @@ button:focus-visible {
     background-color: color-mix(in srgb, #f9f9f9 55%, #09f 45%);
   }
 }
+
+div.editable-block {
+  background-color: lighten(#1a1a1a, 5%);
+  border-radius: 0.5em;
+  padding: 0.5em;
+
+  @media (prefers-color-scheme: light) {
+    background-color: darken(#f9f9f9, 25%);
+  }
+}
+
+pre.editable {
+  background-color: lighten(#1a1a1a, 5%);
+  color: #09f;
+  padding: 0.5em 0.5em;
+  margin: 0;
+  border-radius: 0.5em;
+  font-size: 0.9em;
+  font-family: "Fira Code", "Source Code Pro", "Iosevka", monospace;
+  line-height: 1.1;
+  overflow-x: auto;
+
+  @media (prefers-color-scheme: light) {
+    background-color: darken(#f9f9f9, 35%);
+    color: darken(#09f, 35%);
+  }
+}
diff --git a/src/lib/ImportModal.svelte b/src/lib/ImportModal.svelte
@@ -17,6 +17,8 @@
 
     try {
       const data = validate(JSON.parse(template));
+      if (data.author instanceof Object) data.author = data.author.name; // remove the link so nobody can claim it's an official template
+
       $current = data;
       $importModalOpen = false;
       dialog.close();

diff --git a/src/lib/Question.svelte b/src/lib/Question.svelte
@@ -35,56 +35,69 @@
 
 <li class="question" data-question="{question.question}">
   <label>
-    <QuestionTitle {changed}
-      ><EditableText bind:value="{question.question}" /> <slot /></QuestionTitle
-    >
     {#if $editMode}
-      <p><EditableText bind:value="{question.placeholder}" /></p>
-      <label style="flex-direction: row; gap: 0.5em;">
-        <span>What type of question is this?</span>
-        <select bind:value="{question.type}">
-          <option value="textarea">Text area</option>
-          <option value="text">Text box</option>
-          <option value="number">Number</option>
-        </select>
-      </label>
-      {#if question.type === "textarea" || question.type === "text"}
+      <div class="editable-block">
+        <h3>Title</h3>
+        <pre class="editable"><EditableText
+            bind:value="{question.question}"
+          /></pre>
+        <hr />
+        <h3 class="ediitable-title">Placeholder</h3>
+        <pre class="editable"><EditableText
+            bind:value="{question.placeholder}"
+          /></pre>
         <label style="flex-direction: row; gap: 0.5em;">
-          <span>How large the text area/box should be:</span>
-          <select bind:value="{question.length}">
-            <option value="short">Short</option>
-            <option value="medium">Medium</option>
-            <option value="long">Long</option>
+          <span>What type of question is this?</span>
+          <select bind:value="{question.type}">
+            <option value="textarea">Text area</option>
+            <option value="text">Text box</option>
+            <option value="number">Number</option>
           </select>
         </label>
+        {#if question.type === "textarea" || question.type === "text"}
+          <label style="flex-direction: row; gap: 0.5em;">
+            <span>How large the text area/box should be:</span>
+            <select bind:value="{question.length}">
+              <option value="short">Short</option>
+              <option value="medium">Medium</option>
+              <option value="long">Long</option>
+            </select>
+          </label>
+        {/if}
+      </div>
+    {:else}
+      <QuestionTitle {changed}
+        ><EditableText bind:value="{question.question}" />
+        <slot /></QuestionTitle
+      >
+      {#if type === "textarea"}
+        {@const { length } = question}
+        <textarea
+          data-flub="{question.placeholder}"
+          on:change="{onChange}"
+          class="answer"
+          rows="{rows[length ?? 'medium']}"
+          {placeholder}
+        ></textarea>
+      {:else if type === "number"}
+        <input
+          data-flub="{question.placeholder}"
+          on:change="{onChange}"
+          class="answer"
+          type="number"
+          {placeholder}
+        />
+      {:else if type === "text"}
+        {@const { length } = question}
+        <input
+          data-flub="{question.placeholder}"
+          on:change="{onChange}"
+          class="answer"
+          type="text"
+          {placeholder}
+          data-length="{length ?? 'medium'}"
+        />
       {/if}
-    {:else if type === "textarea"}
-      {@const { length } = question}
-      <textarea
-        data-flub="{question.placeholder}"
-        on:change="{onChange}"
-        class="answer"
-        rows="{rows[length ?? 'medium']}"
-        {placeholder}
-      ></textarea>
-    {:else if type === "number"}
-      <input
-        data-flub="{question.placeholder}"
-        on:change="{onChange}"
-        class="answer"
-        type="number"
-        {placeholder}
-      />
-    {:else if type === "text"}
-      {@const { length } = question}
-      <input
-        data-flub="{question.placeholder}"
-        on:change="{onChange}"
-        class="answer"
-        type="text"
-        {placeholder}
-        data-length="{length ?? 'medium'}"
-      />
     {/if}
   </label>
 </li>

diff --git a/src/lib/Questionnaire.svelte b/src/lib/Questionnaire.svelte
@@ -40,6 +40,13 @@
       return c;
     });
   }
+
+  editMode.subscribe((v) => {
+    if (v && $current) {
+      if ($current.author instanceof Object)
+        $current.author = $current.author.name; // remove the link so nobody can claim it's an official template
+    }
+  });
 </script>
 
 <p style="font-size: 0.75em;">Note: the sections are collapsible :3</p>