forked from GNUsocial/gnu-social
[TWIG] Form layout is all new, since extending form_div_layout.html.twig was quite limiting
[COMPONENTS][Posting] It is now visible on Actor profiles [COMPONENTS][Search] Overall rework of search results template, there's also additional help text added [CSS] Header no longer translucent, font sizes yet more consistent, replies marker less pronounced, and font hierarchy is now applied in both weight and size
This commit is contained in:
475
templates/cards/forms/form_raw_layout.html.twig
Normal file
475
templates/cards/forms/form_raw_layout.html.twig
Normal file
@@ -0,0 +1,475 @@
|
||||
{# Widgets #}
|
||||
|
||||
{%- block form_widget -%}
|
||||
{% if compound %}
|
||||
{{- block('form_widget_compound') -}}
|
||||
{% else %}
|
||||
{{- block('form_widget_simple') -}}
|
||||
{% endif %}
|
||||
{%- endblock form_widget -%}
|
||||
|
||||
{%- block form_widget_simple -%}
|
||||
{%- set type = type|default('text') -%}
|
||||
{%- if type == 'range' or type == 'color' -%}
|
||||
{# Attribute "required" is not supported #}
|
||||
{%- set required = false -%}
|
||||
{%- endif -%}
|
||||
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
|
||||
{%- endblock form_widget_simple -%}
|
||||
|
||||
{%- block form_widget_compound -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{%- if form is rootform -%}
|
||||
{{ form_errors(form) }}
|
||||
{%- endif -%}
|
||||
{{- block('form_rows') -}}
|
||||
{{- form_rest(form) -}}
|
||||
</div>
|
||||
{%- endblock form_widget_compound -%}
|
||||
|
||||
{%- block collection_widget -%}
|
||||
{% if prototype is defined and not prototype.rendered %}
|
||||
{%- set attr = attr|merge({'data-prototype': form_row(prototype) }) -%}
|
||||
{% endif %}
|
||||
{{- block('form_widget') -}}
|
||||
{%- endblock collection_widget -%}
|
||||
|
||||
{%- block textarea_widget -%}
|
||||
<textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
|
||||
{%- endblock textarea_widget -%}
|
||||
|
||||
{%- block choice_widget -%}
|
||||
{% if expanded %}
|
||||
{{- block('choice_widget_expanded') -}}
|
||||
{% else %}
|
||||
{{- block('choice_widget_collapsed') -}}
|
||||
{% endif %}
|
||||
{%- endblock choice_widget -%}
|
||||
|
||||
{%- block choice_widget_expanded -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{%- for child in form %}
|
||||
{{- form_widget(child) -}}
|
||||
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
|
||||
{% endfor -%}
|
||||
</div>
|
||||
{%- endblock choice_widget_expanded -%}
|
||||
|
||||
{%- block choice_widget_collapsed -%}
|
||||
{%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
|
||||
{% set required = false %}
|
||||
{%- endif -%}
|
||||
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
|
||||
{%- if placeholder is not none -%}
|
||||
<option value=""{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
|
||||
{%- endif -%}
|
||||
{%- if preferred_choices|length > 0 -%}
|
||||
{% set options = preferred_choices %}
|
||||
{% set render_preferred_choices = true %}
|
||||
{{- block('choice_widget_options') -}}
|
||||
{%- if choices|length > 0 and separator is not none -%}
|
||||
<option disabled="disabled">{{ separator }}</option>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- set options = choices -%}
|
||||
{%- set render_preferred_choices = false -%}
|
||||
{{- block('choice_widget_options') -}}
|
||||
</select>
|
||||
{%- endblock choice_widget_collapsed -%}
|
||||
|
||||
{%- block choice_widget_options -%}
|
||||
{% for group_label, choice in options %}
|
||||
{%- if choice is iterable -%}
|
||||
<optgroup label="{{ choice_translation_domain is same as(false) ? group_label : group_label|trans({}, choice_translation_domain) }}">
|
||||
{% set options = choice %}
|
||||
{{- block('choice_widget_options') -}}
|
||||
</optgroup>
|
||||
{%- else -%}
|
||||
<option value="{{ choice.value }}"{% if choice.attr %}{% with { attr: choice.attr } %}{{ block('attributes') }}{% endwith %}{% endif %}{% if not render_preferred_choices|default(false) and choice is selectedchoice(value) %} selected="selected"{% endif %}>{{ choice_translation_domain is same as(false) ? choice.label : choice.label|trans(choice.labelTranslationParameters, choice_translation_domain) }}</option>
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
{%- endblock choice_widget_options -%}
|
||||
|
||||
{%- block checkbox_widget -%}
|
||||
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
|
||||
{%- endblock checkbox_widget -%}
|
||||
|
||||
{%- block radio_widget -%}
|
||||
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
|
||||
{%- endblock radio_widget -%}
|
||||
|
||||
{%- block datetime_widget -%}
|
||||
{% if widget == 'single_text' %}
|
||||
{{- block('form_widget_simple') -}}
|
||||
{%- else -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{{- form_errors(form.date) -}}
|
||||
{{- form_errors(form.time) -}}
|
||||
{{- form_widget(form.date) -}}
|
||||
{{- form_widget(form.time) -}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock datetime_widget -%}
|
||||
|
||||
{%- block date_widget -%}
|
||||
{%- if widget == 'single_text' -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- else -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{{- date_pattern|replace({
|
||||
'{{ year }}': form_widget(form.year),
|
||||
'{{ month }}': form_widget(form.month),
|
||||
'{{ day }}': form_widget(form.day),
|
||||
})|raw -}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock date_widget -%}
|
||||
|
||||
{%- block time_widget -%}
|
||||
{%- if widget == 'single_text' -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- else -%}
|
||||
{%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{{ form_widget(form.hour, vars) }}{% if with_minutes %}:{{ form_widget(form.minute, vars) }}{% endif %}{% if with_seconds %}:{{ form_widget(form.second, vars) }}{% endif %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock time_widget -%}
|
||||
|
||||
{%- block dateinterval_widget -%}
|
||||
{%- if widget == 'single_text' -%}
|
||||
{{- block('form_widget_simple') -}}
|
||||
{%- else -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{{- form_errors(form) -}}
|
||||
<table class="{{ table_class|default('') }}" role="presentation">
|
||||
<thead>
|
||||
<tr>
|
||||
{%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
|
||||
{%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
|
||||
{%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
|
||||
{%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
|
||||
{%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
|
||||
{%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
|
||||
{%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
|
||||
{%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
|
||||
{%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
|
||||
{%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
|
||||
{%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
|
||||
{%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
|
||||
{%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock dateinterval_widget -%}
|
||||
|
||||
{%- block number_widget -%}
|
||||
{# type="number" doesn't work with floats in localized formats #}
|
||||
{%- set type = type|default('text') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock number_widget -%}
|
||||
|
||||
{%- block integer_widget -%}
|
||||
{%- set type = type|default('number') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock integer_widget -%}
|
||||
|
||||
{%- block money_widget -%}
|
||||
{{ money_pattern|form_encode_currency(block('form_widget_simple')) }}
|
||||
{%- endblock money_widget -%}
|
||||
|
||||
{%- block url_widget -%}
|
||||
{%- set type = type|default('url') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock url_widget -%}
|
||||
|
||||
{%- block search_widget -%}
|
||||
{%- set type = type|default('search') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock search_widget -%}
|
||||
|
||||
{%- block percent_widget -%}
|
||||
{%- set type = type|default('text') -%}
|
||||
{{ block('form_widget_simple') }}{% if symbol %} {{ symbol|default('%') }}{% endif %}
|
||||
{%- endblock percent_widget -%}
|
||||
|
||||
{%- block password_widget -%}
|
||||
{%- set type = type|default('password') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock password_widget -%}
|
||||
|
||||
{%- block hidden_widget -%}
|
||||
{%- set type = type|default('hidden') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock hidden_widget -%}
|
||||
|
||||
{%- block email_widget -%}
|
||||
{%- set type = type|default('email') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock email_widget -%}
|
||||
|
||||
{%- block range_widget -%}
|
||||
{% set type = type|default('range') %}
|
||||
{{- block('form_widget_simple') -}}
|
||||
{%- endblock range_widget %}
|
||||
|
||||
{%- block button_widget -%}
|
||||
{%- if label is empty -%}
|
||||
{%- if label_format is not empty -%}
|
||||
{% set label = label_format|replace({
|
||||
'%name%': name,
|
||||
'%id%': id,
|
||||
}) %}
|
||||
{%- elseif label is not same as(false) -%}
|
||||
{% set label = name|humanize %}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
|
||||
{%- if translation_domain is same as(false) -%}
|
||||
{%- if label_html is same as(false) -%}
|
||||
{{- label -}}
|
||||
{%- else -%}
|
||||
{{- label|raw -}}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- if label_html is same as(false) -%}
|
||||
{{- label|trans(label_translation_parameters, translation_domain) -}}
|
||||
{%- else -%}
|
||||
{{- label|trans(label_translation_parameters, translation_domain)|raw -}}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</button>
|
||||
{%- endblock button_widget -%}
|
||||
|
||||
{%- block submit_widget -%}
|
||||
{%- set type = type|default('submit') -%}
|
||||
{{ block('button_widget') }}
|
||||
{%- endblock submit_widget -%}
|
||||
|
||||
{%- block reset_widget -%}
|
||||
{%- set type = type|default('reset') -%}
|
||||
{{ block('button_widget') }}
|
||||
{%- endblock reset_widget -%}
|
||||
|
||||
{%- block tel_widget -%}
|
||||
{%- set type = type|default('tel') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock tel_widget -%}
|
||||
|
||||
{%- block color_widget -%}
|
||||
{%- set type = type|default('color') -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- endblock color_widget -%}
|
||||
|
||||
{%- block week_widget -%}
|
||||
{%- if widget == 'single_text' -%}
|
||||
{{ block('form_widget_simple') }}
|
||||
{%- else -%}
|
||||
{%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
{{ form_widget(form.year, vars) }}-{{ form_widget(form.week, vars) }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock week_widget -%}
|
||||
|
||||
{# Labels #}
|
||||
|
||||
{%- block form_label -%}
|
||||
{% if label is not same as(false) -%}
|
||||
{% if not compound -%}
|
||||
{% set label_attr = label_attr|merge({'for': id}) %}
|
||||
{%- endif -%}
|
||||
{% if required -%}
|
||||
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
|
||||
{%- endif -%}
|
||||
{% if label is empty -%}
|
||||
{%- if label_format is not empty -%}
|
||||
{% set label = label_format|replace({
|
||||
'%name%': name,
|
||||
'%id%': id,
|
||||
}) %}
|
||||
{%- else -%}
|
||||
{% set label = name|humanize %}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
|
||||
{%- if translation_domain is same as(false) -%}
|
||||
{%- if label_html is same as(false) -%}
|
||||
{{- label -}}
|
||||
{%- else -%}
|
||||
{{- label|raw -}}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- if label_html is same as(false) -%}
|
||||
{{- label|trans(label_translation_parameters, translation_domain) -}}
|
||||
{%- else -%}
|
||||
{{- label|trans(label_translation_parameters, translation_domain)|raw -}}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</{{ element|default('label') }}>
|
||||
{%- endif -%}
|
||||
{%- endblock form_label -%}
|
||||
|
||||
{%- block button_label -%}{%- endblock -%}
|
||||
|
||||
{# Help #}
|
||||
|
||||
{% block form_help -%}
|
||||
{%- if help is not empty -%}
|
||||
{%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' help-text')|trim}) -%}
|
||||
<p id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
|
||||
{%- if translation_domain is same as(false) -%}
|
||||
{%- if help_html is same as(false) -%}
|
||||
{{- help -}}
|
||||
{%- else -%}
|
||||
{{- help|raw -}}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- if help_html is same as(false) -%}
|
||||
{{- help|trans(help_translation_parameters, translation_domain) -}}
|
||||
{%- else -%}
|
||||
{{- help|trans(help_translation_parameters, translation_domain)|raw -}}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{%- endif -%}
|
||||
{%- endblock form_help %}
|
||||
|
||||
{# Rows #}
|
||||
|
||||
{%- block repeated_row -%}
|
||||
{#
|
||||
No need to render the errors here, as all errors are mapped
|
||||
to the first child (see RepeatedTypeValidatorExtension).
|
||||
#}
|
||||
{{- block('form_rows') -}}
|
||||
{%- endblock repeated_row -%}
|
||||
|
||||
{%- block form_row -%}
|
||||
{%- 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_label(form) -}}
|
||||
{{- form_errors(form) -}}
|
||||
{{- form_widget(form, widget_attr) -}}
|
||||
{{- form_help(form) -}}
|
||||
</div>
|
||||
{%- endblock form_row -%}
|
||||
|
||||
{%- block button_row -%}
|
||||
{%- set widget_attr = {} -%}
|
||||
{{- form_widget(form, {'attr': widget_attr}) -}}
|
||||
{%- endblock button_row -%}
|
||||
|
||||
{%- block hidden_row -%}
|
||||
{{ form_widget(form) }}
|
||||
{%- endblock hidden_row -%}
|
||||
|
||||
{# Misc #}
|
||||
|
||||
{%- block form -%}
|
||||
{{ form_start(form) }}
|
||||
{{- form_widget(form) -}}
|
||||
{{ form_end(form) }}
|
||||
{%- endblock form -%}
|
||||
|
||||
{%- block form_start -%}
|
||||
{%- do form.setMethodRendered() -%}
|
||||
{% set method = method|upper %}
|
||||
{%- if method in ["GET", "POST"] -%}
|
||||
{% set form_method = method %}
|
||||
{%- else -%}
|
||||
{% set form_method = "POST" %}
|
||||
{%- endif -%}
|
||||
<form{% if name != '' %} name="{{ name }}"{% endif %} method="{{ form_method|lower }}"{% if action != '' %} action="{{ action }}"{% endif %}{{ block('attributes') }}{% if multipart %} enctype="multipart/form-data"{% endif %}>
|
||||
{%- if form_method != method -%}
|
||||
<input type="hidden" name="_method" value="{{ method }}" />
|
||||
{%- endif -%}
|
||||
{%- endblock form_start -%}
|
||||
|
||||
{%- block form_end -%}
|
||||
{%- if not render_rest is defined or render_rest -%}
|
||||
{{ form_rest(form) }}
|
||||
{%- endif -%}
|
||||
</form>
|
||||
{%- endblock form_end -%}
|
||||
|
||||
{%- block form_errors -%}
|
||||
{%- if errors|length > 0 -%}
|
||||
<ul>
|
||||
{%- for error in errors -%}
|
||||
<li>{{ error.message }}</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{%- endblock form_errors -%}
|
||||
|
||||
{%- block form_rest -%}
|
||||
{% for child in form -%}
|
||||
{% if not child.rendered %}
|
||||
{{- form_row(child) -}}
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
|
||||
{% if not form.methodRendered and form is rootform %}
|
||||
{%- do form.setMethodRendered() -%}
|
||||
{% set method = method|upper %}
|
||||
{%- if method in ["GET", "POST"] -%}
|
||||
{% set form_method = method %}
|
||||
{%- else -%}
|
||||
{% set form_method = "POST" %}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if form_method != method -%}
|
||||
<input type="hidden" name="_method" value="{{ method }}" />
|
||||
{%- endif -%}
|
||||
{% endif -%}
|
||||
{% endblock form_rest %}
|
||||
|
||||
{# Support #}
|
||||
|
||||
{%- block form_rows -%}
|
||||
{% for child in form|filter(child => not child.rendered) %}
|
||||
{{- form_row(child) -}}
|
||||
{% endfor %}
|
||||
{%- endblock form_rows -%}
|
||||
|
||||
{%- block widget_attributes -%}
|
||||
id="{{ id }}" name="{{ full_name }}"
|
||||
{%- if disabled %} disabled="disabled"{% endif -%}
|
||||
{%- if required %} required="required"{% endif -%}
|
||||
{{ block('attributes') }}
|
||||
{%- endblock widget_attributes -%}
|
||||
|
||||
{%- block widget_container_attributes -%}
|
||||
{%- if id is not empty %}id="{{ id }}"{% endif -%}
|
||||
{{ block('attributes') }}
|
||||
{%- endblock widget_container_attributes -%}
|
||||
|
||||
{%- block button_attributes -%}
|
||||
id="{{ id }}" name="{{ full_name }}"{% if disabled %} disabled="disabled"{% endif -%}
|
||||
{{ block('attributes') }}
|
||||
{%- endblock button_attributes -%}
|
||||
|
||||
{% block attributes -%}
|
||||
{%- for attrname, attrvalue in attr -%}
|
||||
{{- " " -}}
|
||||
{%- if attrname in ['placeholder', 'title'] -%}
|
||||
{{- attrname }}="{{ translation_domain is same as(false) or attrvalue is null ? attrvalue : attrvalue|trans(attr_translation_parameters, translation_domain) }}"
|
||||
{%- elseif attrvalue is same as(true) -%}
|
||||
{{- attrname }}="{{ attrname }}"
|
||||
{%- elseif attrvalue is not same as(false) -%}
|
||||
{{- attrname }}="{{ attrvalue }}"
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endblock attributes -%}
|
||||
@@ -1,4 +1,4 @@
|
||||
{% use 'form_div_layout.html.twig' %}
|
||||
{% use 'cards/forms/form_raw_layout.html.twig' %}
|
||||
|
||||
{%- block form_row -%}
|
||||
{%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('form-row')) }) -%}
|
||||
@@ -58,6 +58,15 @@
|
||||
</div>
|
||||
{%- endblock checkbox_row -%}
|
||||
|
||||
{%- block button_row -%}
|
||||
{%- set btn_class = 'is-link' -%}
|
||||
{%- for color in [ 'is-primary', 'is-info', 'is-success', 'is-warning', 'is-danger' ] -%}
|
||||
{%- set btn_class = color -%}
|
||||
{%- endfor -%}
|
||||
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' button ' ~ btn_class)|trim}) -%}
|
||||
{{- parent() -}}
|
||||
{%- endblock button_row -%}
|
||||
|
||||
{%- block checkbox_widget -%}
|
||||
{%- set widget_class = widget_class|default('form-row-checkbox-element') -%}
|
||||
{{- parent() -}}
|
||||
|
||||
Reference in New Issue
Block a user