From 9828c8efc299e74e8faf362bc9addda854fcf57c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20G=C4=85sior?= Date: Thu, 29 Apr 2021 23:45:53 +0200 Subject: [PATCH] Change form layout from horizontal to vertical Issue #116 Fixes #103 --- assets/css/common.css | 59 ++++++------------- assets/css/radio-table-settings.css | 16 +++-- assets/css/user-login-register.css | 14 ----- assets/js/src/RadioTableColumnsUI.js | 3 +- templates/common/form/custom_types.html.twig | 20 +++++-- .../common/form/overwritten_types.html.twig | 57 +++++++++++++----- 6 files changed, 83 insertions(+), 86 deletions(-) diff --git a/assets/css/common.css b/assets/css/common.css index e1937b81..f353ba55 100644 --- a/assets/css/common.css +++ b/assets/css/common.css @@ -556,59 +556,34 @@ input[type="checkbox"]:focus:not(:hover) + label, input[type="radio"]:focus:not( } -/* form widgets — special */ - -input.color { - max-width: 200px; -} - - /* form items lists */ .form-item { - width: 100%; -} - -.form-item.form-regular { - display: flex; - margin: 0.7em 0; -} -.form-item.form-regular > *:first-child { - width: 40%; + margin: 20px 0; } -.form-item.form-regular > *:last-child { - flex: 1; +.form-item label { + display: block; + margin-bottom: 7px; } -.form-item.form-checkbox { - margin: 0.9em 0; - +.form-item-checkbox { /* needed for inputs and fake checkboxes with position absolute */ position: relative; } - -.form-item label { - display: block; -} -.form-item.form-regular label { - margin-top: 5px; +.form-item-checkbox label { + margin-bottom: 0; } -@media (max-width: 800px) -{ - .form-item.form-regular { - flex-direction: column; - } - .form-item.form-regular > *:first-child { - width: auto; - } - .form-item.form-regular label { - margin-bottom: 0.5em; - } - - .form-item.form-checkbox { - margin: 1.3em 0; - } +.form-error-message { + color: #ff0000; + margin: 7px 0 0; + font-weight: bold; +} +.form-help-message { + font-size: 0.9em; + font-style: italic; + margin: 7px 0 0; + opacity: 0.8; } diff --git a/assets/css/radio-table-settings.css b/assets/css/radio-table-settings.css index e1edf6fa..af77a84c 100644 --- a/assets/css/radio-table-settings.css +++ b/assets/css/radio-table-settings.css @@ -5,7 +5,6 @@ /* columns UI */ .JS .radio-table-columns { - width: 80%; margin: 1.2em auto; } .JS .radio-table-columns .form-item { @@ -14,13 +13,15 @@ border: 1px solid #C2C2C2; padding: 0.5em 1em; box-sizing: border-box; + display: flex; align-items: center; } .JS .radio-table-columns .form-item label { - margin-top: 0; + margin: 0; } .JS .radio-table-columns .form-item > :last-child { text-align: right; + flex: 1; } .JS .radio-table-columns .form-item.hidden-column { background: #FBFBFB; @@ -45,23 +46,20 @@ @media (max-width: 800px) { - .JS .radio-table-columns { - width: auto; - } - .JS .radio-table-columns .form-item.form-regular { + .JS .radio-table-columns .form-item { flex-direction: row; } - .JS .radio-table-columns .form-item.form-regular label { + .JS .radio-table-columns .form-item label { margin-bottom: 0; } } @media (max-width: 700px) { - .JS .radio-table-columns .form-item.form-regular { + .JS .radio-table-columns .form-item { flex-direction: column; } - .JS .radio-table-columns .form-item.form-regular label { + .JS .radio-table-columns .form-item label { margin-bottom: 0.7em; } .JS .radio-table-columns .form-item > :last-child { diff --git a/assets/css/user-login-register.css b/assets/css/user-login-register.css index 4287ce21..4768c97f 100644 --- a/assets/css/user-login-register.css +++ b/assets/css/user-login-register.css @@ -2,17 +2,3 @@ max-width: 400px; margin: 2.5em auto; } - -/* keep these styles in sync with mobile form item list */ -.user-login-screen .form-item.form-regular { - flex-direction: column; -} -.user-login-screen .form-item.form-regular > *:first-child { - width: auto; -} -.user-login-screen .form-item.form-regular label { - margin-bottom: 0.5em; -} -.user-login-screen .form-item.form-checkbox { - margin: 1.3em 0; -} diff --git a/assets/js/src/RadioTableColumnsUI.js b/assets/js/src/RadioTableColumnsUI.js index bb17f235..fba9f4d1 100644 --- a/assets/js/src/RadioTableColumnsUI.js +++ b/assets/js/src/RadioTableColumnsUI.js @@ -45,7 +45,8 @@ export class RadioTableColumnsUI item.buttonToggle.disabled = true; } - let buttonsContainer = item.block.lastElementChild; + let buttonsContainer = document.createElement('div'); + item.block.appendChild(buttonsContainer) buttonsContainer.appendChild(item.buttonToggle); buttonsContainer.appendChild(item.buttonMoveUp); buttonsContainer.appendChild(item.buttonMoveDown); diff --git a/templates/common/form/custom_types.html.twig b/templates/common/form/custom_types.html.twig index 48554f9e..21ec72a1 100644 --- a/templates/common/form/custom_types.html.twig +++ b/templates/common/form/custom_types.html.twig @@ -1,7 +1,13 @@ {% block integer_unit_widget %} + {% set unit_label_id = id ~ '_unit' %} + {% set attr = attr|merge({'aria-describedby': (attr['aria-describedby'] ?? '') ~ ' ' ~ unit_label_id}) %} + {{ block('integer_widget') }} - {{ unit_label }} -{% endblock integer_unit_widget %} + + + {{ unit_label }} + +{% endblock %} {% block decimal_unit_widget %} {% set attr = attr|merge({ @@ -9,22 +15,24 @@ 'step': step, 'min': step, }) %} + {{ block('integer_unit_widget') }} -{% endblock decimal_unit_widget %} +{% endblock %} {% block radio_table_columns_row %} {# Do not render label for radio table columns widget. #} {{ block('form_rows') }} -{% endblock radio_table_columns_row %} +{% endblock %} {% block text_hints_widget %} {% set hints_list_id = id ~ '_hints' %} + {% set attr = attr|merge({'list': hints_list_id}) %} + {% for hint in hints %} {% endfor %} - {% set attr = attr|merge({'list': hints_list_id}) %} {{ block('form_widget') }} -{% endblock text_hints_widget %} +{% endblock %} diff --git a/templates/common/form/overwritten_types.html.twig b/templates/common/form/overwritten_types.html.twig index 9825e41d..1144b6a5 100644 --- a/templates/common/form/overwritten_types.html.twig +++ b/templates/common/form/overwritten_types.html.twig @@ -1,30 +1,59 @@ {% block form_row %} -
-
{{ form_label(form) }}
-
{{ form_widget(form) }}
+ {%- set aria_describedby = (attr['aria-describedby'] ?? '') ~ (errors|length > 0 ? ' ' ~ id ~ '_error') ~ (help ? ' ' ~ id ~ '_help') -%} + +
+ {{ form_label(form) }} + {{ form_widget(form, {attr: {'aria-describedby': aria_describedby|trim}}) }} + {{ form_errors(form) }} + {{ form_help(form) }}
-{% endblock form_row %} +{% endblock %} {% block checkbox_row %} -
- {{ form_widget(form) }} - {{ form_label(form) }} + {%- set aria_describedby = (attr['aria-describedby'] ?? '') ~ (errors|length > 0 ? ' ' ~ id ~ '_error') ~ (help ? ' ' ~ id ~ '_help') -%} + +
+
+ {{ form_widget(form, {attr: {'aria-describedby': aria_describedby|trim}}) }} + {{ form_label(form) }} +
+ + {{ form_errors(form) }} + {{ form_help(form) }}
-{% endblock checkbox_row %} +{% endblock %} -{% block radio_row %} - {{ block('checkbox_row') }} -{% endblock radio_row %} +{% block form_errors %} + {%- if errors|length > 0 -%} +

+ {{ (errors|first).message }} +

+ {%- endif -%} +{% endblock %} + +{% block form_help %} + {%- if help -%} +

+ {{ help_html ? field_help(form)|raw : field_help(form) }} +

+ {%- endif -%} +{% endblock %} {% block choice_row %} {% if expanded %} -
+ {%- set aria_describedby = (attr['aria-describedby'] ?? '') ~ (errors|length > 0 ? ' ' ~ id ~ '_error') ~ (help ? ' ' ~ id ~ '_help') -%} + +
{{ form_label(form)|striptags }} + {% for child in form %} - {{ form_row(child) }} + {{ form_row(child, {attr: {'aria-describedby': aria_describedby|trim}}) }} {% endfor %} + + {{ form_errors(form) }} + {{ form_help(form) }}
{% else %} {{ form_row(form) }} {% endif %} -{% endblock choice_row %} +{% endblock %}