feat: implement screendesign

This commit is contained in:
Björn Fromme
2026-03-16 11:59:12 +01:00
parent 39e6cc4d68
commit 4a2d1f4a02
84 changed files with 2807 additions and 2603 deletions
+13 -13
View File
@@ -25,7 +25,7 @@
{% endmacro %}
{%- block form_row -%}
{%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
{%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-4')|trim }) -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
@@ -52,9 +52,9 @@
{%- block form_label -%}
{% set class = 'font-semibold' %}
{% if errors|length %}
{% set class = class ~ ' text-red-700' %}
{% set class = class ~ ' text-red-500' %}
{% endif %}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ class)|trim}) %}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ' ~ class)|trim}) %}
{{ parent() }}
{%- endblock form_label -%}
@@ -62,7 +62,7 @@
{%- if errors|length > 0 -%}
<ul class="pb-2">
{%- for error in errors -%}
<li class="text-red-700">{{ error.message }}</li>
<li class="text-red-500">{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
@@ -155,7 +155,7 @@
<div class="flex h-6 items-center">
{{ form_widget(form) }}
</div>
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-500': errors|length }) }}">
{{ form.vars.label | raw }}
{{- form_errors(form) -}}
</div>
@@ -178,7 +178,7 @@
<div class="flex h-6 items-center">
{{ form_widget(form) }}
</div>
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-500': errors|length }) }}">
{{ form.vars.label | raw }}
{{- form_errors(form) -}}
</div>
@@ -236,7 +236,7 @@
role="button"
class="relative rounded-md border border-gray-300 flex items-start space-x-2 px-3">
<div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
{{ icon('dots', 'w-4 h-4 mt-2') }}
<svg class="w-4 h-4 mt-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="12"/><circle cx="128" cy="60" r="12"/><circle cx="128" cy="196" r="12"/></svg>
</div>
<div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
{% for item in form.children %}
@@ -325,13 +325,13 @@
'data-step-input-target': 'field',
'class': 'hidden',
} }) }}
<div class="flex space-x-2">
<button type="button" class="button button--small bg-button" {{ stimulus_target('step-input', 'buttonDec') }} {{ stimulus_action('step-input', 'decrease') }}>
-
<div class="flex items-center justify-between">
<button type="button" class="button button--small bg-white" {{ stimulus_target('step-input', 'buttonDec') }} {{ stimulus_action('step-input', 'decrease') }}>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
<div {{ stimulus_target('step-input', 'display') }}></div>
<button type="button" class="button button--small bg-button--secondary" {{ stimulus_target('step-input', 'buttonInc') }} {{ stimulus_action('step-input', 'increase') }}>
+
<div class="px-2" {{ stimulus_target('step-input', 'display') }}></div>
<button type="button" class="button button--small button--primary" {{ stimulus_target('step-input', 'buttonInc') }} {{ stimulus_action('step-input', 'increase') }}>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
</div>
</div>