Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

B5 Responsive Forms #35519

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
+138 −145
Draft

B5 Responsive Forms #35519

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6751c83
Document responsive form layout on Bootstrap 5
millerdev Dec 10, 2024
3552c8f
B5 crispy horizontal forms
millerdev Dec 10, 2024
1cabe25
Remove redundant B5 form class assignemnts
millerdev Dec 10, 2024
1ac2e1f
Adjust column widths for crispy horizontal forms
millerdev Dec 10, 2024
ba97060
Form style extensions to simplify field classes
millerdev Dec 12, 2024
af45509
Simplify field classes in styleguide examples
millerdev Dec 12, 2024
7627001
BootstrapCheckboxInput now optional on Bootstrap 5
millerdev Dec 11, 2024
ec7bad9
B3 form style extensions
millerdev Dec 12, 2024
b089038
Remove unneeded B5 branching in crispy helper code
millerdev Dec 12, 2024
2f9365c
"Bootstrap 5 Migration - Rebuilt diffs"
millerdev Dec 12, 2024
8549a39
Remove unused offsets
millerdev Dec 13, 2024
3ad244e
Preserve horizontal forms in B5 change guides
millerdev Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions corehq/apps/hqwebapp/crispy.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
from crispy_forms.utils import flatatt, get_template_pack, render_field

CSS_LABEL_CLASS = 'col-xs-12 col-sm-4 col-md-4 col-lg-2'
CSS_LABEL_CLASS_BOOTSTRAP5 = 'col-xs-12 col-sm-4 col-md-3 col-lg-2'
CSS_LABEL_CLASS_BOOTSTRAP5 = 'field-label'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a major improvement.

CSS_FIELD_CLASS = 'col-xs-12 col-sm-8 col-md-8 col-lg-6'
CSS_FIELD_CLASS_BOOTSTRAP5 = 'col-xs-12 col-sm-8 col-md-9 col-lg-10'
CSS_FIELD_CLASS_BOOTSTRAP5 = 'field-control'
CSS_ACTION_CLASS = CSS_FIELD_CLASS + ' col-sm-offset-4 col-md-offset-4 col-lg-offset-2'


Expand Down Expand Up @@ -76,7 +76,7 @@ class ErrorsOnlyField(Field):

def get_form_action_class():
"""This is only valid for bootstrap 5"""
return CSS_LABEL_CLASS_BOOTSTRAP5.replace('col', 'offset') + ' ' + CSS_FIELD_CLASS_BOOTSTRAP5
return CSS_FIELD_CLASS_BOOTSTRAP5


def _get_offsets(context):
Expand Down
13 changes: 13 additions & 0 deletions corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
.field-label {
@extend .col-form-label, .col-12, .col-sm-4, .col-md-3, .col-lg-2;
}

.field-label + .field-control {
@extend .col-12, .col-sm-8, .col-md-9, .col-lg-10;
}

:not(.field-label) + .field-control,
.row > .field-control:first-child {
@extend .offset-sm-4, .offset-md-3, .offset-lg-2;
}

.row > div > .form-check:first-child,
.row > div > .input-group > .form-check:first-child {
padding-top: add($input-padding-y, $input-border-width);
Expand Down