Commit 7bf0e174 by Kunto

Form Layouting menggunakan Tailwind Grid css class

1 parent 456c9d09
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
i18n:domain="deform" i18n:domain="deform"
> >
<!--osipkdForm Widgets--> <!--osipkdForm Widgets-->
<div class="grid grid-cols-12 gap-y-6 md:gap-6">
<input type="hidden" name="_charset_" /> <input type="hidden" name="_charset_" />
<input type="hidden" name="__formid__" value="${formid}" /> <input type="hidden" name="__formid__" value="${formid}" />
<div class="alert alert-danger" tal:condition="field.error"> <div class="alert alert-danger" tal:condition="field.error">
...@@ -76,6 +77,7 @@ ...@@ -76,6 +77,7 @@
</tal:loop> </tal:loop>
</div> </div>
</div> </div>
</div>
<script type="text/javascript" tal:condition="use_ajax"> <script type="text/javascript" tal:condition="use_ajax">
deform.addCallback( deform.addCallback(
......
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
hidden hidden|field.widget.hidden; hidden hidden|field.widget.hidden;
category category|field.widget.category; category category|field.widget.category;
structural hidden or category == 'structural'; structural hidden or category == 'structural';
required required|field.required;" required required|field.required;
class="${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}" css_class css_class|field.widget.css_class;"
class="${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()} ${css_class}"
title="${description}" title="${description}"
id="item-${oid}" id="item-${oid}"
tal:omit-tag="structural" tal:omit-tag="structural"
......
<div <div
class="relative mb-2"
tal:define="name name|field.name; tal:define="name name|field.name;
css_class css_class|field.widget.css_class; css_class css_class|field.widget.css_class;
oid oid|field.oid; oid oid|field.oid;
mask mask|field.widget.mask; mask mask|field.widget.mask;
mask_placeholder mask_placeholder|field.widget.mask_placeholder; mask_placeholder mask_placeholder|field.widget.mask_placeholder;
style style|field.widget.style; style style|field.widget.style;
title title|field.title;
" "
tal:omit-tag="" tal:omit-tag=""
> >
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
type="text" type="text"
id="${oid}" id="${oid}"
class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2" class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2"
placeholder="${name}" placeholder="${title}"
/> />
<script tal:condition="mask" type="text/javascript"> <script tal:condition="mask" type="text/javascript">
deform.addCallback("${oid}", function (oid) { deform.addCallback("${oid}", function (oid) {
......
...@@ -36,57 +36,62 @@ class ListSchema(colander.Schema): ...@@ -36,57 +36,62 @@ class ListSchema(colander.Schema):
nop = colander.SchemaNode( nop = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(mask="99.99.999.999.999.9999.9", widget=widget.TextInputWidget(mask="99.99.999.999.999.9999.9",
placeholder="Masukan NOP"), placeholder="Masukan NOP",
title="NOP") css_class="md:col-span-5 md:col-start-2 col-span-12"),
title="NOP"
)
tahun = colander.SchemaNode( tahun = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(mask="9999", widget=widget.TextInputWidget(mask="9999",
placeholder="Masukan Tahun Pajak"), placeholder="Masukan Tahun Pajak",
title="Tahun") css_class="md:col-span-2 col-span-12"),
title="Tahun"
)
nama = colander.SchemaNode( nama = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(css_class="md:col-span-5 col-span-12 md:col-start-2"),
validator=colander.Length(max=64), validator=colander.Length(max=64),
) )
alamat_1 = colander.SchemaNode( alamat_1 = colander.SchemaNode(
colander.String(), colander.String(),
title="Alamat", title="Alamat",
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(css_class="col-span-12 md:col-span-10 md:col-start-2 md:col-end-11"),
validator=colander.Length(max=64), validator=colander.Length(max=64),
visible=False visible=False
) )
alamat_2 = colander.SchemaNode( alamat_2 = colander.SchemaNode(
colander.String(), colander.String(),
title="", title="Alamat 2",
missing=colander.drop, missing=colander.drop,
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(css_class="col-span-12 md:col-span-10 md:col-start-2 md:col-end-11"),
validator=colander.Length(max=64), validator=colander.Length(max=64),
visible=False visible=False
) )
mobile = colander.SchemaNode( mobile = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(css_class="md:col-span-3 md:col-start-2 col-span-12"),
validator=colander.Length(max=64),) validator=colander.Length(max=64),)
email = colander.SchemaNode( email = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(css_class="md:col-span-4 col-span-12"),
validator=colander.Length(max=128), validator=colander.Length(max=128),
) )
kode = colander.SchemaNode( kode = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget.TextInputWidget(mask="9999.9999.9999.9999", widget=widget.TextInputWidget(mask="9999.9999.9999.9999",
placeholder="NIK"), placeholder="NIK",
css_class="md:col-span-3 col-span-12"),
title="NIK") title="NIK")
idcard = colander.SchemaNode( idcard = colander.SchemaNode(
FileData(), FileData(),
widget=widget.FileUploadWidget(mem_tmp_store), widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12"),
title="Identitas", title="Identitas",
validator=image_validator, validator=image_validator,
visible=False visible=False
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!