From 624deafb0ba75776da6ade2bed571559d646c7a2 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 7 Nov 2022 17:36:32 +0300
Subject: [PATCH 1/3] responsive controlled

---
 app/View/Components/Form/Group/File.php       |  2 +-
 public/css/app.css                            | 12 ++++++++++++
 .../AkauntingDropzoneFileUpload.vue           |  2 +-
 .../assets/js/views/settings/settings.js      | 19 ++++++++++++++++++-
 .../form/group/invoice_text.blade.php         |  7 +++++--
 .../components/show/summary/index.blade.php   |  2 +-
 .../components/show/summary/left.blade.php    |  2 +-
 .../views/settings/invoice/edit.blade.php     |  6 +++---
 8 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/app/View/Components/Form/Group/File.php b/app/View/Components/Form/Group/File.php
index a9f34754d..46e4dea91 100644
--- a/app/View/Components/Form/Group/File.php
+++ b/app/View/Components/Form/Group/File.php
@@ -11,7 +11,7 @@ class File extends Form
     public $formGroupClass = 'sm:col-span-3';
 
     public $custom_attributes = [
-        'dropzone-class' => 'form-file dropzone-column w-1/2 h-32.5',
+        'dropzone-class' => 'form-file dropzone-column sm:w-1/2 h-32.5',
     ];
 
     /**
diff --git a/public/css/app.css b/public/css/app.css
index c907379ff..be74e7f9d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -51017,6 +51017,10 @@ body{
     width: 500px;
   }
 
+  .sm\:w-1\/2{
+    width: 50%;
+  }
+
   .sm\:w-6\/12{
     width: 50%;
   }
@@ -51049,6 +51053,10 @@ body{
     width: 24rem;
   }
 
+  .sm\:w-37{
+    width: 9.25rem;
+  }
+
   .sm\:w-60{
     width: 15rem;
   }
@@ -51494,6 +51502,10 @@ body{
         justify-content: space-around;
   }
 
+    .lg\:gap-8{
+    gap: 2rem;
+  }
+
     .lg\:gap-16{
     gap: 4rem;
   }
diff --git a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
index 8343afe4d..27128d909 100644
--- a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
+++ b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="'dropzone-' + _uid" class="dropzone dz-clickable" :class="[preview == 'single' ? 'dropzone-single': 'dropzone-multiple', singleWidthClasses ? 'w-full': 'w-37']">
+    <div :id="'dropzone-' + _uid" class="dropzone dz-clickable" :class="[preview == 'single' ? 'dropzone-single': 'dropzone-multiple', singleWidthClasses ? 'w-full': 'sm:w-37']">
         <div class="fallback">
             <div class="custom-file">
                 <input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
index ba3ee7e75..05126a72e 100644
--- a/resources/assets/js/views/settings/settings.js
+++ b/resources/assets/js/views/settings/settings.js
@@ -50,7 +50,7 @@ const app = new Vue({
             },
             item_name_input: false,
             price_name_input: false,
-            quantity_name_input: false
+            quantity_name_input: false,
         }
     },
 
@@ -141,24 +141,41 @@ const app = new Vue({
             });
         },
 
+        onSmallWidthColumn(item) {
+            this.$refs[item].$el.classList.remove('sm:col-span-6');
+            this.$refs[item].$el.classList.add('sm:col-span-3');
+        },
+
+        onFullWidthColumn(item) {
+            this.$refs[item].$el.classList.add('sm:col-span-6');
+            this.$refs[item].$el.classList.remove('sm:col-span-3');
+        },
+
         settingsInvoice() {
             if (this.form.item_name == 'custom') {
                 this.item_name_input = true;
+                this.onSmallWidthColumn("item_name");
             } else {
                 this.item_name_input = false;
+                this.onFullWidthColumn("item_name");
             }
 
             if (this.form.price_name == 'custom') {
                 this.price_name_input = true;
+                this.onSmallWidthColumn("price_name");
             } else {
                 this.price_name_input = false;
+                this.onFullWidthColumn("price_name");
             }
 
             if (this.form.quantity_name == 'custom') {
                 this.quantity_name_input = true;
+                this.onSmallWidthColumn("quantity_name");
             } else {
                 this.quantity_name_input = false;
+                this.onFullWidthColumn("quantity_name");
             }
+            
         },
 
         // Change currency get money
diff --git a/resources/views/components/form/group/invoice_text.blade.php b/resources/views/components/form/group/invoice_text.blade.php
index c6c40c7e9..9f4126e5e 100644
--- a/resources/views/components/form/group/invoice_text.blade.php
+++ b/resources/views/components/form/group/invoice_text.blade.php
@@ -1,7 +1,7 @@
 @stack($name . '_input_start')
 <div
     @class([
-        'grid sm:grid-cols-6 gap-8',
+        'grid sm:grid-cols-6 lg:gap-8',
         $formGroupClass,
         'required' => $required,
         'readonly' => $readonly,
@@ -25,6 +25,8 @@
             'disabled' => $disabled,
         ])
 
+        ref="{{ $name }}"
+
         id="form-invoice-{{ $name }}"
 
         @if (isset($attributes['v-show']))
@@ -168,7 +170,8 @@
 
     @foreach ($options as $option)
         @if ($option->id == 'custom')
-            <div class="col-span-6 my-5" v-if="form.{{ $name }} == 'custom'">
+            <div class="col-span-3" v-if="{{ $attributes['input-name'] }}">
+                <div class="h-6"></div>
                 <x-form.group.text name="{{ $attributes['input-name'] }}" value="{{ $attributes['input-value'] }}" />
             </div>
         @endif
diff --git a/resources/views/components/show/summary/index.blade.php b/resources/views/components/show/summary/index.blade.php
index d84ea53b0..bf0403f3f 100644
--- a/resources/views/components/show/summary/index.blade.php
+++ b/resources/views/components/show/summary/index.blade.php
@@ -1,3 +1,3 @@
-<div class="flex flex-col lg:flex-row items-center my-10">
+<div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 my-10">
     {!! $slot !!}
 </div>
diff --git a/resources/views/components/show/summary/left.blade.php b/resources/views/components/show/summary/left.blade.php
index db91ff461..887a3a1a8 100644
--- a/resources/views/components/show/summary/left.blade.php
+++ b/resources/views/components/show/summary/left.blade.php
@@ -1,4 +1,4 @@
-<div class="w-full lg:w-5/12 flex items-center mb-10 sm:mb-0">
+<div class="w-full lg:w-5/12 flex items-center">
     @if (! empty($avatar) && $avatar->isNotEmpty())
     <div class="w-12 h-12 flex items-center justify-center text-2xl font-regular border border-gray-300 rounded-full p-6">
         {!! $avatar !!}
diff --git a/resources/views/settings/invoice/edit.blade.php b/resources/views/settings/invoice/edit.blade.php
index a4b249c6a..bf868b7ae 100644
--- a/resources/views/settings/invoice/edit.blade.php
+++ b/resources/views/settings/invoice/edit.blade.php
@@ -102,7 +102,7 @@
                                 change="settingsInvoice"
                                 input-name="item_name_input"
                                 :input-value="setting('invoice.item_name_input')"
-                                form-group-class="sm:col-span-6 sm:gap-0"
+                                form-group-class="sm:col-span-6"
                             />
 
                             <x-form.group.invoice-text
@@ -113,7 +113,7 @@
                                 change="settingsInvoice"
                                 input-name="price_name_input"
                                 :input-value="setting('invoice.price_name_input')"
-                                form-group-class="sm:col-span-6 sm:gap-0"
+                                form-group-class="col-span-3 sm:col-span-6"
                             />
 
                             <x-form.group.invoice-text
@@ -124,7 +124,7 @@
                                 change="settingsInvoice"
                                 input-name="quantity_name_input"
                                 :input-value="setting('invoice.quantity_name_input')"
-                                form-group-class="sm:col-span-6 sm:gap-0"
+                                form-group-class="sm:col-span-6"
                             />
                         </div>
 

From 2c287759204c68f178052a91bc2d6e2c3c153c66 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 7 Nov 2022 17:37:21 +0300
Subject: [PATCH 2/3] added new class

---
 public/css/app.css | 18 ++++++++++--------
 safelist.txt       |  2 ++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index be74e7f9d..7167f3823 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -51017,10 +51017,6 @@ body{
     width: 500px;
   }
 
-  .sm\:w-1\/2{
-    width: 50%;
-  }
-
   .sm\:w-6\/12{
     width: 50%;
   }
@@ -51287,6 +51283,12 @@ body{
     display: flex;
   }
 
+  .lg\:inline-flex{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  }
+
   .lg\:hidden{
     display: none;
   }
@@ -51502,14 +51504,14 @@ body{
         justify-content: space-around;
   }
 
-    .lg\:gap-8{
-    gap: 2rem;
-  }
-
     .lg\:gap-16{
     gap: 4rem;
   }
 
+    .lg\:gap-8{
+    gap: 2rem;
+  }
+
     .lg\:space-x-16 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(4rem * var(--tw-space-x-reverse));
diff --git a/safelist.txt b/safelist.txt
index 504cd8b73..513e2d569 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -15,6 +15,8 @@ lg:relative
 lg:right-0
 lg:justify-around
 lg:space-x-16
+lg:inline-flex
+lg:space-y-0
 sm:ltr:right-4
 sm:rtl:left-4
 sm:w-500

From 568c7d37cbd8c284817359618fe86dd919cd924e Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 7 Nov 2022 17:38:08 +0300
Subject: [PATCH 3/3] css compiled

---
 public/css/app.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/css/app.css b/public/css/app.css
index 54103cc4a..79b46add8 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -51016,6 +51016,10 @@ body{
     display: none;
   }
 
+  .sm\:min-h-500{
+    min-height: 500px;
+  }
+
   .sm\:w-500{
     width: 500px;
   }
@@ -51596,6 +51600,10 @@ body{
     padding-left: 1.5rem;
   }
 
+    .lg\:pr-12{
+    padding-right: 3rem;
+  }
+
     .lg\:pl-12{
     padding-left: 3rem;
   }