Skip to content

aa.gusti / tangsel-base

Go to a project
Commit 7bf0e174 by Kunto
Options

Form Layouting menggunakan Tailwind Grid css class

1 parent 456c9d09
Inline Side-by-side
Showing 4 changed files with 72 additions and 64 deletions
tangsel/base/widgets/templates/form.pt
...@@ -22,58 +22,60 @@ ...@@ -22,58 +22,60 @@
i18n:domain="deform" i18n:domain="deform"
> >
<!--osipkdForm Widgets--> <!--osipkdForm Widgets-->
<input type="hidden" name="_charset_" /> <div class="grid grid-cols-12 gap-y-6 md:gap-6">
<input type="hidden" name="__formid__" value="${formid}" /> <input type="hidden" name="_charset_" />
<div class="alert alert-danger" tal:condition="field.error"> <input type="hidden" name="__formid__" value="${formid}" />
<div class="error-msg-lbl" i18n:translate=""> <div class="alert alert-danger" tal:condition="field.error">
There was a problem with your submission <div class="error-msg-lbl" i18n:translate="">
There was a problem with your submission
</div>
<div class="error-msg-detail" i18n:translate="">
Errors have been highlighted below
</div>
<p class="error-msg">${field.errormsg}</p>
</div> </div>
<div class="error-msg-detail" i18n:translate=""> <p class="section first" tal:condition="description">${description}</p>
Errors have been highlighted below <div
</div> tal:repeat="child field"
<p class="error-msg">${field.errormsg}</p> tal:replace="structure child.render_template(item_template)"
</div> />
<p class="section first" tal:condition="description">${description}</p>
<div
tal:repeat="child field"
tal:replace="structure child.render_template(item_template)"
/>
<div class="row"> <div class="row">
<div class="form-group deform-form-buttons"> <div class="form-group deform-form-buttons">
<tal:loop tal:repeat="button buttons"> <tal:loop tal:repeat="button buttons">
<button <button
tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';" tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
tal:attributes="disabled button.disabled if button.disabled else None; tal:attributes="disabled button.disabled if button.disabled else None;
attributes|button.attributes|{};" attributes|button.attributes|{};"
id="${formid+button.name}" id="${formid+button.name}"
name="${button.name}" name="${button.name}"
type="${button.type}" type="${button.type}"
class="btn ${button.css_class or btn_disposition}" class="btn ${button.css_class or btn_disposition}"
value="${button.value}" value="${button.value}"
tal:condition="button.type != 'link'" tal:condition="button.type != 'link'"
> >
<span <span
tal:condition="button.icon" tal:condition="button.icon"
class="glyphicon glyphicon-${button.icon}" class="glyphicon glyphicon-${button.icon}"
></span> ></span>
${button.title} ${button.title}
</button> </button>
<a <a
tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default'; tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
btn_href button.value|''" btn_href button.value|''"
class="btn ${button.css_class or btn_disposition}" class="btn ${button.css_class or btn_disposition}"
id="${field.formid + button.name}" id="${field.formid + button.name}"
href="${btn_href}" href="${btn_href}"
tal:condition="button.type == 'link'" tal:condition="button.type == 'link'"
> >
<span <span
tal:condition="button.icon" tal:condition="button.icon"
class="glyphicon glyphicon-${button.icon}" class="glyphicon glyphicon-${button.icon}"
></span> ></span>
${button.title} ${button.title}
</a> </a>
</tal:loop> </tal:loop>
</div>
</div> </div>
</div> </div>
......
tangsel/base/widgets/templates/mapping_item.pt
...@@ -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"
......
tangsel/base/widgets/templates/textinput.pt
<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) {
......
tangsel/pbb/esppt/views/unduh.py
...@@ -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!