From d6b628f9195fff59fd4909a7239ff8aab8703a80 Mon Sep 17 00:00:00 2001 From: Addison Dunn Date: Mon, 12 Feb 2024 15:31:53 -0500 Subject: [PATCH] Revert "Various alignment fixes for forms" --- .../templates/form_entry/templates.html | 25 +++---- .../less/formplayer-webapp/form.less | 70 +++++-------------- .../hqwebapp/less/_hq/bootstrap5-temp.less | 9 --- .../static/hqwebapp/less/style-imports.less | 1 - .../style-imports.commcarehq.style.diff.txt | 3 +- 5 files changed, 31 insertions(+), 77 deletions(-) delete mode 100644 corehq/apps/hqwebapp/static/hqwebapp/less/_hq/bootstrap5-temp.less diff --git a/corehq/apps/cloudcare/templates/form_entry/templates.html b/corehq/apps/cloudcare/templates/form_entry/templates.html index d4bf217860d1..6144a5c10757 100644 --- a/corehq/apps/cloudcare/templates/form_entry/templates.html +++ b/corehq/apps/cloudcare/templates/form_entry/templates.html @@ -47,20 +47,18 @@ "> -
-
-
- -
- - - +
+
+
+ + +
@@ -76,7 +74,6 @@ }, css: { 'panel-body': collapsible, - 'group-body': !collapsible, 'stripe-repeats': stripeRepeats, }">
diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less index ef93a3bf0995..5e0fbbb8f450 100644 --- a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less +++ b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less @@ -1,4 +1,4 @@ -@form-text-indent: 23px; +@form-text-indent: 20px; @form-text-size: 16px; .form-container { @@ -11,8 +11,7 @@ padding-bottom: 30px; h1 { - // -8 to account for .panel-header padding - padding-left: @form-text-indent - 8px; + padding-left: @form-text-indent - 5px; } } @@ -27,10 +26,6 @@ .form-actions { margin: 30px 0 0 0; - &.form-group { - margin-left: -@form-text-indent; - margin-right: -@form-text-indent; - } background-color: lighten(@cc-brand-hi, 10); .border-bottom-radius(0); @@ -52,30 +47,14 @@ z-index: @zindex-formplayer-anchored-submit; } - // Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent. - .row { - margin-left: 0px; - margin-right: 0px; - } - - .question-container { - padding-left: @form-text-indent; - padding-right: @form-text-indent; - } - .form-group { - margin-left: 0; - margin-right: 0; + padding-left: 25px; + padding-right: 20px; .caption.control-label { display: block; } } - .group-body { - // to match panel - margin-bottom: 17px; - } - .gr.panel { border-radius: 0px; } @@ -84,29 +63,14 @@ border-radius: 0px; } - // line up fields with group headers. All columns use padding for spacing in between them. - // It is not needed/wanted at the sides - .col-sm-12, - .col-sm-11, - .col-sm-10, - .col-sm-9, - .col-sm-8, - .col-sm-7, - .col-sm-6, - .col-sm-5, - .col-sm-4, - .col-sm-3, - .col-sm-2, - .col-sm-1 { - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - .panel-body { + padding-left: 5px; + padding-right: 5px; + // Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent. + .row { + margin-left: 0px; + margin-right: 0px; + } @media (max-width: @screen-xs-max) { padding-left: 0px; padding-right: 0px; @@ -131,10 +95,8 @@ border: solid 1px @cc-neutral-mid; border-radius: 8px; margin: 2px; - } - - .question-tile-row .group-border:not(.panel) { - padding: 15px !important; + padding-top: 5px; + padding-bottom: 5px; } .info { @@ -146,6 +108,10 @@ float: left; margin-right: 10px; } + + legend { + padding-left: @form-text-indent + 3px; + } } .panel-heading { @@ -292,6 +258,8 @@ .question-tile-row { display: flex; align-items: start; + margin-left: 10px; + margin-right: 10px; * .form-group, * p, * .control-label { padding-top: 0px !important; padding-bottom: 0px !important; diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/bootstrap5-temp.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/bootstrap5-temp.less deleted file mode 100644 index 61b2b1b2bb81..000000000000 --- a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/bootstrap5-temp.less +++ /dev/null @@ -1,9 +0,0 @@ -// This file is for creating porting Bootstrap classes that exist in version 5 but not 3 - -.d-flex { - display: flex -} - -.align-items-center { - align-items: center -} diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/style-imports.less b/corehq/apps/hqwebapp/static/hqwebapp/less/style-imports.less index b10509124855..f691a5d42bfb 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/less/style-imports.less +++ b/corehq/apps/hqwebapp/static/hqwebapp/less/style-imports.less @@ -41,4 +41,3 @@ @import "_hq/typography.less"; @import "_hq/svg.less"; @import "_hq/utils.less"; -@import "_hq/bootstrap5-temp.less"; diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/style-imports.commcarehq.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/style-imports.commcarehq.style.diff.txt index f2f74bf555b2..a6e9e037cb48 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/style-imports.commcarehq.style.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/style-imports.commcarehq.style.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,44 +1,94 @@ +@@ -1,43 +1,94 @@ -@import "_hq/includes/variables.less"; -@import "_hq/includes/mixins.less"; @@ -44,7 +44,6 @@ -@import "_hq/typography.less"; -@import "_hq/svg.less"; -@import "_hq/utils.less"; --@import "_hq/bootstrap5-temp.less"; +// Configuration +@import "functions"; +@import "commcarehq/variables"; // This comes before Bootstrap 5 variables to override the defaults