From f4dc87d841bc6b2f9586e21c4714967662872de3 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Sun, 31 Jul 2022 22:39:14 +0200
Subject: [PATCH] added autoscroll for contact form

---
 src/components/sections/contacts/MailContact.vue | 13 ++++++++++++-
 src/views/ContactView.vue                        |  8 +++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index a64a2d0..1711a04 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow">
+  <div
+    id="contact-form"
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+  >
     <header class="mb-1.5">
       <h3 class="text-xl">
         Formularz kontaktowy
@@ -204,6 +207,14 @@ function formSubmit(event) {
       buttonDisabled.value = false
     })
   }
+
+  scrollTo('#contact-form')
+}
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
 }
 </script>
 
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index ddc51da..e05b70c 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,9 +1,7 @@
 <template>
-  <section class="px-3 py-6">
-    <div class="flex flex-col md:flex-row items-start justify-center mx-auto gap-5">
-      <MailContact />
-      <OtherContact />
-    </div>
+  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
+    <MailContact />
+    <OtherContact />
   </section>
 </template>