Merge remote-tracking branch 'origin/riese/style-anchored-submit+jls/…

…web-apps-requirejs' into autostaging
dimagi · Apr 24, 2024 · 93e6aa5 · 93e6aa5
2 parents af153d4 + 9ed5705
commit 93e6aa5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 25 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
@@ -410,8 +410,6 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
         self.hasSubmitAttempted = ko.observable(false);
         self.isSubmitting = ko.observable(false);
         self.isAnchoredSubmitStyle = 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/cloudcare/partials/form_entry_templates.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry_templates.html
@@ -163,20 +163,19 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
           </div>
         </div>
       {% endif %}
-      <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
-        <div data-bind="
-          css: submitClass,
-          style: {
-            'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '' {# data preview bar #}
-          }">
+      <div id="submit-button" class="form-actions form-group noprint-sub-container"
+           data-bind="visible: showSubmitButton,
+                      css: { 'sticky-submit': isAnchoredSubmitStyle },
+                      style: {
+                        'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '0' {# data preview bar #}
+                      }"
+      >
+        <div class="col-12 text-center submit">
           <button class="submit btn btn-primary"
                   type="submit"
                   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,25 +28,18 @@
       margin-right: -@form-text-indent;
     }
 
-    background-color: lighten(@cc-brand-hi, 10);
+    background-color: @call-to-action-extra-hi;
     .border-bottom-radius(0);
 
-    .nonanchored-submit .btn {
+    .submit .btn {
       font-size: 20px;
       padding: 13px 24px;
       .transition(all .5s);
     }
-  }
 
-  .anchored-submit {
-    background-color: @call-to-action-low;
-    width: 100vw;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    position: fixed;
-    bottom: 0px;
-    left: 0;
-    z-index: @zindex-formplayer-anchored-submit;
+ }
+  .sticky-submit {
+    position: sticky;
   }
 
   // Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less
@@ -119,7 +119,6 @@
 @zindex-formplayer-progress:          990;
 @zindex-cloudcare-debugger:           1005;
 @zindex-formplayer-scroll-to-bottom:    5;
-@zindex-formplayer-anchored-submit:     2;
 
 
 @input-border-radius-large:       5px;