refactor: add some basic styling for the form fields and errors

staging
Dinesh Salunke 2023-11-06 14:37:11 +05:30
parent 8a849a7941
commit 440be0218e
2 changed files with 8 additions and 20 deletions

View File

@ -23,11 +23,11 @@
* International Registered Trademark & Property of PrestaShop SA
*}
{if $errors|count}
<div class="help-block">
<div class="help-block mb-4">
{block name='form_errors'}
<ul>
{foreach $errors as $error}
<li class="alert alert-danger">{$error|nl2br nofilter}</li>
<li class="alert alert-danger px-4 py-2 border border-red-100 bg-red-50 text-red-900">{$error|nl2br nofilter}</li>
{/foreach}
</ul>
{/block}

View File

@ -30,8 +30,8 @@
{else}
<div class="form-group row {if !empty($field.errors)}has-error{/if}">
<label class="col-md-3 form-control-label{if $field.required} required{/if}">
<div class="form-group row {if !empty($field.errors)}has-error{/if} flex flex-col">
<label class="font-medium form-control-label{if $field.required} required{/if} mb-1">
{if $field.type !== 'checkbox'}
{$field.label}
{/if}
@ -88,9 +88,8 @@
{block name='form_field_item_checkbox'}
<span class="custom-checkbox">
<label>
<label class="font-light text-sm">
<input name="{$field.name}" type="checkbox" value="1" {if $field.value}checked="checked"{/if} {if $field.required}required{/if}>
<span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
{$field.label nofilter}
</label>
</span>
@ -132,9 +131,9 @@
{elseif $field.type === 'password'}
{block name='form_field_item_password'}
<div class="input-group js-parent-focus">
<div class="input-group js-parent-focus relative">
<input
class="form-control js-child-focus js-visible-password"
class="form-control js-child-focus js-visible-password px-2 py-1 border border-gray-300 w-full"
name="{$field.name}"
title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
type="password"
@ -142,17 +141,6 @@
pattern=".{literal}{{/literal}5,{literal}}{/literal}"
{if $field.required}required{/if}
>
<span class="input-group-btn">
<button
class="btn"
type="button"
data-action="show-password"
data-text-show="{l s='Show' d='Shop.Theme.Actions'}"
data-text-hide="{l s='Hide' d='Shop.Theme.Actions'}"
>
{l s='Show' d='Shop.Theme.Actions'}
</button>
</span>
</div>
{/block}
@ -160,7 +148,7 @@
{block name='form_field_item_other'}
<input
class="form-control"
class="form-control px-2 py-1 border border-gray-300 w-full"
name="{$field.name}"
type="{$field.type}"
value="{$field.value}"