Skip to content
Snippets Groups Projects
Commit 9df4fda2 authored by Tomi Valentová's avatar Tomi Valentová
Browse files

add form page

parent 27e092e9
No related branches found
No related tags found
1 merge request!29Feat/redesign
Pipeline #18960 passed
{% 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' %}
.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; @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; @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 * See: https://stackoverflow.com/a/48326796/303184
*/ */
@apply min-w-0; @apply min-w-0;
...@@ -35,40 +35,40 @@ ...@@ -35,40 +35,40 @@
} }
} }
.text-input-addon--l { .form__text-input-addon--l {
@apply border-r-0; @apply border-r-0;
} }
.text-input-addon--r { .form__text-input-addon--r {
@apply border-l-0; @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; @apply border-grey-300;
} }
.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon, .form__text-input:focus:not([disabled]):not([readonly]) ~ .form__text-input-addon,
.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon { .form__text-input:active:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-blue-300; @apply border-blue-300;
} }
.text-input[readonly] ~ .text-input-addon, .form__text-input[readonly] ~ .form__text-input-addon,
.text-input[disabled] ~ .text-input-addon { .form__text-input[disabled] ~ .form__text-input-addon {
@apply bg-grey-125 text-grey-200; @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; @apply border-l-0;
} }
.text-input--has-addon-r.text-input { .form__text-input--has-addon-r.form__text-input {
@apply border-r-0; @apply border-r-0;
} }
.select { .form__select {
@apply relative flex items-center w-full py-2 xl:py-4; @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; @apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
font-family: 'pirati-ui'; font-family: 'pirati-ui';
/* chevron down */ /* chevron down */
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
} }
.checkbox { .form__checkbox {
@apply relative flex; @apply relative flex;
input { input {
...@@ -191,9 +191,9 @@ ...@@ -191,9 +191,9 @@
.form-field--error { .form-field--error {
.text-input, .form__text-input,
.select__control, .select__control,
.text-input ~ .text-input-addon { .form__text-input ~ .form__text-input-addon {
@apply border-red-600; @apply border-red-600;
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment