From 8648e7e4ab510074fc0596f889dda373de2f0ee4 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 19 Jun 2024 17:10:22 +0300
Subject: [PATCH] adaptivity mobile

---
 assets/main.scss          |  6 +++++-
 components/calcValues.vue | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 6fcb891..49d8777 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -11,7 +11,7 @@ html {
 }
 
 body {
-    @apply bg-primary-500 select-none min-w-96;
+    @apply bg-primary-500 select-none min-w-80;
 }
 
 .container {
@@ -168,6 +168,10 @@ button {
                 @apply text-neutral pointer-events-none cursor-not-allowed;
             }
         }
+
+        &_checkbox {
+            @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
+        }
     }
 }
 
diff --git a/components/calcValues.vue b/components/calcValues.vue
index e675cb9..66214c1 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -132,7 +132,7 @@ const plurals = {
     <div class="container py-4">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <form class="form">
-                <div class="col-span-6">
+                <div class="col-span-12 lg:col-span-6">
                     <div class="form-row">
                         <div class="form-item w-full">
                             <label for="length">Длина секции, мм</label>
@@ -152,17 +152,17 @@ const plurals = {
                             <input type="number" id="total_length" v-bind="parametric.total_length"
                                 v-model="form_state.total_length" :ref="form_refs.total_length" />
                         </div>
-                        <div class="form-item">
+                        <div class="form-item form-item_checkbox">
                             <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
                             <label for="auto_length">Автоматический подбор секции</label>
                         </div>
-                        <div class="form-item">
+                        <div class="form-item form-item_checkbox">
                             <input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
                             <label for="remove_pillar">Без столбов</label>
                         </div>
                     </div>
                 </div>
-                <div class="col-span-6">
+                <div class="col-span-12 lg:col-span-6">
                     <div class="form-row">
                         <div class="form-item">
                             <label for="lamelle_color">Цвет ламелей</label>
@@ -190,7 +190,7 @@ const plurals = {
                         </div>
                     </div>
                 </div>
-                <div class="col-span-8 prose min-w-full">
+                <div class="col-span-12 lg:col-span-8 prose min-w-full">
                     <p>
                         Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
                         {{ section_count }}