diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css index 41e7f7d..8672703 100644 --- a/expenses_manager/expenses/static/expenses/css/base.css +++ b/expenses_manager/expenses/static/expenses/css/base.css @@ -694,10 +694,59 @@ tr:hover { /* Forms */ /* ========================= */ +.app-form { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 480px; +} + .form-field { + display: flex; + flex-direction: column; + gap: 0.35rem; margin-bottom: 1rem; } +.form-field label { + font-weight: 600; + font-size: 0.9rem; +} + +.form-field input:not([type="checkbox"]):not([type="radio"]), +.form-field select, +.form-field textarea { + width: 100%; + padding: 0.5rem 0.75rem; + border: 1px solid var(--color-border); + border-radius: 6px; + background-color: var(--color-surface); + color: var(--color-text); + font: inherit; +} + +.form-field input:focus, +.form-field select:focus, +.form-field textarea:focus { + outline: 2px solid var(--color-focus-ring); + outline-offset: 1px; + border-color: var(--color-primary); +} + +.form-field-checkbox { + flex-direction: row; + align-items: center; +} + +.form-field-checkbox input[type="checkbox"] { + accent-color: var(--color-primary); +} + +.form-help { + font-size: 0.8rem; + color: var(--color-text-muted); +} + .form-errors { color: var(--color-danger-accent); font-size: 0.85rem; diff --git a/expenses_manager/expenses/templates/expenses/_form_fields.html b/expenses_manager/expenses/templates/expenses/_form_fields.html new file mode 100644 index 0000000..d4a3cd3 --- /dev/null +++ b/expenses_manager/expenses/templates/expenses/_form_fields.html @@ -0,0 +1,30 @@ +{% for field in form %} +
+ {% if field.name == "tags" %} + {{ field.label_tag }} +
+ {% for checkbox in field %} + + {% endfor %} +
+ {% else %} + {{ field.label_tag }} + {{ field }} + {% endif %} + + {% if field.help_text %} + {{ field.help_text }} + {% endif %} + + {% if field.errors %} +
{{ field.errors }}
+ {% endif %} +
+{% endfor %} + +{% if form.non_field_errors %} +
{{ form.non_field_errors }}
+{% endif %}