Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Style Guide 2
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
TO
Weby
Style Guide 2
Commits
9df4fda2
Commit
9df4fda2
authored
1 year ago
by
Tomi Valentová
Browse files
Options
Downloads
Patches
Plain Diff
add form page
parent
27e092e9
No related branches found
No related tags found
1 merge request
!29
Feat/redesign
Pipeline
#18960
passed
1 year ago
Stage: build
Changes
22
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
majak_uistyleguide/templates/patterns/templates/uniweb/form.html
+80
-0
80 additions, 0 deletions
...istyleguide/templates/patterns/templates/uniweb/form.html
src/css/atoms/form-field.pcss
+18
-18
18 additions, 18 deletions
src/css/atoms/form-field.pcss
with
98 additions
and
18 deletions
majak_uistyleguide/templates/patterns/templates/uniweb/form.html
0 → 100644
+
80
−
0
View file @
9df4fda2
{% 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' %}
This diff is collapsed.
Click to expand it.
src/css/atoms/form-field.pcss
+
18
−
18
View file @
9df4fda2
.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;
}
}
}
}
This diff is collapsed.
Click to expand it.
Prev
1
2
Next
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment