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

USH-4329: Make anchored submit button sticky #34490

Merged
merged 12 commits into from
May 1, 2024
+48 −62
Merged

USH-4329: Make anchored submit button sticky #34490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
92e9921
USH-4329: Make anchored submit button sticky
MartinRiese Apr 23, 2024
8ea9412
Use predefined color for background
MartinRiese Apr 24, 2024
354f8a8
Remove unused zindex variable
MartinRiese Apr 24, 2024
8365aab
Merge branch 'master' into riese/style-anchored-submit
MartinRiese Apr 24, 2024
991c217
Add diff for form.less after form.scss was added
MartinRiese Apr 24, 2024
0a0c922
Merge branch 'jls/b5-registry' of https://github.com/dimagi/commcare-…
orangejenny Apr 24, 2024
669955d
"Bootstrap 5 Migration - Rebuilt diffs"
orangejenny Apr 24, 2024
83b887b
Use correct way to reference colors in B5
MartinRiese Apr 25, 2024
70e46d7
Merge branch 'master' into riese/style-anchored-submit
MartinRiese Apr 25, 2024
ef8a493
Merge branch 'riese/style-anchored-submit' into jls/b5-registry+riese…
MartinRiese Apr 25, 2024
b215a3e
Merge branch 'master' into riese/style-anchored-submit
orangejenny Apr 30, 2024
3d9b864
USH-4328: make changes for b5 version as well.
MartinRiese Apr 30, 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
2 changes: 0 additions & 2 deletions corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
22 changes: 10 additions & 12 deletions corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap3/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,18 @@ <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,
}">
data-bind="enable: enableSubmitButton">
<i class="fa fa-spin fa-refresh"
data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
></i>
Expand Down
22 changes: 10 additions & 12 deletions corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap5/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,18 @@ <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"> {# todo B5: css:form-group #}
<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" {# todo B5: css:form-group #}
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,
}">
data-bind="enable: enableSubmitButton">
<i class="fa fa-spin fa-refresh"
data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
></i>
Expand Down
15 changes: 4 additions & 11 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
MartinRiese marked this conversation as resolved.
Show resolved Hide resolved
.sticky-submit {
position: sticky;
}

// Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.
Expand Down
15 changes: 4 additions & 11 deletions corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,18 @@
margin-right: -@form-text-indent;
}

background-color: lighten(@cc-brand-hi, 10);
background-color: var(--bsprimary-bg-subtle);
.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.
Expand Down
1 change: 0 additions & 1 deletion corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,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;
Expand Down
1 change: 0 additions & 1 deletion corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ $zindex-persistent-tile-cloudcare: 993;
$zindex-formplayer-progress: 990;
$zindex-cloudcare-debugger: 1005;
$zindex-formplayer-scroll-to-bottom: 5;
$zindex-formplayer-anchored-submit: 2;
$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals

$cursor-disabled: 'not-allowed';
14 changes: 7 additions & 7 deletions ...pps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/partials/form_entry/form.html.diff.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
</div>
</div>
{% endif %}
- <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
+ <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton"> {# todo B5: css:form-group #}
<div data-bind="
css: submitClass,
style: {
@@ -69,10 +69,10 @@
- <div id="submit-button" class="form-actions form-group noprint-sub-container"
+ <div id="submit-button" class="form-actions form-group noprint-sub-container" {# todo B5: css:form-group #}
data-bind="
visible: showSubmitButton,
css: { 'sticky-submit': isAnchoredSubmitStyle },
@@ -67,10 +67,10 @@
{% if environment == "web-apps" %}
{% if request|ui_notify_enabled:"JUMP_TO_INVALID_QUESTIONS_WEBAPPS" %}
<div class="alert alert-ui-notify alert-dismissible helpbubble helpbubble-purple helpbubble-bottom-left fade in"
Expand All @@ -40,7 +40,7 @@
<span aria-hidden="true">&times;</span>
</button>
<p class="lead">{% trans 'Navigate Across Required Questions' %}</p>
@@ -87,7 +87,7 @@
@@ -85,7 +85,7 @@
</div>
{% endif %}
{% endif %}
Expand Down
11 changes: 11 additions & 0 deletions ...bootstrap5_diffs/stylesheets/formplayer-webapp_form.formplayer-webapp_form.style.diff.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
+++
@@ -28,7 +28,7 @@
margin-right: -@form-text-indent;
}

- background-color: @call-to-action-extra-hi;
+ background-color: var(--bsprimary-bg-subtle);
.border-bottom-radius(0);

.submit .btn {
3 changes: 1 addition & 2 deletions ...ts/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
+++
@@ -1,124 +1,225 @@
@@ -1,123 +1,225 @@
-@import "@{b3-import-variables}";
-
-// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html
Expand Down Expand Up @@ -198,7 +198,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;
Expand Down
4 changes: 1 addition & 3 deletions ...tstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
+++
@@ -1,124 +1,70 @@
@@ -1,123 +1,69 @@
-@import "@{b3-import-variables}";
+/*
+These are Boostrap 3 variables that were carried over in the
Expand Down Expand Up @@ -161,7 +161,6 @@
-@zindex-formplayer-progress: 990;
-@zindex-cloudcare-debugger: 1005;
-@zindex-formplayer-scroll-to-bottom: 5;
-@zindex-formplayer-anchored-submit: 2;
+$zindex-navbar: 1000;
+$zindex-report-loading: 100;
+$zindex-app-preview: 998;
Expand All @@ -170,7 +169,6 @@
+$zindex-formplayer-progress: 990;
+$zindex-cloudcare-debugger: 1005;
+$zindex-formplayer-scroll-to-bottom: 5;
+$zindex-formplayer-anchored-submit: 2;
+$zindex-select2-results: 1056; // higher than $zindex-modal so select2s can be used in modals

-
Expand Down
Loading