Form Layouting menggunakan Tailwind Grid css class

tangsel/base/widgets/templates/form.pt

@@ -22,6 +22,7 @@
   i18n:domain="deform"
 >
   <!--osipkdForm Widgets-->
+  <div class="grid grid-cols-12 gap-y-6 md:gap-6">
     <input type="hidden" name="_charset_" />
     <input type="hidden" name="__formid__" value="${formid}" />
     <div class="alert alert-danger" tal:condition="field.error">
@@ -76,6 +77,7 @@
         </tal:loop>
       </div>
     </div>
+  </div>
 
   <script type="text/javascript" tal:condition="use_ajax">
     deform.addCallback(

tangsel/base/widgets/templates/mapping_item.pt

@@ -6,8 +6,9 @@
                  hidden hidden|field.widget.hidden;
                  category category|field.widget.category;
                  structural hidden or category == 'structural';
-                 required required|field.required;"
-  class="${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
+                 required required|field.required;
+                 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}"
   id="item-${oid}"
   tal:omit-tag="structural"

tangsel/base/widgets/templates/textinput.pt

 <div
-  class="relative mb-2"
   tal:define="name name|field.name;
                   css_class css_class|field.widget.css_class;
                   oid oid|field.oid;
                   mask mask|field.widget.mask;
                   mask_placeholder mask_placeholder|field.widget.mask_placeholder;
                   style style|field.widget.style;
+                  title title|field.title;
         "
   tal:omit-tag=""
 >
@@ -13,7 +13,7 @@
     type="text"
     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"
-    placeholder="${name}"
+    placeholder="${title}"
   />
   <script tal:condition="mask" type="text/javascript">
     deform.addCallback("${oid}", function (oid) {

tangsel/pbb/esppt/views/unduh.py

@@ -36,57 +36,62 @@ class ListSchema(colander.Schema):
     nop = colander.SchemaNode(
         colander.String(),
         widget=widget.TextInputWidget(mask="99.99.999.999.999.9999.9",
-                                      placeholder="Masukan NOP"),
-        title="NOP")
+                                      placeholder="Masukan NOP",
+                                      css_class="md:col-span-5 md:col-start-2 col-span-12"),
+        title="NOP"
+    )
 
     tahun = colander.SchemaNode(
         colander.String(),
         widget=widget.TextInputWidget(mask="9999",
-                                      placeholder="Masukan Tahun Pajak"),
-        title="Tahun")
+                                      placeholder="Masukan Tahun Pajak",
+                                      css_class="md:col-span-2 col-span-12"),
+        title="Tahun"
+    )
 
     nama = colander.SchemaNode(
         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),
     )
 
     alamat_1 = colander.SchemaNode(
         colander.String(),
         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),
         visible=False
     )
 
     alamat_2 = colander.SchemaNode(
         colander.String(),
-        title="",
+        title="Alamat 2",
         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),
         visible=False
     )
 
     mobile = colander.SchemaNode(
         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),)
 
     email = colander.SchemaNode(
         colander.String(),
-        widget=widget.TextInputWidget(),
+        widget=widget.TextInputWidget(css_class="md:col-span-4 col-span-12"),
         validator=colander.Length(max=128),
     )
     kode = colander.SchemaNode(
         colander.String(),
         widget=widget.TextInputWidget(mask="9999.9999.9999.9999",
-                                      placeholder="NIK"),
+                                      placeholder="NIK",
+                                      css_class="md:col-span-3 col-span-12"),
         title="NIK")
 
     idcard = colander.SchemaNode(
         FileData(),
-        widget=widget.FileUploadWidget(mem_tmp_store),
+        widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12"),
         title="Identitas",
         validator=image_validator,
         visible=False