From 9df4fda247a7023725ea54c8ecb1156cc152fc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomi=20Valentov=C3=A1?= <git@imaniti.org>
Date: Sun, 7 Jul 2024 12:35:39 +0200
Subject: [PATCH] add form page
---
.../atoms/form_fields/form_checkbox.html | 6 +-
.../atoms/form_fields/form_checkbox.yaml | 1 +
.../patterns/atoms/form_fields/form_date.html | 3 +
.../patterns/atoms/form_fields/form_date.yaml | 6 ++
.../atoms/form_fields/form_datetime.html | 3 +
.../atoms/form_fields/form_datetime.yaml | 6 ++
.../atoms/form_fields/form_email.html | 3 +
.../atoms/form_fields/form_email.yaml | 5 ++
.../atoms/form_fields/form_input.html | 9 +--
.../atoms/form_fields/form_input.yaml | 8 +-
.../form_input_backgroundless.html | 2 +-
.../atoms/form_fields/form_multiselect.html | 7 ++
.../atoms/form_fields/form_phone.html | 3 +
.../atoms/form_fields/form_phone.yaml | 6 ++
.../atoms/form_fields/form_radio.html | 22 +++++
.../atoms/form_fields/form_radio.yaml | 15 ++++
.../atoms/form_fields/form_select.html | 19 ++++-
.../atoms/form_fields/form_select.yaml | 4 +-
.../atoms/form_fields/form_textarea.html | 17 ++++
.../atoms/form_fields/form_textarea.yaml | 4 +
.../patterns/templates/uniweb/form.html | 80 +++++++++++++++++++
src/css/atoms/form-field.pcss | 36 ++++-----
22 files changed, 229 insertions(+), 36 deletions(-)
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
create mode 100644 majak_uistyleguide/templates/patterns/templates/uniweb/form.html
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
index 3f75b1e..9f83952 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
@@ -1,4 +1,4 @@
-<div class="checkbox form-field__control flex items-center {{ classes }}">
- <input type="checkbox" id="checkbox_1">
- <label for="checkbox_1">{{ label }}</label>
+<div class="form__checkbox flex items-center {{ classes }}">
+ <input type="form__checkbox" id="{{ id }}">
+ <label for="{{ id }}">{{ label }}</label>
</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
index 99b1250..05dae7d 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
@@ -1,3 +1,4 @@
context:
classes: ''
label: 'Souhlasím se zpracováním osobních údajů'
+ id: 'checkbox_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
new file mode 100644
index 0000000..e3be861
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}date{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
new file mode 100644
index 0000000..5a447b5
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum narození'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'date_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
new file mode 100644
index 0000000..4b7c6aa
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}datetime-local{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
new file mode 100644
index 0000000..3fcd97a
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum a čas poslední injekce'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'datetime_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
new file mode 100644
index 0000000..8992113
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}email{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
new file mode 100644
index 0000000..3d6194a
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
@@ -0,0 +1,5 @@
+context:
+ label: 'Registrační email'
+ placeholder: 'info@pirati.cz'
+ hint: ''
+ id: 'email_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
index 1e3c9e7..b572075 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-2 max-w-min">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<div>
<label for="{{ id }}" class="leading-5">
@@ -11,12 +11,11 @@
</div>
{% endif %}
- <div class="flex gap-2">
+ <div class="flex w-full gap-2">
<input
- type="text"
+ type="{% block type %}text{% endblock %}"
class="
- form-field__control
- py-3 px-3
+ py-3 px-3 w-full lg:w-96
{% block color_classes %}
bg-grey-100 border border-grey-200
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
index f476c0d..ec3dc50 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
@@ -1,7 +1,7 @@
context:
- placeholder: 'Registrační email'
- hint: ''
+ placeholder: 'Pirát Pepa'
+ hint: 'Hlavně žádné osobní údaje.'
name: 'example'
- is_required: false
+ is_required: true
extra_classes: ''
- label: ''
+ label: 'Jméno'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
index 3d4e368..6074e64 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
@@ -1,5 +1,5 @@
{% extends 'patterns/atoms/form_fields/form_input.html' %}
{% block color_classes %}
- text-input bg-white border-none
+ form__text-input bg-white border-none
{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
new file mode 100644
index 0000000..c72df4c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
@@ -0,0 +1,7 @@
+{% extends "patterns/atoms/form_fields/form_select.html" %}
+
+{% block select_attrs %}multiple{% endblock %}
+
+{% block wrapper_classes %}
+ form__select form__multiselect w-full lg:w-96
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
new file mode 100644
index 0000000..8f7cc77
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}tel{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
new file mode 100644
index 0000000..9a94ba5
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Telefon'
+ placeholder: '+420 666 666 666'
+ hint: ''
+ is_required: false
+ id: 'phone_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
new file mode 100644
index 0000000..78e40e6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-2 items-start">
+ {% if label %}
+ <div>
+ <label for="{{ id }}" class="leading-5">
+ {{ label }}
+ </label>
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </div>
+ {% endif %}
+
+ <div class="flex flex-col gap-1">
+ {% for option in options %}
+ <div class="flex gap-3">
+ <input type="radio" id="{{ option.id }}" name="{{ id }}" value="{{ option.text }}">
+ <label for="{{ option.id }}">{{ option.text }}</label>
+ </div>
+ {% endfor %}
+ </div>
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
new file mode 100644
index 0000000..cde7e4c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
@@ -0,0 +1,15 @@
+context:
+ label: 'Radio boxík'
+ options:
+ -
+ id: 'option-1'
+ text: 'Option 1'
+ -
+ id: 'option-2'
+ text: 'Option 2'
+ -
+ id: 'option-3'
+ text: 'Option 3'
+ classes: ''
+ id: 'radio_1'
+ is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
index 7b92446..3660c44 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<label for="{{ id }}">
{{ label }}
@@ -9,12 +9,25 @@
</label>
{% endif %}
- <div class="select max-w-72">
+ <div
+ class="
+ {% block wrapper_classes %}
+ form__select w-full lg:w-96
+ {% endblock %}
+ "
+ >
<select
- class="select__control form-field__control {{ classes }}"
+ class="
+ select__control
+
+ {% block classes %}
+ {{ classes }}
+ {% endblock %}
+ "
value=""
id="{{ id }}"
name="{{ id }}"
+ {% block select_attrs %}{% endblock %}
>
{% for option in options %}
<option>{{ option }}</option>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
index d86229d..96afa06 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
@@ -1,5 +1,5 @@
context:
- label: ''
+ label: 'Vybírací boxík'
options:
- 'Option 1'
- 'Option 2'
@@ -8,5 +8,5 @@ context:
- 'Option 5'
- 'Option 6'
classes: ''
- id: 'example2'
+ id: 'select_1'
is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
new file mode 100644
index 0000000..c2b13a2
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
@@ -0,0 +1,17 @@
+<div class="flex flex-col items-start gap-2 {{ classes }}">
+ <label for="{{ id }}">
+ {{ label }}
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </label>
+ <textarea
+ class="
+ form__text-input resize-none
+
+ w-full lg:w-96
+ "
+ id="{{ id }}"
+ ></textarea>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
new file mode 100644
index 0000000..a41f209
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
@@ -0,0 +1,4 @@
+context:
+ classes: ''
+ label: 'Smluvní podmínky'
+ id: 'textarea_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/form.html b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
new file mode 100644
index 0000000..812af91
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
@@ -0,0 +1,80 @@
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/header/simple_header.html' with title="Stránka s formulářem" %}
+
+<main role="main" class="mb-10 xl:mb-32">
+ <div class="container--wide flex flex-col gap-8 mb-2 lg:mb-12">
+ {% include "patterns/atoms/form_fields/form_input.html" %}
+ {% include "patterns/atoms/form_fields/form_date.html" %}
+ {% include "patterns/atoms/form_fields/form_datetime.html" %}
+ {% include "patterns/atoms/form_fields/form_email.html" %}
+ {% include "patterns/atoms/form_fields/form_phone.html" %}
+ {% include "patterns/atoms/form_fields/form_select.html" %}
+ {% include "patterns/atoms/form_fields/form_radio.html" %}
+ {% include "patterns/atoms/form_fields/form_multiselect.html" %}
+ {% include "patterns/atoms/form_fields/form_textarea.html" %}
+ {% include "patterns/atoms/form_fields/form_checkbox.html" %}
+
+ {% comment %}
+ {% if field.widget_type == "select" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed">
+ <div class="select">
+ {{ field|add_class:"select__control " }}
+ </div>
+ </div>
+ {% elif field.widget_type == "radioselect" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper py-1 flex flex-col">
+ {% for radio in field %}
+ <div class="my-1">
+ <div class="radio ">
+ {{ radio }}
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% elif field.widget_type == "checkboxselectmultiple" %}
+ <label class="form-field__label mt-2" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper py-1 flex flex-col">
+ {% for checkbox in field %}
+ <div class="my-1">
+ <div class="checkbox ">
+ {{ checkbox.tag }}
+ <label for="{{ checkbox.id_for_label }}">{{ checkbox.choice_label }}</label>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% elif field.widget_type == "checkbox" %}
+ <div class="form-field__wrapper mt-2">
+ <div class="checkbox ">
+ {{ field }}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ </div>
+ </div>
+ {% elif field.widget_type == "captchatext" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed sm:w-1/2">
+ {{ field|add_class:"form__text-input " }}
+ </div>
+ {% else %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed">
+ {{ field|add_class:"form__text-input " }}
+ </div>
+ {% endif %}
+
+ {% if field.help_text %}
+ <div class="form-field__help-text">{{ field.help_text }}</div>
+ {% endif %}
+
+ {% if field.errors %}
+ <div class="form-field__error">{{ field.errors }}</div>
+ {% endif %}
+ {% endcomment %}
+
+ </div>
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/src/css/atoms/form-field.pcss b/src/css/atoms/form-field.pcss
index 7ab30e4..f4f091e 100644
--- a/src/css/atoms/form-field.pcss
+++ b/src/css/atoms/form-field.pcss
@@ -1,11 +1,11 @@
-.text-input-addon {
+.form__text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
}
-.text-input {
+.form__text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;
- /* Fix FF text-input not adjusting it's width.
+ /* Fix FF form__text-input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
@@ -35,40 +35,40 @@
}
}
-.text-input-addon--l {
+.form__text-input-addon--l {
@apply border-r-0;
}
-.text-input-addon--r {
+.form__text-input-addon--r {
@apply border-l-0;
}
-.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:hover:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-grey-300;
}
-.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
-.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:focus:not([disabled]):not([readonly]) ~ .form__text-input-addon,
+.form__text-input:active:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-blue-300;
}
-.text-input[readonly] ~ .text-input-addon,
-.text-input[disabled] ~ .text-input-addon {
+.form__text-input[readonly] ~ .form__text-input-addon,
+.form__text-input[disabled] ~ .form__text-input-addon {
@apply bg-grey-125 text-grey-200;
}
-.text-input--has-addon-l.text-input {
+.form__text-input--has-addon-l.form__text-input {
@apply border-l-0;
}
-.text-input--has-addon-r.text-input {
+.form__text-input--has-addon-r.form__text-input {
@apply border-r-0;
}
-.select {
- @apply relative flex items-center w-full py-2 xl:py-4;
+.form__select {
+ @apply relative flex items-center w-full;
- &:after {
+ &:not(.form__multiselect):after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
font-family: 'pirati-ui';
/* chevron down */
@@ -110,7 +110,7 @@
}
-.checkbox {
+.form__checkbox {
@apply relative flex;
input {
@@ -191,9 +191,9 @@
.form-field--error {
- .text-input,
+ .form__text-input,
.select__control,
- .text-input ~ .text-input-addon {
+ .form__text-input ~ .form__text-input-addon {
@apply border-red-600;
}
}
--
GitLab