responsive controlled

This commit is contained in:
Burak Civan 2022-11-07 17:36:32 +03:00
parent b6295dfaf5
commit 624deafb0b
8 changed files with 42 additions and 10 deletions

View File

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

12
public/css/app.css vendored
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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