Merge pull request #34121 from dimagi/ad/hotfix-support-18785

Revert "Various alignment fixes for forms" (hotfix)
dimagi · Feb 13, 2024 · b53ef36 · b53ef36
2 parents a5c4d3f + d6b628f
commit b53ef36
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 77 deletions.
diff --git a/corehq/apps/cloudcare/templates/form_entry/templates.html b/corehq/apps/cloudcare/templates/form_entry/templates.html
@@ -47,20 +47,18 @@
                   "><i class="fa fa-remove"></i></button>
         </legend>
       </div>
-      <div data-bind="if: collapsible" >
-        <div class="d-flex align-items-center">
-          <div class="collapsible-icon-container">
-            <i  class="fa" data-bind="
-                css: {'fa-angle-double-right': !showChildren(), 'fa-angle-double-down': showChildren()},
-            "></i>
-          </div>
-          <span class="webapp-markdown-output caption" data-bind="html: caption_markdown() || caption(), attr: {id: captionId()}"></span>
-          <i class="fa fa-warning text-danger pull-right" data-bind="visible: hasError() && !showChildren()"></i>
-          <button class="btn btn-danger del pull-right" href="#" data-bind="
-                      visible: isRepetition,
-                      click: deleteRepeat
-                  "><i class="fa fa-remove"></i></button>
+      <div data-bind="if: collapsible">
+        <div class="collapsible-icon-container">
+          <i style="" class="fa" data-bind="
+              css: {'fa-angle-double-right': !showChildren(), 'fa-angle-double-down': showChildren()},
+          "></i>
         </div>
+        <span class="webapp-markdown-output caption" data-bind="html: caption_markdown() || caption(), attr: {id: captionId()}"></span>
+        <i class="fa fa-warning text-danger pull-right" data-bind="visible: hasError() && !showChildren()"></i>
+        <button class="btn btn-danger del pull-right" href="#" data-bind="
+                    visible: isRepetition,
+                    click: deleteRepeat
+                "><i class="fa fa-remove"></i></button>
       </div>
       <span class="ix"></span>
     </fieldset>
@@ -76,7 +74,6 @@
               },
               css: {
                 'panel-body': collapsible,
-                'group-body': !collapsible,
                 'stripe-repeats': stripeRepeats,
               }"></div>
         </fieldset>

diff --git 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
diff --git 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/.../hqwebapp/tests/data/bootstrap5_diffs/stylesheets/style-imports.commcarehq.style.diff.txt b/.../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