Browse Source

[CONFIG][Twig] Replaced form theme to a custom one

[CARDS][Forms] Added custom social form theme

[CSS] Replaced/added new classes to be used with forms

Base form theme created, can be extended to create complex blocks to be
called by twig when rendering a specific form.
oauth1
Eliseu Amaro 6 months ago
parent
commit
ce3b677833
Signed by: eli <mail@eliseuama.ro> GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 80 additions and 15 deletions
  1. +3
    -1
      config/packages/twig.yaml
  2. +0
    -6
      public/assets/default_theme/css/widgets/buttons.css
  3. +8
    -8
      public/assets/default_theme/css/widgets/sections.css
  4. +69
    -0
      templates/cards/forms/form_social_layout.html.twig

+ 3
- 1
config/packages/twig.yaml View File

@@ -1,2 +1,4 @@
twig:
form_themes: ['tailwind_2_layout.html.twig']
form_themes: [
'/cards/forms/form_social_layout.html.twig'
]

+ 0
- 6
public/assets/default_theme/css/widgets/buttons.css View File

@@ -112,12 +112,6 @@ textarea {
width: inherit;
max-width: border-box !important;
}
button:not(:last-child),
input:not(:last-child),
select:not(:last-child),
textarea:not(:last-child) {
margin-bottom: var(--s);
}
button,
select,
textarea {


+ 8
- 8
public/assets/default_theme/css/widgets/sections.css View File

@@ -132,19 +132,19 @@
margin-bottom: var(--s);
font-weight: bold;
}
div[class^="mb-"] {
display: flex;
flex-direction: column;
flex-basis: border-box;
.form-row {
margin-bottom: var(--s);
}
div[class^="mb-"]:last-of-type {
margin-bottom: unset;
.form-row-widget {
display: block;
width: 100%;
}
div[class^="mb-"] textarea {
textarea.form-row-widget {
height: 7rem;
max-height: 100%;
resize: vertical;
}
.form-row-widget-error,
.form-error,
.alert,
.alert-danger {
display: inline-block;


+ 69
- 0
templates/cards/forms/form_social_layout.html.twig View File

@@ -0,0 +1,69 @@
{% use 'form_div_layout.html.twig' %}

{%- block form_row -%}
{%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('form-row')) }) -%}
{{- parent() -}}
{%- endblock form_row -%}

{%- block widget_attributes -%}
{%- set attr = attr|merge({ class: attr.class|default(widget_class|default('form-row-widget')) ~ (disabled ? ' ' ~ widget_disabled_class|default('form-row-widget-disabled')) ~ (errors|length ? ' ' ~ widget_errors_class|default('form-row-widget-error')) }) -%}
{{- parent() -}}
{%- endblock widget_attributes -%}

{%- block form_label -%}
{%- set label_attr = label_attr|merge({ class: label_attr.class|default(label_class|default('form-row-label')) }) -%}
{{- parent() -}}
{%- endblock form_label -%}

{%- block form_help -%}
{%- set help_attr = help_attr|merge({ class: help_attr.class|default(help_class|default('form-row-help')) }) -%}
{{- parent() -}}
{%- endblock form_help -%}

{%- block form_errors -%}
{%- if errors|length > 0 -%}
<ul>
{%- for error in errors -%}
<li class="{{ error_item_class|default('form-error') }}">{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endblock form_errors -%}

{%- block choice_widget_expanded -%}
{%- set attr = attr|merge({ class: attr.class|default('form-row-choice') }) -%}
<div {{ block('widget_container_attributes') }}>
{%- for child in form %}
<div class="choice-children">
{{- form_widget(child) -}}
{{- form_label(child, null, { translation_domain: choice_translation_domain }) -}}
</div>
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}

{%- block checkbox_row -%}
{%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('form-row-checkbox')) }) -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
<div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
{{- form_errors(form) -}}
<div class="inline-flex items-center">
{{- form_widget(form, widget_attr) -}}
{{- form_label(form) -}}
</div>
{{- form_help(form) -}}
</div>
{%- endblock checkbox_row -%}

{%- block checkbox_widget -%}
{%- set widget_class = widget_class|default('form-row-checkbox-element') -%}
{{- parent() -}}
{%- endblock checkbox_widget -%}

{%- block radio_widget -%}
{%- set widget_class = widget_class|default('form-row-radio-element') -%}
{{- parent() -}}
{%- endblock radio_widget -%}

Loading…
Cancel
Save