dddddMerge branch 'dev' of github.com:s1lvax/connekt into dev

tawaks · Oct 25, 2024 · b03b1e5 · b03b1e5
2 parents f194ab2 + 644ea62
commit b03b1e5
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 35 deletions.
diff --git a/src/lib/components/MyProfile/FormCardHeader.svelte b/src/lib/components/MyProfile/FormCardHeader.svelte
@@ -6,21 +6,9 @@
 	export let description: string;
 
 	let showForm: boolean = false;
-	let wrapper: HTMLDivElement | null;
 
-	// Transitioning from a fixed height (0px) to a variable height with CSS is not exactly possible with most browsers
-	// at the moment of writing this.
-	// There is an experimental CSS property (interpolate-size) that aims to fix this but it's not available on many
-	// browsers. For now I have implemented this using JS (https://stackoverflow.com/a/3149710)
 	const toggleVisibility = () => {
-		if (!wrapper) return;
-
 		showForm = !showForm;
-		if (showForm) {
-			wrapper.style.height = wrapper.scrollHeight + 'px';
-		} else {
-			wrapper.style.height = '0';
-		}
 	};
 </script>
 
@@ -34,8 +22,10 @@
 			<span class="text-xl">{showForm ? '-' : '+'}</span>
 		</Button>
 	</div>
-	<div class="flex flex-col">
-		<div bind:this={wrapper} class="h-0 overflow-hidden transition-all">
+	<div
+		class="grid {showForm ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} transition-[grid-template-rows]"
+	>
+		<div class="overflow-hidden">
 			<slot></slot>
 		</div>
 	</div>

diff --git a/src/lib/components/MyProfile/HobbyForm.svelte b/src/lib/components/MyProfile/HobbyForm.svelte
@@ -7,10 +7,9 @@
 
 	export let data: SuperValidated<Infer<HobbiesSchema>>;
 
-
 	const form = superForm(data, {
 		validators: zodClient(hobbiesSchema),
-		resetForm: true,
+		resetForm: true
 	});
 
 	const { form: formData, enhance } = form;
@@ -20,14 +19,19 @@
 	method="POST"
 	use:enhance
 	action="?/createHobby"
-	class="flex items-center justify-between space-x-4">
-	<div class="flex items-end space-x-2">  
+	class="flex items-center justify-between space-x-4"
+>
+	<div class="flex items-start space-x-2">
 		<Form.Field {form} name="hobby">
-		<Form.Control let:attrs>
-			<Form.Label>Hobby</Form.Label>
-			<Input {...attrs} bind:value={$formData.hobby} />
-		</Form.Control>
+			<Form.Control let:attrs>
+				<Form.Label>Hobby</Form.Label>
+				<Input {...attrs} bind:value={$formData.hobby} />
+			</Form.Control>
+			<Form.FieldErrors />
 		</Form.Field>
-		<Form.Button>Add</Form.Button>  
+		<div class="space-y-2">
+			<span class="invisible block">a</span>
+			<Form.Button>Add</Form.Button>
+		</div>
 	</div>
 </form>
diff --git a/src/lib/components/MyProfile/LinkForm.svelte b/src/lib/components/MyProfile/LinkForm.svelte
@@ -8,7 +8,7 @@
 
 	export let data: SuperValidated<Infer<LinksSchema>>;
 	export let linksLength: number;
-	export let links: Link[] = []; 
+	export let links: Link[] = [];
 	let isLimitReached = false;
 	$: isLimitReached = links.length >= 15;
 
@@ -25,7 +25,7 @@
 	method="POST"
 	use:enhance
 	action="?/createLink"
-	class="flex w-full max-w-lg items-center justify-start space-x-4"
+	class="flex w-full max-w-lg items-start justify-start space-x-4"
 >
 	<div class="flex flex-col">
 		<Form.Field {form} name="title">
@@ -47,17 +47,20 @@
 		</Form.Field>
 	</div>
 
+	<div class="space-y-2">
+		<span class="invisible block">a</span>
+		<Form.Button disabled={isLimitReached} class="mt-5 flex align-bottom">Add</Form.Button>
+	</div>
+
 	<Form.Field {form} name="order">
 		<Form.Control let:attrs>
 			<Input {...attrs} bind:value={$formData.order} type="hidden" />
 		</Form.Control>
 	</Form.Field>
-
-	<Form.Button disabled = {isLimitReached} class="mt-5 flex align-bottom">Add</Form.Button>
 </form>
 
 {#if isLimitReached}
-  <p class="text-red-500 mt-2 text-center">You have reached the maximum limit of 15 links.</p>
+	<p class="mt-2 text-center text-red-500">You have reached the maximum limit of 15 links.</p>
 {:else if $message}
-  <p class="text-red-500 mt-2 text-center">{$message}</p>
-{/if}
+	<p class="mt-2 text-center text-red-500">{$message}</p>
+{/if}
diff --git a/src/lib/components/MyProfile/SkillsForm.svelte b/src/lib/components/MyProfile/SkillsForm.svelte
@@ -57,7 +57,7 @@
 	action="?/createSkill"
 	class="flex items-center justify-center space-x-4"
 >
-	<div class="flex flex-grow items-end space-x-2">
+	<div class="flex flex-grow items-start space-x-2">
 		<Form.Field {form} name="title">
 			<Form.Control let:attrs>
 				<Form.Label>Title</Form.Label>
@@ -83,13 +83,16 @@
 			<Form.FieldErrors />
 		</Form.Field>
 
+		<div class="space-y-2">
+			<span class="invisible block">a</span>
+			<Form.Button class="mb-2" disabled={isLimitReached}>Add</Form.Button>
+		</div>
+
 		<Form.Field {form} name="order">
 			<Form.Control let:attrs>
 				<Input {...attrs} bind:value={$formData.order} type="hidden" />
 			</Form.Control>
 		</Form.Field>
-
-		<Form.Button class="mb-2" disabled={isLimitReached}>Add</Form.Button>
 	</div>
 </form>
 

diff --git a/src/lib/components/MyProfile/SocialsForm.svelte b/src/lib/components/MyProfile/SocialsForm.svelte
@@ -31,7 +31,7 @@
 	action="?/createSocial"
 	class="flex items-center justify-between space-x-4"
 >
-	<div class="flex flex-grow items-end space-x-2">
+	<div class="flex flex-grow items-start space-x-2">
 		<Form.Field {form} name="social" class="w-1/2">
 			<Form.Control let:attrs>
 				<Form.Label>Social Media</Form.Label>
@@ -65,6 +65,9 @@
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
-		<Form.Button class="mb-2">Add</Form.Button>
+		<div class="space-y-2">
+			<span class="invisible block">a</span>
+			<Form.Button class="mb-2">Add</Form.Button>
+		</div>
 	</div>
 </form>