text-tools: Make split-join card more compact

eliandoran · Jul 6, 2024 · 9c878a4 · 9c878a4
1 parent 6903d85
commit 9c878a4
Showing 1 changed file with 41 additions and 19 deletions.
diff --git a/src/routes/plain-text/split-join.svelte b/src/routes/plain-text/split-join.svelte
@@ -6,7 +6,7 @@
   import SetMerge from "svelte-material-icons/SetMerge.svelte";
 
   export let text;
-  let separator = "";
+  let separator = ",";
 
   function join() {
     text = text.split("\n").join(separator);
@@ -19,30 +19,52 @@
 </script>
 
 <ActionCard title="Split/Join Lines">
-
-  <label>
-    Separator:
-    <input class="separator-input" type="text" bind:value={separator} />
-  </label>
-
-  <hr />
-
-  <ActionCardItem
-    label="Join"
-    icon={SetMerge}
-    on:click={join} />
-
-  <ActionCardItem
-    label="Split"
-    icon={SetSplit}
-    on:click={split} />
-
+  <div class="card-container">
+    <div class="left">
+      <label>
+        Separator:
+        <input class="separator-input" type="text" bind:value={separator} />
+      </label>
+    </div>
+
+    <div class="right">
+      <ActionCardItem
+        label="Join"
+        icon={SetMerge}
+        on:click={join} />
+
+      <ActionCardItem
+        label="Split"
+        icon={SetSplit}
+        on:click={split} />
+    </div>
+  </div>
 </ActionCard>
 
 <style>
   .separator-input {
     width: 50px; 
     margin-left: 0.25em;
+    padding: 0.25em;
+    text-align: center;
+    font-size: 1.1em;
+    font-family: var(--font-monospace);
   }
 
+  .left,
+  .right {
+    padding: 0.25em;
+    flex-grow: 1;
+  }
+
+  .right {
+    border-left: 1px solid var(--border-color);
+    padding-left: 0.25em;
+  }
+
+  .card-container {
+    display: flex;
+    margin: -0.75em;
+    align-items: center;
+  }
 </style>