diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml index 89279319d2..19d14d2d14 100644 --- a/config/packages/twig.yaml +++ b/config/packages/twig.yaml @@ -1,2 +1,4 @@ twig: - form_themes: ['tailwind_2_layout.html.twig'] \ No newline at end of file + form_themes: [ + '/cards/forms/form_social_layout.html.twig' + ] \ No newline at end of file diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index 082adda833..da15f14e97 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/public/assets/default_theme/css/widgets/buttons.css @@ -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 { diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index f3726e165d..68280673ea 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -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; diff --git a/templates/cards/forms/form_social_layout.html.twig b/templates/cards/forms/form_social_layout.html.twig new file mode 100644 index 0000000000..6f4ce36fb0 --- /dev/null +++ b/templates/cards/forms/form_social_layout.html.twig @@ -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 -%} + + {%- endif -%} +{%- endblock form_errors -%} + +{%- block choice_widget_expanded -%} + {%- set attr = attr|merge({ class: attr.class|default('form-row-choice') }) -%} +
+ {%- for child in form %} +
+ {{- form_widget(child) -}} + {{- form_label(child, null, { translation_domain: choice_translation_domain }) -}} +
+ {% endfor -%} +
+{%- 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 -%} + + {{- form_errors(form) -}} +
+ {{- form_widget(form, widget_attr) -}} + {{- form_label(form) -}} +
+ {{- form_help(form) -}} + +{%- 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 -%}