From 0cbcac951d4244296dd14cc4fc8935f370c16e6b Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 24 Jul 2024 09:45:37 +0300
Subject: [PATCH] overflow modal

---
 assets/main.scss          | 9 ++++++++-
 components/calcValues.vue | 5 +++++
 components/modal.vue      | 4 ++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index e365143..6c23270 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -12,6 +12,9 @@ html {
 
 body {
     @apply select-none min-w-80 font-sans;
+    &.modal-opened {
+        @apply overflow-hidden;
+    }
 }
 
 .container {
@@ -210,7 +213,7 @@ a[href^="#"] {
     &-image {
         @apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;
 
-        img{
+        img {
             @apply rounded-full bg-slate-300
         }
     }
@@ -247,6 +250,10 @@ a[href^="#"] {
         }
     }
 
+    &-content {
+        @apply max-h-[66vh] overflow-auto;
+    }
+
     h2 {
         @apply px-6 text-2xl text-center;
     }
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 782368d..fd160e8 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -133,6 +133,11 @@ watch(() => form_state, changeParametres, { deep: true })
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     isModalOpen.value = !isModalOpen.value
+    if(isModalOpen.value == true) {
+        document.body.classList.add('modal-opened')
+    } else {
+        document.body.classList.remove('modal-opened')
+    }
 }
 const goal = (target: string, params: object) => {
     const nuxtApp = useNuxtApp()
diff --git a/components/modal.vue b/components/modal.vue
index 76e2c70..c362e87 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -208,7 +208,7 @@ const policy = () => {
             </div>
             <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
-                <form @submit.prevent="submit" ref="form">
+                <form @submit.prevent="submit" ref="form" class="modal-content">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
                         @keypress="validateInput" />
@@ -229,7 +229,7 @@ const policy = () => {
             </template>
             <template v-else>
                 <h2>данные расчета</h2>
-                <div class="flex gap-4 flex-col mb-4">
+                <div class="flex gap-4 flex-col mb-4 modal-content">
                     <p>Общая длина: {{ total_length }}<br />
                         Ламелей: {{ lamelles_count }}<br />
                         Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />