Sticky case tile in web apps #33819

orangejenny · 2023-11-30T19:29:14Z

Product Description

https://dimagi-dev.atlassian.net/browse/USH-3980

Make persistent case tiles stick to the top of the screen. This will affect all persistent case tiles, whether they're in a case list or a form.

Also makes a few minor styling adjustments. Review by commit.

Feature Flag

Case tiles

Safety Assurance

Safety story

This is all styling changes, but I'm requesting QA to make sure none of the "cleanup" has unwanted side effects.

Automated test coverage

doubt it

QA Plan

https://dimagi-dev.atlassian.net/browse/QA-5877

Rollback instructions

This PR can be reverted after deploy with no further considerations

Labels & Review

Risk label is set correctly
The set of people pinged as reviewers is appropriate for the level of risk of the change

…t-container This is a semantic change: content belongs in the content container, not after it.

Now that #webforms is inside .content-container, which is also a .container, it's getting double padding. Fix that.

There are enough outer containers.

Unnecessary and causes inconsistency with other screens

This may be why #webforms was outside of .form-container: on app preview, there's no .form-container. Deal with this with a style in an app preview file.

…p preview Shhhhh

This is another side effect of removing the double .container Also nest some related styles together.

orangejenny · 2023-11-30T20:00:58Z

corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less

@@ -97,6 +97,7 @@
 @checkbox-default-color: @call-to-action-mid;

 @breadcrumb-separator: '>';
+@breadcrumb-height-cloudcare: 46px;


@biyeun I don't need to do anything in B5, right, since the Web Apps migration hasn't started?

yes, correct. you can add that in when you are migrating web apps

nospame

This will affect all persistent case tiles, whether they're in a case list or a form

Does this interact at all with the sticky map (any screen size) or map+header (on small screens)?

nospame · 2023-11-30T23:32:02Z

corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less

@@ -134,6 +134,18 @@

 }

+.case-tile-container {
+    position: sticky;
+    position: -webkit-sticky;


Is this still necessary? It looks like Safari supports regular position: sticky since late 2019.

thanks - a457a02

Otherwise, a border & shadow appear even when there's no tile.

…-hq into jt/anchored-submit-bar-visual-fix+jls/web-apps-sticky-tile

This is just mimicking web apps HTML.

There isn't a .container on the page anymore, and the table doesn't need a custom line height.

I suspect this was added to remove the border added by .ui-widget-content

This was an override for a .ui-widget-content rule that set link text to dark grey.

orangejenny · 2024-01-11T21:37:46Z

Requesting review of recent commits.

Fixed https://dimagi-dev.atlassian.net/browse/QA-5983 with e9d5bc9, which removed a 10+-year-old line that automatically adds ui-widget and ui-widget-container classes to all container classes. ui-widget and ui-widget-container are jQuery UI classes, so I figure that dates back to a time when jQuery UI was used much more extensively. I've convinced myself this isn't that big a deal grepping the codebase for container and for ui-widget. Hardly any pages even use container outside of web apps, and they're mostly simple pages that don't use jQuery UI widgets (domain_request.html, activate_transfer_domain.html, etc.).

FYI @biyeun

biyeun · 2024-01-15T19:35:38Z

@orangejenny noting that we chatted about this offline and that my recommendation is to put this change on staging and see if it causes any issues. if not it's g2g from my perspective

orangejenny · 2024-01-16T13:24:04Z

@biyeun yep, it's been on staging for a few days without issue and I've done some light smoke testing on pages using jQuery UI

stephherbers

thank you for the detailed commit messages

orangejenny added 8 commits November 29, 2023 20:49

Moved the container that contains form entry into the overall .conten…

8e727d2

…t-container This is a semantic change: content belongs in the content container, not after it.

Removed extra container class

697abea

Now that #webforms is inside .content-container, which is also a .container, it's getting double padding. Fix that.

Removed containing .row and .col-sm-12 classes

2dc81ae

There are enough outer containers.

Removed top margin from form entry container

c6c34f7

Unnecessary and causes inconsistency with other screens

Added sticky styling to persistent case tile

41f2199

Added padding specific to app preview

9aeaa51

This may be why #webforms was outside of .form-container: on app preview, there's no .form-container. Deal with this with a style in an app preview file.

Removed uppercase transformation for required field validations on ap…

b639181

…p preview Shhhhh

Updated margins on .form-actions

c618a9c

This is another side effect of removing the double .container Also nest some related styles together.

orangejenny added the product/feature-flag Change will only affect users who have a specific feature flag enabled label Nov 30, 2023

orangejenny requested review from Robert-Costello, Jtang-1 and nospame November 30, 2023 19:29

dimagimon added the Risk: Medium Change affects files that have been flagged as medium risk. label Nov 30, 2023

orangejenny added the awaiting QA QA in progress. Do not merge label Nov 30, 2023

Updated B5 diffs

84d9280

orangejenny commented Nov 30, 2023

View reviewed changes

orangejenny added 2 commits November 30, 2023 17:15

Merge branch 'master' into jls/web-apps-sticky-tile

9ab18d0

Ran build_bootstrap5_diffs

335d128

nospame reviewed Nov 30, 2023

View reviewed changes

orangejenny added 5 commits December 6, 2023 19:39

Merge branch 'master' into jls/web-apps-sticky-tile

24d5232

Ran build_bootstrap5_diffs

c0c74a7

Removed webkit-specific style

a457a02

Moved styling to inner div

59737d1

Otherwise, a border & shadow appear even when there's no tile.

Merge branch 'jls/web-apps-sticky-tile' of github.com:dimagi/commcare…

3ba9c08

…-hq into jt/anchored-submit-bar-visual-fix+jls/web-apps-sticky-tile

orangejenny requested review from a team, esoergel, stephherbers, mkangia, AddisonDunn and snopoke as code owners January 8, 2024 19:26

orangejenny requested a review from millerdev as a code owner January 8, 2024 19:26

orangejenny added 13 commits January 8, 2024 14:30

Merge branch 'master' into jls/web-apps-sticky-tile

b759df4

Updated new styles to not apply to printing

a73d02f

Added specific z-index to resolve overlap with navbar dropdown menu

b4380f7

Merge branch 'master' into jls/web-apps-sticky-tile

4d46e7c

Removed auto-add of jQuery UI classes

e9d5bc9

Removed jquery UI classes from base_cloudcare_template.html

bff4b55

This is just mimicking web apps HTML.

Removed custom styles from builds/edit_menu.html

5687747

There isn't a .container on the page anymore, and the table doesn't need a custom line height.

Updated styles for .notifications-container

0dde90e

Removed border removal

1744dcc

I suspect this was added to remove the border added by .ui-widget-content

Removed a.btn-primary rule

ae0f600

This was an override for a .ui-widget-content rule that set link text to dark grey.

Ran build_bootstrap5_diffs

44ce748

Linted

06f4418

Ran build_bootstrap5_diffs

73c1c81

stephherbers approved these changes Jan 16, 2024

View reviewed changes

orangejenny added QA Passed and removed awaiting QA QA in progress. Do not merge labels Jan 16, 2024

orangejenny merged commit 6189db0 into master Jan 16, 2024
11 of 12 checks passed

orangejenny deleted the jls/web-apps-sticky-tile branch January 16, 2024 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sticky case tile in web apps #33819

Sticky case tile in web apps #33819

orangejenny commented Nov 30, 2023 •

edited

Loading

orangejenny Nov 30, 2023

biyeun Jan 11, 2024 •

edited

Loading

nospame left a comment

nospame Nov 30, 2023

orangejenny Dec 14, 2023

orangejenny commented Jan 11, 2024

biyeun commented Jan 15, 2024

orangejenny commented Jan 16, 2024

stephherbers left a comment

Sticky case tile in web apps #33819

Sticky case tile in web apps #33819

Conversation

orangejenny commented Nov 30, 2023 • edited Loading

Product Description

Feature Flag

Safety Assurance

Safety story

Automated test coverage

QA Plan

Rollback instructions

Labels & Review

orangejenny Nov 30, 2023

Choose a reason for hiding this comment

biyeun Jan 11, 2024 • edited Loading

Choose a reason for hiding this comment

nospame left a comment

Choose a reason for hiding this comment

nospame Nov 30, 2023

Choose a reason for hiding this comment

orangejenny Dec 14, 2023

Choose a reason for hiding this comment

orangejenny commented Jan 11, 2024

biyeun commented Jan 15, 2024

orangejenny commented Jan 16, 2024

stephherbers left a comment

Choose a reason for hiding this comment

orangejenny commented Nov 30, 2023 •

edited

Loading

biyeun Jan 11, 2024 •

edited

Loading