responsive controlled

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',
     ];
 
     /**

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;
   }

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">

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

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

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>

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 !!}

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>