Commit afeb03c9 by Kunto

masih forms

1 parent 7bf0e174
...@@ -16197,4 +16197,16 @@ html[dir=rtl] .toast-onload { ...@@ -16197,4 +16197,16 @@ html[dir=rtl] .toast-onload {
[data-layout=vertical][data-header-position=fixed] .app-header { [data-layout=vertical][data-header-position=fixed] .app-header {
width: calc(100% - 270px) width: calc(100% - 270px)
} }
}
.form-control-static {
display: block;
height: 36px;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
padding: calc(var(--spacing) * 2.5);
border-color: var(--color-gray-200);
border-radius: var(--radius-md);
background-color: var(--color-gray-200);
--tw-shadow: 0 0 #0000;
} }
\ No newline at end of file \ No newline at end of file
document.addEventListener("DOMContentLoaded", function () {
setTimeout(() => {
if (document.getElementById("dismiss-toast")) {
document.getElementById("dismiss-toast").classList.add("hs-removing");
document.getElementById("dismiss-toast").classList.remove("show-toast");
setTimeout(() => {
document.getElementById("dismiss-toast").remove();
}, 300);
} else {
}
}, 5000);
setTimeout(() => {
document.getElementById("dismiss-toast").classList.add("show-toast");
}, 1000);
});
<span tal:define="name name|field.name; <img
class="block items-center justify-center mb-1 border-1 border-gray-200 rounded-md"
src="${cstruct}"
style="height: 82px !important"
/>
<span class="block mb-4 font-light text-xs text-gray-400"
><em
>Masukkan text yang ditampilkan di atas pada input Captcha di bawah ini</em
></span
>
<block
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;
style style|field.widget.style; style style|field.widget.style;
" tal:omit-tag=""> "
<img style="height:30px; width:auto; margin-bottom:5px;" src="${cstruct}"> tal:omit-tag=""
<input type="text" name="${name}" value="" tal:attributes="class string: form-control ${css_class or ''}; >
style style; <div class="relative mb-2">
attributes|field.widget.attributes|{};" id="${oid}" /> <input
type="text"
name="${name}"
value=""
id="${oid}"
placeholder="Captcha"
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 ${css_class}"
/>
<label
for="${oid}"
class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
id="req-${oid}"
>Captcha
</label>
<script lang="javascript"> <script lang="javascript">
// Convert input to uppercase // Convert input to uppercase
deform.addCallback( deform.addCallback(
'${oid}', '${oid}',
function (oid) { function (oid) {
$("#" + oid).on('input', function (evt) { $("#" + oid).on('input', function (evt) {
$(this).val(function (_, val) { $(this).val(function (_, val) {
return val.toUpperCase(); return val.toUpperCase();
}); });
}); });
}); });
</script> </script>
</span>
\ No newline at end of file \ No newline at end of file
</div>
</block>
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
delete cstruct.get('delete')|''; delete cstruct.get('delete')|'';
maxsize field.widget.size|5242880; maxsize field.widget.size|5242880;
img ['jpg', 'jpeg', 'gif', 'png', 'svg', 'eps', 'psd']; img ['jpg', 'jpeg', 'gif', 'png', 'svg', 'eps', 'psd'];
video ['avi', 'mov', 'mp4'] video ['avi', 'mov', 'mp4'];
title title|field.title;
"> ">
${field.start_mapping()} ${field.start_mapping()}
<div class="thumbnail" tal:condition="ext in img or ext in video or ext=='pdf'"> <div class="thumbnail" tal:condition="ext in img or ext in video or ext=='pdf'">
...@@ -28,10 +29,19 @@ ...@@ -28,10 +29,19 @@
<a tal:condition="ext" class="label label-default" href="${preview_url}" target="_blank" id="a-preview-${oid}"><i <a tal:condition="ext" class="label label-default" href="${preview_url}" target="_blank" id="a-preview-${oid}"><i
class="fa fa-search"></i> View</a> class="fa fa-search"></i> View</a>
<input type="file" name="upload" id="${oid}" tal:attributes="style style; <div class="flex items-center justify-center w-full">
accept accept|field.widget.accept; <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-80 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
data-filename fname; <div class="flex flex-col items-center justify-center pt-5 pb-6">
attributes|field.widget.attributes|{};" /> <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
</svg>
<p class="font-bold mb-2">Unggah ${title}</p>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klik untuk mengunggah</span> atau seret dan jatuhkan file</p>
<p class="text-xs text-gray-500 dark:text-gray-400">${img}</p>
</div>
<input id="dropzone-file" type="file" class="hidden" />
</label>
</div>
<input tal:define="uid cstruct.get('uid')" tal:condition="uid" type="hidden" name="uid" value="${uid}" /> <input tal:define="uid cstruct.get('uid')" tal:condition="uid" type="hidden" name="uid" value="${uid}" />
${field.end_mapping()} ${field.end_mapping()}
<script type="text/javascript"> <script type="text/javascript">
......
<form <form
tal:define=" tal:define="style style|field.widget.style;
css_class css_class|string:${field.widget.css_class or field.css_class or ''};
item_template item_template|field.widget.item_template; item_template item_template|field.widget.item_template;
autocomplete autocomplete|field.autocomplete; autocomplete autocomplete|field.autocomplete;
title title|field.title; title title|field.title;
...@@ -12,6 +13,8 @@ ...@@ -12,6 +13,8 @@
action action|field.action or None; action action|field.action or None;
method method|field.method;" method method|field.method;"
tal:attributes="autocomplete autocomplete; tal:attributes="autocomplete autocomplete;
style style;
class css_class;
action action; action action;
attributes|field.widget.attributes|{};" attributes|field.widget.attributes|{};"
id="${formid}" id="${formid}"
...@@ -25,57 +28,66 @@ ...@@ -25,57 +28,66 @@
<div class="grid grid-cols-12 gap-y-6 md:gap-6"> <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
<div class="error-msg-lbl" i18n:translate=""> tal:condition="field.error"
There was a problem with your submission id="dismiss-toast"
</div> class="toast-onload bg-lighterror border border-lighterror text-sm text-erroremphasis rounded-md dark:bg-darkerror dark:border-darkerror dark:text-error hs-removing:translate-x-3 hs-removing:opacity-0 transition duration-300"
<div class="error-msg-detail" i18n:translate=""> role="alert"
Errors have been highlighted below >
<div class="flex gap-2 p-3">
<i class="ti ti-alert-circle text-red text-3xl"></i>
<div>
<span class="font-semibold"
>Terdapat kesalahan pada pengisian form!
</span>
<p class="text-xs text-red">${field.errormsg}</p>
</div>
<div class="ms-auto">
<button type="button" data-hs-remove-element="#dismiss-toast">
<i class="ti ti-x text-lg text-red opacity-70 leading-none"></i>
</button>
</div>
</div> </div>
<p class="error-msg">${field.errormsg}</p>
</div> </div>
<p class="section first" tal:condition="description">${description}</p>
<div <div
tal:repeat="child field" tal:repeat="child field"
tal:replace="structure child.render_template(item_template)" tal:replace="structure child.render_template(item_template)"
/> />
<div class="row"> <div class="col-span-12 md:col-span-4 md:col-start-2 gap-6">
<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'; btn_class button.name == 'cancel' and 'btn-light-error' or '';"
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 btn-md me-3 ${btn_class}"
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>
......
<div <block
tal:define="error_class error_class|field.widget.error_class; tal:define="error_class error_class|field.widget.error_class;
description description|field.description; description description|field.description;
title title|field.title; title title|field.title;
...@@ -14,24 +14,16 @@ ...@@ -14,24 +14,16 @@
tal:omit-tag="structural" tal:omit-tag="structural"
i18n:domain="deform" i18n:domain="deform"
> >
<!-- <div class="row"> <span tal:condition="not field.children">
<div class="col-md-12 col-lg-12 col-sm-12"> --> <span tal:replace="structure field.serialize(cstruct).strip()" />
<div tal:condition="not field.children" class="relative mb-2">
<div <div
tal:define="input_prepend field.widget.input_prepend | None; tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
input_append field.widget.input_append | None" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3"
tal:omit-tag="not (input_prepend or input_append)"
> >
<span tal:condition="input_prepend">${input_prepend}</span> <i
<span tal:replace="structure field.serialize(cstruct).strip()" /> class="ti ti-alert-circle text-lg leading-tight font-medium text-error"
<span tal:condition="input_append">${input_append}</span> ></i>
<label
for="${oid}"
class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
tal:condition="not structural"
id="req-${oid}"
>${title}
</label>
</div> </div>
<p <p
...@@ -41,6 +33,7 @@ ...@@ -41,6 +33,7 @@
tal:attributes="id repeat.msg.index==0 and errstr or tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))" ('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'" tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
class="text-sm text-error mt-2"
> >
${msg} ${msg}
</p> </p>
...@@ -48,8 +41,9 @@ ...@@ -48,8 +41,9 @@
<p tal:condition="field.description and not field.widget.hidden"> <p tal:condition="field.description and not field.widget.hidden">
${field.description} ${field.description}
</p> </p>
</div> </span>
<div tal:condition="field.children">
<span tal:condition="field.children">
<div <div
tal:define="input_prepend field.widget.input_prepend | None; tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None" input_append field.widget.input_append | None"
...@@ -74,7 +68,5 @@ ...@@ -74,7 +68,5 @@
<p tal:condition="field.description and not field.widget.hidden"> <p tal:condition="field.description and not field.widget.hidden">
${field.description} ${field.description}
</p> </p>
</div> </span>
</div> </block>
<!-- </div>
</div> -->
...@@ -9,15 +9,23 @@ ...@@ -9,15 +9,23 @@
" "
tal:omit-tag="" tal:omit-tag=""
> >
<input <div class="relative mb-2">
type="text" <input
id="${oid}" type="text"
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" id="${oid}"
placeholder="${title}" 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 bg-slate-200"
/> placeholder="${title}"
<script tal:condition="mask" type="text/javascript"> />
deform.addCallback("${oid}", function (oid) { <label
$("#" + oid).mask("${mask}", { placeholder: "${mask_placeholder}" }); for="${oid}"
}); class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
</script> id="req-${oid}"
>${title}
</label>
<script tal:condition="mask" type="text/javascript">
deform.addCallback("${oid}", function (oid) {
$("#" + oid).mask("${mask}", { placeholder: "${mask_placeholder}" });
});
</script>
</div>
</div> </div>
<div tal:define="style style|field.widget.style; <div
tal:define="style style|field.widget.style;
css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'}; css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'};
item_template item_template|field.widget.item_template; item_template item_template|field.widget.item_template;
title title|field.title; title title|field.title;
...@@ -27,10 +28,18 @@ ...@@ -27,10 +28,18 @@
filter_scripts filter_scripts|field.filter_scripts; filter_scripts filter_scripts|field.filter_scripts;
filter_form filter_form|field.filter_form; filter_form filter_form|field.filter_form;
edit_buttons edit_buttons|field.edit_buttons; edit_buttons edit_buttons|field.edit_buttons;
" tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};" i18n:domain="detable"> "
tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};"
i18n:domain="detable"
>
<header role="heading" class="txt-color-grayDark"> <header role="heading" class="txt-color-grayDark">
<h2 tal:condition="title"><i class="fa fa-fw fa-table"></i>${title}</h2> <h2 tal:condition="title"><i class="fa fa-fw fa-table"></i>${title}</h2>
<div class="alert alert-danger " role="alert" id="emptyID" style="opacity:0.7;display: none;"> <div
class="alert alert-danger"
role="alert"
id="emptyID"
style="opacity: 0.7; display: none"
>
<strong>Pilih data terlebih dahulu!!</strong> <strong>Pilih data terlebih dahulu!!</strong>
<!--? <button type="button" class="close" data-dismiss="alert" aria-label="Close">--> <!--? <button type="button" class="close" data-dismiss="alert" aria-label="Close">-->
<!--? <span aria-hidden="true">&times;</span>--> <!--? <span aria-hidden="true">&times;</span>-->
...@@ -55,9 +64,8 @@ ...@@ -55,9 +64,8 @@
</div> </div>
</div> --> </div> -->
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$(document).on("click", '.${tableid}checkAll', function () { $(document).on("click", ".${tableid}checkAll", function () {
if (this.checked) { if (this.checked) {
$(".${tableid}_check").prop("checked", true); $(".${tableid}_check").prop("checked", true);
} else { } else {
...@@ -67,21 +75,25 @@ ...@@ -67,21 +75,25 @@
}); });
</script> </script>
</div> </div>
<table id="${tableid}" class="table table-bordered table-hover table-condensed dataTable no-footer"> <table
id="${tableid}"
class="table table-bordered table-hover table-condensed dataTable no-footer"
>
<thead> <thead>
<tr> <tr></tr>
<tr> <tr>
<tal:block tal:repeat="child field"> <tal:block tal:repeat="child field">
<tal:block
<tal:block tal:condition="python:not hasattr(child, 'visible') or getattr(child, 'visible')==True"> tal:condition="python:not hasattr(child, 'visible') or getattr(child, 'visible')==True"
>
<th <th
tal:condition="python:hasattr(child, 'action') and not getattr(child.condition)==False and False or True"> tal:condition="python:hasattr(child, 'action') and not getattr(child.condition)==False and False or True"
${child.title} </th> >
${child.title}
</th>
</tal:block> </tal:block>
</tal:block> </tal:block>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
...@@ -146,9 +158,9 @@ ...@@ -146,9 +158,9 @@
let ${tableid}Columns = ${ structure: columns }; let ${tableid}Columns = ${ structure: columns };
function render_checkbox(value) { function render_checkbox(value) {
if (value === true) if (value === true)
return '<i class="fas fa-check-square" aria-hidden="true">'; return '<i class="fas fa-check-square" aria-hidden="true">';
if (value === false) if (value === false)
return '<i class="fas fa-minus-square" aria-hidden="true">'; return '<i class="fas fa-minus-square" aria-hidden="true">';
return value; return value;
} }
...@@ -169,7 +181,7 @@ ...@@ -169,7 +181,7 @@
} }
return render_checkbox(false); return render_checkbox(false);
} }
//} //}
//else if (${tableid}Columns[co].wg_select === true) { //else if (${tableid}Columns[co].wg_select === true) {
// ${tableid}Columns[co].render = function (value) { // ${tableid}Columns[co].render = function (value) {
// if (value != null) // if (value != null)
...@@ -261,7 +273,7 @@ ...@@ -261,7 +273,7 @@
}); });
} }
}); });
let tb = tb_array.join(' '); let tb = tb_array.join(' ');
$("div.toolbar").html(tb); $("div.toolbar").html(tb);
$("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;'); $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
...@@ -322,7 +334,7 @@ ...@@ -322,7 +334,7 @@
splitted.length = splitted.length - 1; splitted.length = splitted.length - 1;
col_id = splitted.join("-"); col_id = splitted.join("-");
max_val = $("#" + col_id + '-max').val() max_val = $("#" + col_id + '-max').val()
} }
else { else {
max_val = this.value; max_val = this.value;
splitted.length = splitted.length - 1; splitted.length = splitted.length - 1;
...@@ -379,7 +391,7 @@ ...@@ -379,7 +391,7 @@
if (value !== undefined && value != null) if (value !== undefined && value != null)
if ($(this).val() === value) $(this).attr("checked", true); if ($(this).val() === value) $(this).attr("checked", true);
else $(this).attr("checked", false); else $(this).attr("checked", false);
} }
else { else {
value = localStorage.getItem(col_id); value = localStorage.getItem(col_id);
if (value !== undefined && value !== null) if (value !== undefined && value !== null)
...@@ -393,4 +405,4 @@ ...@@ -393,4 +405,4 @@
${structure:filter_scripts} ${structure:filter_scripts}
}); });
</script> </script>
</div>
\ No newline at end of file \ No newline at end of file
</div>
<html metal:use-macro="load: ./base.pt"> <html metal:use-macro="load: ./base.pt">
<div metal:fill-slot="content"> <div metal:fill-slot="content">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-body">
<h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> <div tal:content="structure form"></div>
</div>
</div> </div>
<div class="panel-body">
<div tal:content="structure form"></div>
</div>
</div> </div>
</div>
<script metal:fill-slot="scripts">
$(document).ready(function () {
${ structure: scripts }
});
</script>
</html>
\ No newline at end of file \ No newline at end of file
<!-- <script
type="text/javascript"
src="${home}/static/admin/js/datatables/dataTables.tailwindcss.js"
></script>
<script>
new DataTable("#example", {
scrollX: true,
});
</script> -->
<script metal:fill-slot="scripts">
$(document).ready(function () {
${ structure: scripts }
});
</script>
</html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden"> <div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden">
<div class="card-body pb-12 pt-8"> <div class="card-body pb-12 pt-8">
<div class="grid grid-cols-12"> <div class="grid grid-cols-12">
<div class="lg:col-span-7 md:col-span-6 sm:col-span-12 col-span-12"> <div class="lg:col-span-8 md:col-span-6 sm:col-span-12 col-span-12">
<div class="flex gap-3 items-center mb-7"> <div class="flex gap-3 items-center mb-7">
<div class="rounded-full overflow-hidden"> <div class="rounded-full overflow-hidden">
<img <img
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="gap-6 items-center grid grid-cols-12"> <div class="gap-6 items-center grid grid-cols-12">
<div <div
class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-7" class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-8"
> >
<h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3> <h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3>
<ul class="list-group mt-4"> <ul class="list-group mt-4">
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</ul> </ul>
</div> </div>
<div class="col-span-12 md:col-span-6 lg:col-span-5"> <div class="col-span-12 md:col-span-6 lg:col-span-4">
<div class="lg:col-span-4 md:col-span-6 col-span-12"> <div class="lg:col-span-4 md:col-span-6 col-span-12">
<a href="${home}/pbb/esppt/unduh/add"> <a href="${home}/pbb/esppt/unduh/add">
<div class="card animate-card overflow-hidden"> <div class="card animate-card overflow-hidden">
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lg:col-span-5 md:col-span-6 sm:col-span-12 col-span-12"> <div class="lg:col-span-4 md:col-span-6 sm:col-span-12 col-span-12">
<div <div
class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8" class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8"
> >
......
...@@ -91,7 +91,7 @@ class ListSchema(colander.Schema): ...@@ -91,7 +91,7 @@ class ListSchema(colander.Schema):
idcard = colander.SchemaNode( idcard = colander.SchemaNode(
FileData(), FileData(),
widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12"), widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12 md:col-start-2 md:col-span-5", no_label="true"),
title="Identitas", title="Identitas",
validator=image_validator, validator=image_validator,
visible=False visible=False
...@@ -108,7 +108,7 @@ class AddSchema(ListSchema): ...@@ -108,7 +108,7 @@ class AddSchema(ListSchema):
request = kw.get("request") request = kw.get("request")
schema['captcha'] = colander.SchemaNode( schema['captcha'] = colander.SchemaNode(
colander.String(), colander.String(),
widget=widget_os.CaptchaWidget( widget=widget_os.CaptchaWidget(css_class="col-span-12 md:col-span-5 ",
request=request, request=request,
url=request.static_url(BASE_CLASS.captcha_files)), url=request.static_url(BASE_CLASS.captcha_files)),
oid="captcha", title="Captcha") oid="captcha", title="Captcha")
......
<div tal:define="error_class error_class|field.widget.error_class; <div
tal:define="error_class error_class|field.widget.error_class;
description description|field.description; description description|field.description;
field_title field_title|field.title; field_title field_title|field.title;
oid oid|field.oid; oid oid|field.oid;
...@@ -8,78 +9,106 @@ ...@@ -8,78 +9,106 @@
required required|field.required; required required|field.required;
field_readonly field_readonly|field.widget.readonly; field_readonly field_readonly|field.widget.readonly;
form_readonly readonly|readonly" form_readonly readonly|readonly"
class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}" title="${description}"
title="${description}" id="item-${oid}"
id="item-${oid}" tal:omit-tag="structural"
tal:omit-tag="structural" i18n:domain="deform"
i18n:domain="deform"> >
<div class="row"> <div class="row">
<div class="col-md-12 col-lg-12 col-sm-12"> <div class="col-md-12 col-lg-12 col-sm-12">
<label for="${oid}" <label
class="control-label col-sm-3 col-md-2 col-lg-2 ${required and 'required' or ''}" for="${oid}"
tal:condition="not structural" class="control-label col-sm-3 col-md-2 col-lg-2 ${required and 'required' or ''}"
id="req-${oid}" tal:condition="not structural"
>${field_title} id="req-${oid}"
>${field_title}
</label> </label>
<div class="col-sm-9 col-md-10 col-lg-10" tal:condition="not field.children"> <div
<div tal:define="input_prepend field.widget.input_prepend | None; class="col-sm-9 col-md-10 col-lg-10"
tal:condition="not field.children"
>
<div
tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None" input_append field.widget.input_append | None"
tal:omit-tag="not (input_prepend or input_append)" tal:omit-tag="not (input_prepend or input_append)"
class="input-group"> class="input-group"
<span class="input-group-addon" >
tal:condition="input_prepend">${input_prepend}</span> <span class="input-group-addon" tal:condition="input_prepend"
<span tal:condition="python:readonly or field_readonly" >${input_prepend}</span
tal:replace="structure field.serialize(readonly=True).strip()"/> >
<span tal:condition="python: not readonly and not field_readonly" <span
tal:replace="structure field.serialize().strip()"/> tal:condition="python:readonly or field_readonly"
<span class="input-group-addon" tal:replace="structure field.serialize(readonly=True).strip()"
tal:condition="input_append">${input_append}</span> />
<span
tal:condition="python: not readonly and not field_readonly"
tal:replace="structure field.serialize().strip()"
/>
<span class="input-group-addon" tal:condition="input_append"
>${input_append}</span
>
</div> </div>
<p class="help-block" <p
tal:define="errstr 'error-%s' % field.oid" class="help-block"
tal:repeat="msg field.error.messages()" tal:define="errstr 'error-%s' % field.oid"
i18n:translate="" tal:repeat="msg field.error.messages()"
tal:attributes="id repeat.msg.index==0 and errstr or i18n:translate=""
tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))" ('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"> tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
${msg} >
${msg}
</p> </p>
<p tal:condition="field.description and not field.widget.hidden" <p
class="help-block"> tal:condition="field.description and not field.widget.hidden"
${field.description} class="help-block"
>
${field.description}
</p> </p>
</div> </div>
<div class="col-sm-12 col-md-12 col-lg-12" tal:condition="field.children"> <div class="col-sm-12 col-md-12 col-lg-12" tal:condition="field.children">
<div tal:define="input_prepend field.widget.input_prepend | None; <div
tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None" input_append field.widget.input_append | None"
tal:omit-tag="not (input_prepend or input_append)" tal:omit-tag="not (input_prepend or input_append)"
class="input-group"> class="input-group"
<span class="input-group-addon" >
tal:condition="input_prepend">${input_prepend}</span> <span class="input-group-addon" tal:condition="input_prepend"
<span tal:condition="python:readonly or field_readonly" >${input_prepend}</span
tal:replace="structure field.serialize(readonly=True).strip()"/> >
<span tal:condition="python: not readonly and not field_readonly" <span
tal:replace="structure field.serialize().strip()"/> tal:condition="python:readonly or field_readonly"
<span class="input-group-addon" tal:replace="structure field.serialize(readonly=True).strip()"
tal:condition="input_append">${input_append}</span> />
<span
tal:condition="python: not readonly and not field_readonly"
tal:replace="structure field.serialize().strip()"
/>
<span class="input-group-addon" tal:condition="input_append"
>${input_append}</span
>
</div> </div>
<p class="help-block" <p
tal:define="errstr 'error-%s' % field.oid" class="help-block"
tal:repeat="msg field.error.messages()" tal:define="errstr 'error-%s' % field.oid"
i18n:translate="" tal:repeat="msg field.error.messages()"
tal:attributes="id repeat.msg.index==0 and errstr or i18n:translate=""
tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))" ('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"> tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
${msg} >
${msg}
</p> </p>
<p tal:condition="field.description and not field.widget.hidden" <p
class="help-block"> tal:condition="field.description and not field.widget.hidden"
${field.description} class="help-block"
>
${field.description}
</p> </p>
</div> </div>
</div> </div>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!