Form Layouting menggunakan Tailwind Grid css class

tangsel/base/widgets/templates/form.pt

@@ -22,58 +22,60 @@
   i18n:domain="deform"
 >
   <!--osipkdForm Widgets-->
-  <input type="hidden" name="_charset_" />
-  <input type="hidden" name="__formid__" value="${formid}" />
-  <div class="alert alert-danger" tal:condition="field.error">
-    <div class="error-msg-lbl" i18n:translate="">
-      There was a problem with your submission
+  <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">
+      <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 class="error-msg-detail" i18n:translate="">
-      Errors have been highlighted below
-    </div>
-    <p class="error-msg">${field.errormsg}</p>
-  </div>
-  <p class="section first" tal:condition="description">${description}</p>
-  <div
-    tal:repeat="child field"
-    tal:replace="structure child.render_template(item_template)"
-  />
+    <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="form-group deform-form-buttons">
-      <tal:loop tal:repeat="button buttons">
-        <button
-          tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
-          tal:attributes="disabled button.disabled if button.disabled else None;
+    <div class="row">
+      <div class="form-group deform-form-buttons">
+        <tal:loop tal:repeat="button buttons">
+          <button
+            tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
+            tal:attributes="disabled button.disabled if button.disabled else None;
                                     attributes|button.attributes|{};"
-          id="${formid+button.name}"
-          name="${button.name}"
-          type="${button.type}"
-          class="btn ${button.css_class or btn_disposition}"
-          value="${button.value}"
-          tal:condition="button.type != 'link'"
-        >
-          <span
-            tal:condition="button.icon"
-            class="glyphicon glyphicon-${button.icon}"
-          ></span>
-          ${button.title}
-        </button>
-        <a
-          tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
+            id="${formid+button.name}"
+            name="${button.name}"
+            type="${button.type}"
+            class="btn ${button.css_class or btn_disposition}"
+            value="${button.value}"
+            tal:condition="button.type != 'link'"
+          >
+            <span
+              tal:condition="button.icon"
+              class="glyphicon glyphicon-${button.icon}"
+            ></span>
+            ${button.title}
+          </button>
+          <a
+            tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
                                     btn_href button.value|''"
-          class="btn ${button.css_class or btn_disposition}"
-          id="${field.formid + button.name}"
-          href="${btn_href}"
-          tal:condition="button.type == 'link'"
-        >
-          <span
-            tal:condition="button.icon"
-            class="glyphicon glyphicon-${button.icon}"
-          ></span>
-          ${button.title}
-        </a>
-      </tal:loop>
+            class="btn ${button.css_class or btn_disposition}"
+            id="${field.formid + button.name}"
+            href="${btn_href}"
+            tal:condition="button.type == 'link'"
+          >
+            <span
+              tal:condition="button.icon"
+              class="glyphicon glyphicon-${button.icon}"
+            ></span>
+            ${button.title}
+          </a>
+        </tal:loop>
+      </div>
     </div>
   </div>
 

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