Review html for the forms

- Remove icon error from html (Added with css)
- Add maxlenght
- Remove class has-success
- Translate placeholder
- Confirm dialog to delete an address
This commit is contained in:
touffies
2013-11-05 15:49:55 +01:00
parent 0431010a65
commit aa030f20ea
12 changed files with 222 additions and 273 deletions

View File

@@ -32,7 +32,7 @@
<div class="panel-body">
{form_field form=$form field="title"}
<div class="form-group group-title {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-title{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<select name="{$name}" id="{$label_attr.for}" class="form-control"{if $required} aria-required="true" required{/if}{if !$value || $error} autofocus{/if}>
@@ -42,83 +42,71 @@
{/loop}
</select>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif !$value}
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="firstname"}
<div class="form-group group-firstname {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-firstname{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="John" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder firstname"}" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="lastname"}
<div class="form-group group-lastname {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-lastname{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="Doe" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder lastname"}" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="email"}
<div class="form-group group-email {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-email{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="johndoe@domain.com" value="{$smarty.get.email|default:$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder email"}" value="{$smarty.get.email|default:$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="phone"}
<div class="form-group group-phone {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-phone{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="20" placeholder="{intl l="Placeholder phone"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="cellphone"}
<div class="form-group group-cellphone {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-cellphone{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="20" placeholder="{intl l="Placeholder cellphone"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
@@ -133,82 +121,72 @@
<div class="panel-body">
{form_field form=$form field="company"}
<div class="form-group group-company {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-company{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="Google" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder company"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="address1"}
<div class="form-group group-address1 {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-address1{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="76 Ninth Avenue" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder address1"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="address2"}
<div class="form-group group-address2 {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-address2{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder address2"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="city"}
<div class="form-group group-city {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-city{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="New York" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder city"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="zipcode"}
<div class="form-group group-zip {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-zip{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="NY 10011" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="10" placeholder="{intl l="Placeholder zipcode"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="country"}
<div class="form-group group-country {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-country{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<select name="{$name}" id="{$label_attr.for}" class="form-control"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
@@ -225,10 +203,8 @@
{/loop}
</select>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
@@ -242,30 +218,26 @@
<div class="panel-body">
{form_field form=$form field="password"}
<div class="form-group group-password {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-password{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
{/form_field}
{form_field form=$form field="password_confirm"}
<div class="form-group group-password_confirm {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
<div class="form-group group-password_confirm{if $error} has-error{/if}">
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
<div class="control-input">
<input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{assign var="error_focus" value="true"}
{elseif $value != "" && !$error}
<span class="help-block"><i class="icon-ok"></i></span>
{/if}
</div>
</div><!--/.form-group-->
@@ -281,7 +253,7 @@
<input type="checkbox" name="{$name}" id="{$label_attr.for}" value="{$value}"{if $checked} checked{/if} {if $required} aria-required="true" required{/if}>I've read and agreed on <a href="#">Terms &amp; Conditions</a></a>.
</label>
{if $error }
<span class="help-block"><i class="icon-remove"></i> {$message}</span>
<span class="help-block">{$message}</span>
{/if}
</div>
</div>