Skip to content

Commit

Permalink
Merge pull request ezsystems#36 from sunpietro/demo-92-apply-design-t…
Browse files Browse the repository at this point in the history 
…o-forms

DEMO-92: Render the Form UI as per the designs for 1/2/3 column
  • Loading branch information
lserwatka committed May 18, 2017
2 parents 6d46251 + b81cc42 commit 8c31e69
Show file tree
Hide file tree
Showing 10 changed files with 148 additions and 36 deletions.
27 changes: 18 additions & 9 deletions app/Resources/EzSystemsFormBuilderBundle/views/fields/captcha/basic.html.twig
View file
@@ -1,18 +1,27 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formcaptcha" %}
{% trans_default_domain "formfield" %}

{% set imageId = 'captcha__' ~ field.id|replace({'-': '_'}) %}
{% set captchaImage = ez_form_captcha_path(field) %}

{% block input %}
<div class="row">
<div class="col-sm-4 col-xs-12">
<img class="ezform-captcha-image" id="{{ imageId }}" src="{{ captchaImage }}" alt="" />
<p><a class="ezform-captcha-reload btn btn-default btn-sm" href="#">{{ 'formcaptcha.reload_image'|trans }}</a></p>
</div>
<div class="col-sm-8 col-xs-12">
<input type="text" class="ezform-field ezform-captcha form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
</div>
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<span class="ezform-field-indicator"></span>
<span class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="text"
class="ezform-field ezform-captcha form-control"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
>
</span>
</div>
<div class="ezform-captcha-image-wrapper">
<img class="ezform-captcha-image" id="{{ imageId }}" src="{{ captchaImage }}" alt="" />
</div>
<div class="ezform-captcha-reload-wrapper">
<a class="ezform-captcha-reload btn btn-default btn-sm" href="#">{{ 'formcaptcha.reload_image'|trans }}</a>
</div>
{% endblock %}

29 changes: 21 additions & 8 deletions app/Resources/EzSystemsFormBuilderBundle/views/fields/checkbox/basic.html.twig
View file
@@ -1,13 +1,26 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
{% for option in field.options.choices.value %}
{% set checkboxId = field.id ~ '-' ~ loop.index %}
<div class="checkbox">
<label for="{{ checkboxId }}">
<input type="checkbox" value="{{ option.value }}" {% if option.checked %}checked{% endif %} id="{{ checkboxId }}" name="{{ field.id }}[]" class="ezform-field ezform-checkbox">
{{ option.value }}
</label>
<div class="ezform-field-group {% if field.isRequired %}ezform-field-group--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
{% for option in field.options.choices.value %}
{% set checkboxId = field.id ~ '-' ~ loop.index %}
<div class="checkbox">
<label class="ezform-checkbox-label" for="{{ checkboxId }}">
<input
id="{{ checkboxId }}"
name="{{ field.id }}[]"
type="checkbox"
class="ezform-field ezform-checkbox"
value="{{ option.value }}"
{% if option.checked %}checked{% endif %}
>
{{ option.value }}
</label>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}
14 changes: 13 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/date/basic.html.twig
View file
@@ -1,10 +1,22 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% set placeholder = '' %}
{% for validator in field.validators if validator.type == 'format' %}
{% set placeholder = validator.value.alias %}
{% endfor %}

{% block input %}
<input type="text" class="ezform-field ezform-date form-control" id="{{ field.id }}" placeholder="{{ placeholder }}">
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="text"
class="ezform-field ezform-date form-control"
placeholder="{{ placeholder }}"
{% if field.isRequired %}required{% endif %}
>
</div>
</div>
{% endblock %}
16 changes: 11 additions & 5 deletions app/Resources/EzSystemsFormBuilderBundle/views/fields/dropdown/basic.html.twig
View file
@@ -1,9 +1,15 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<select id="{{ field.id }}" class="ezform-field ezform-dropdown form-control">
{% for option in field.options.choices.value %}
<option value="{{ option.value }}" {% if option.checked %}selected{% endif %}>{{ option.value }}</option>
{% endfor %}
</select>
<div class="ezform-field-group {% if field.isRequired %}ezform-field-dropdown--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<select id="{{ field.id }}" class="ezform-field ezform-dropdown form-control">
{% for option in field.options.choices.value %}
<option value="{{ option.value }}" {% if option.checked %}selected{% endif %}>{{ option.value }}</option>
{% endfor %}
</select>
</div>
</div>
{% endblock %}
14 changes: 13 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/email/basic.html.twig
View file
@@ -1,5 +1,17 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<input type="email" class="ezform-field ezform-email form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="email"
class="ezform-field ezform-email form-control"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
>
</div>
</div>
{% endblock %}
13 changes: 12 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/file/basic.html.twig
View file
@@ -1,5 +1,16 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<input type="file" class="ezform-field ezform-file" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="file"
class="ezform-field ezform-file"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
>
</div>
</div>
{% endblock %}
13 changes: 12 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/paragraph_text/basic.html.twig
View file
@@ -1,5 +1,16 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<textarea type="text" class="ezform-field ezform-paragraph_text form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}"></textarea>
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<textarea
id="{{ field.id }}"
class="ezform-field ezform-paragraph_text form-control"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
></textarea>
</div>
</div>
{% endblock %}
29 changes: 21 additions & 8 deletions app/Resources/EzSystemsFormBuilderBundle/views/fields/radio/basic.html.twig
View file
@@ -1,13 +1,26 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
{% for option in field.options.choices.value %}
{% set radioId = field.id ~ '-' ~ loop.index %}
<div class="radio">
<label for="{{ radioId }}">
<input type="radio" value="{{ option.value }}" {% if option.checked %}checked{% endif %} id="{{ radioId }}" name="{{ field.id }}" class="ezform-field ezform-radio">
{{ option.value }}
</label>
<div class="ezform-field-group {% if field.isRequired %}ezform-field-group--required{% endif %}" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
{% for option in field.options.choices.value %}
{% set radioId = field.id ~ '-' ~ loop.index %}
<div class="radio">
<label class="ezform-radio-label" for="{{ radioId }}">
<input
id="{{ radioId }}"
name="{{ field.id }}"
type="radio"
class="ezform-field ezform-radio"
value="{{ option.value }}"
{% if option.checked %}checked{% endif %}
>
{{ option.value }}
</label>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}
14 changes: 13 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/single_line_text/basic.html.twig
View file
@@ -1,5 +1,17 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<input type="text" class="ezform-field ezform-single_line_text form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}">
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="text"
class="ezform-field ezform-single_line_text form-control"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
>
</div>
</div>
{% endblock %}
15 changes: 14 additions & 1 deletion app/Resources/EzSystemsFormBuilderBundle/views/fields/url/basic.html.twig
View file
@@ -1,5 +1,18 @@
{% extends 'EzSystemsFormBuilderBundle:fields:field.html.twig' %}
{% trans_default_domain "formfield" %}

{% block input %}
<input type="url" class="ezform-field ezform-url form-control" id="{{ field.id }}" placeholder="{{ field.placeholderText }}" value="http://">
<div class="ezform-field-group" data-error-message="{{ 'field.is.required'|trans }}">
<div class="ezform-field-indicator"></div>
<div class="ezform-field-wrapper">
<input
id="{{ field.id }}"
type="url"
class="ezform-field ezform-url form-control"
value="http://"
placeholder="{{ field.placeholderText }}"
{% if field.isRequired %}required{% endif %}
>
</div>
</div>
{% endblock %}

0 comments on commit 8c31e69

Please sign in to comment.