Merge pull request #33910 from dimagi/jt/anchored-submit-bar-visual-fix

Anchored Submit Bar Visual Fix
dimagi · Jan 3, 2024 · 6f35bad · 6f35bad
2 parents c842bd8 + e6bb6ec
commit 6f35bad
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -347,10 +347,9 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () {
         self.blockSubmit = ko.observable(false);
         self.hasSubmitAttempted = ko.observable(false);
         self.isSubmitting = ko.observable(false);
-        self.submitClass = constants.FULL_WIDTH + ' text-center';
-        if (hqImport('hqwebapp/js/toggles').toggleEnabled('WEB_APPS_ANCHORED_SUBMIT')) {
-            self.submitClass += ' anchored-submit';
-        }
+        self.isAnchoredSubmitStyle = hqImport('hqwebapp/js/toggles').toggleEnabled('WEB_APPS_ANCHORED_SUBMIT');
+        self.submitClass = constants.FULL_WIDTH + ' text-center' +
+          (self.isAnchoredSubmitStyle ? ' anchored-submit' : ' nonanchored-submit');
 
         self.currentIndex = ko.observable("0");
         self.atLastIndex = ko.observable(false);

diff --git a/corehq/apps/cloudcare/templates/form_entry/templates.html b/corehq/apps/cloudcare/templates/form_entry/templates.html
@@ -151,10 +151,19 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
             </div>
           {% endif %}
           <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
-            <div data-bind="css: submitClass">
-              <button class="submit btn btn-lg btn-primary"
+            <div data-bind="
+              css: submitClass,
+              style: {
+                'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} ? '30px' : '' {# data preview bar #}
+              }">
+              <button class="submit btn btn-primary"
                       type="submit"
-                      data-bind="enable: enableSubmitButton">
+                      data-bind="
+                        enable: enableSubmitButton,
+                        css: {
+                          'btn-lg': !isAnchoredSubmitStyle,
+                          'btn-sm': isAnchoredSubmitStyle,
+                        }">
                 <i class="fa fa-spin fa-refresh"
                    data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
                 ></i>

diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
@@ -28,10 +28,10 @@
   .anchored-submit {
     background-color: @call-to-action-low;
     width: 100vw;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     position: fixed;
-    bottom: 30px; // data preview bar
+    bottom: 0px;
     left: 0;
     z-index: @zindex-formplayer-anchored-submit;
   }
@@ -102,7 +102,7 @@
 
 }
 
-.form-container .form-actions .btn {
+.form-container .form-actions .nonanchored-submit .btn {
   font-size: 20px;
   padding: 13px 24px;
   .transition(all .5s);