better styles for manipulations

mishankov · Mar 1, 2024 · 8697e48 · 8697e48
1 parent ac28f81
commit 8697e48
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 2 deletions.
diff --git a/src/manipulations/components/Append.svelte b/src/manipulations/components/Append.svelte
@@ -14,3 +14,11 @@
 <div>
   <span>Suffix </span><input bind:value={suffix} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Compose.svelte b/src/manipulations/components/Compose.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Replace placeholder</span> <input bind:value={placeholder}> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Prepend.svelte b/src/manipulations/components/Prepend.svelte
@@ -15,3 +15,11 @@
   <span>Prefix </span><input bind:value={prefix} />
 </div>
 
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
+
diff --git a/src/manipulations/components/Replace.svelte b/src/manipulations/components/Replace.svelte
@@ -15,3 +15,12 @@
 <div>
   <span>Replace from</span> <input bind:value={from} /> <span>to</span> <input bind:value={to} />
 </div>
+
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Slice.svelte b/src/manipulations/components/Slice.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Slice from</span> <input bind:value={start} type="number"/> <span>to</span> <input bind:value={end} type="number" /> 
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitCompose.svelte b/src/manipulations/components/SplitCompose.svelte
@@ -14,5 +14,13 @@
 </script>
 
 <div>
-  <span>Split by</span> <input bind:value={splitString}/> <span> and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
+  <span>Split by</span> <input bind:value={splitString}/> <span>and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitGetFromIndex.svelte b/src/manipulations/components/SplitGetFromIndex.svelte
@@ -13,5 +13,13 @@
 </script>
 
 <div>
-  <span>Split by </span><input bind:value={splitString} /><span>, get from </span><input bind:value={index} />
+  <span>Split by </span><input bind:value={splitString} /><span>get from </span><input bind:value={index} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>