Migrate rural or underserved tool into cfgov-refresh #5092

anselmbradford · 2019-06-27T15:33:10Z

Migrates https://github.com/cfpb/rural-or-underserved-test into this repo.

Additions

Rural-or-underserved-tool app assets and jinja template.
Census API to external API call whitelist.

Testing

Pull branch and run ./frontend.sh && gulp clean && gulp build and run a local server.
Visit http://localhost:8000/rural-or-underserved-tool/ and compare to https://www.consumerfinance.gov/rural-or-underserved-tool/

Screenshots

Notes

There are many classes that can likely be cleaned out, but this provides the initial migration of this app.
Layout differs in some respects to the live site by necessity of fitting into a standard layout. Big differences:
- About section is always visible.
- Maps in the result table retain a top border line.

accesslint

There are accessibility issues in these changes.

cfgov/unprocessed/apps/rural-or-underserved-tool/js/dom-tools.js

accesslint · 2019-06-27T15:33:19Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+                    <h2>
+                        Check status of properties for loans extended in
+                        <small>
+                            <select id="year" name="year">


Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input.

accesslint · 2019-06-27T15:33:19Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+                                            a-text-input__full
+                                            input-address"
+                                        name="address1"
+                                        type="text" />


Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input.

accesslint · 2019-06-27T15:33:19Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+                                    Add another address
+                                </a>
+                            </p>
+                            <input class="a-btn" type="submit" value="Check addresses" />


Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input.

accesslint · 2019-06-27T15:33:20Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+                                    <input id="file-name"
+                                           name="file-name"
+                                           class="a-text-input"
+                                           value="No file chosen">


Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input.

accesslint · 2019-06-27T15:33:20Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+                            </p>
+
+                            <p>
+                                <input class="a-btn" type="submit" value="Check addresses" />


Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input.

chosak · 2019-06-27T16:32:30Z

In Firefox the dropdown has visibly changed from this:

to this:

Neither of these look great, but the latter looks a bit too squeezed to me, and even more squeezed than the screenshot you shared.

Additionally, the FAQs don't show up as collapsed for me:

and in the developer console, I see this warning:

This is all running locally, after doing a gulp clean && gulp build as you suggest. I did see this warning during the build:

[12:25:01] Using gulpfile ~/Projects/cfgov-refresh/gulpfile.js
[12:25:01] Starting 'build'...
[12:25:01] Starting 'styles'...
[12:25:01] Starting 'scripts'...
[12:25:01] Starting 'images'...
[12:25:01] Starting 'styles:apps'...
[12:25:01] Starting 'styles:featureFlags'...
[12:25:01] Starting 'styles:ie'...
[12:25:01] Starting 'styles:modern'...
[12:25:01] Starting 'styles:nemo'...
[12:25:01] Starting 'styles:ondemand'...
[12:25:01] Starting 'scripts:polyfill'...
[12:25:01] Starting 'scripts:modern'...
[12:25:01] Starting 'scripts:apps'...
[12:25:01] Starting 'scripts:external'...
[12:25:01] Starting 'scripts:nemo'...
[12:25:01] Starting 'scripts:ondemand'...
[12:25:01] Starting 'images:apps'...
[12:25:01] Starting 'images:general'...
[12:25:01] Starting 'styles:nemoProd'...
[12:25:01] Starting 'styles:nemoIE8'...
[12:25:03] Started generating service worker file...
[12:25:03] Copying eRegs' manifest...
App dependencies not installed, please run from project root: npm --prefix ./cfgov/unprocessed/apps/rural-or-underserved-tool install ./cfgov/unprocessed/apps/rural-or-underserved-tool
[12:25:03] Starting 'scripts:ondemand:header'...
[12:25:03] Starting 'scripts:ondemand:footer'...
[12:25:03] Starting 'scripts:ondemand:nonresponsive'...
[12:25:03] Finished 'styles:featureFlags' after 1.91 s
[12:25:03] webpack-stream - No files given; aborting compilation
[12:25:03] Successfully copied eRegs' manifest to ./cfgov/static_built/apps/regulations3k/regulations3k-manifest.json
[12:25:03] Generated cfgov/regulations3k/jinja2/regulations3k/regulations3k-service-worker.js, which will precache 0 files, totaling 0 bytes.

Note the message about ROUT dependencies not being installed. Is this expected?

accesslint

There are accessibility issues in these changes.

cfgov/jinja2/v1/rural-or-underserved/index.html

anselmbradford · 2019-06-27T17:13:31Z

Updated drop-down to use CF a-select styling in 84a379e

It's pretty tight at mobile. Not sure how we want to handle that.

accesslint

👏 You fixed the issue(s)! Great work.

niqjohnson · 2019-07-02T15:57:28Z

@anselmbradford: I pushed up a change to convert the FAQs from individual expandables to expandable groups to match a little more closely what's there now. Take a look at that and see what you think.

Also, there's a slight style bug I'm seeing where the expandable headings aren't vertically centered because they're still getting the margin-bottom from .h4 applied to them:

Current	Expected

Looking at other expandable groups (like the ones on the TILA-RESPA Integrated Disclosure FAQs page), I think this might have something to do with the order the Capital Framework styles are getting imported? It looks like .o-expandable_label is meant to override the bottom margin on .h4, but instead .h4 is overriding .o-expandable_label. It's a minor thing, but I wasn't sure the best way to fix it.

- Float the show/hide map button to the right - Hide the border between result and map

- Reduce the top and bottom margins around result count - Bump up the font size of the result counters

niqjohnson · 2019-07-11T20:52:00Z

@anselmbradford, I pushed up a couple more small style updates (more info on those in the GHE issue). I'm pretty secure in the design side of the updates but much less secure about the CSS I used to make the design side happen, so feel free to give the code a look and change anything that needs changing.

niqjohnson · 2019-07-11T20:56:43Z

@anselmbradford, one other thing I noticed while I was poking around: it looks like the body of the page is getting an overflow-x: hidden; style from somewhere at small screen sizes (maybe mega-menu.less if Chrome's dev tools are to be believed). That's preventing the page from horizontally scrolling on small screens to let you view the full width of the result tables.

anselmbradford · 2019-07-11T23:13:32Z

one other thing I noticed while I was poking around: it looks like the body of the page is getting an overflow-x: hidden; style from somewhere at small screen sizes (maybe mega-menu.less if Chrome's dev tools are to be believed). That's preventing the page from horizontally scrolling on small screens to let you view the full width of the result tables.

Hmm, yeah most definitely from the mega-menu, since the hamburger menu sits alongside the page's contents to enable it to slide, so this sounds like an issue we need to resolve within the table itself.

niqjohnson · 2019-07-12T15:15:58Z

@anselmbradford: I wonder if we should convert the tables to the horizontal scroll version? Seems like in theory what we want to happen, but I don't think I've every actually seen one of our scrolling tables in the wild yet, so I'm not sure if that's the right way to go.

anselmbradford · 2019-07-12T23:11:15Z

Also, there's a slight style bug I'm seeing where the expandable headings aren't vertically centered because they're still getting the margin-bottom from .h4 applied to them:

@niqjohnson I fixed this in 1363d77 You were right, the order was wrong (actually cf-core was being delivered twice).

anselmbradford · 2019-07-13T00:03:35Z

I wonder if we should convert the tables to the horizontal scroll version? Seems like in theory what we want to happen, but I don't think I've every actually seen one of our scrolling tables in the wild yet, so I'm not sure if that's the right way to go.

Converted to scrolling tables in e9a8167
Also, I converted the summary counters at the top (the large numbers) to inline-flex instead of inline-grid, since they overlapped with the text if they were two digits.
Lastly, I wasn't sure if the show more buttons were too close?

niqjohnson

This is looking good. I just had a few comments: two that seem to come out of our typical scrollable table styles and one on adding a little more space between the buttons.

cfgov/jinja2/v1/rural-or-underserved/index.html

niqjohnson · 2019-07-15T20:30:42Z

cfgov/jinja2/v1/rural-or-underserved/index.html

+
+                        <p class="block block__flush-top block__flush-bottom block__padded-top block__padded-bottom">
+                            <a data-table="rural" class="button-more u-hidden a-btn a-btn__secondary no-decoration" href="#" id="ruralMore">View 10 more</a>
+                            <a data-table="rural" class="margin-left-1 view-all u-hidden no-visit" href="#" id="ruralAll">View all</a>


Let's give these buttons the same separation as similar button combos on cf.gov, like the "Apply filters" and "Clear filters" buttons in filter modules. I think that's a 5px separation.

It'll be updated to this in the next push

Also opened cfpb/capital-framework#946

These should all be button elements, too.

The spacing looks good to me

cfgov/jinja2/v1/rural-or-underserved/index.html

Migrate rural or underserved tool to cfgov-refresh

ca250af

accesslint bot suggested changes Jun 27, 2019

View reviewed changes

anselmbradford requested review from Scotchester, chosak, niqjohnson and willbarton June 27, 2019 15:38

Remove no-border class on map

57be799

Add a-select formatting to drop-down

84a379e

accesslint bot suggested changes Jun 27, 2019

View reviewed changes

anselmbradford and others added 4 commits June 27, 2019 13:47

re-generate yarn.lock

d75e00a

Re re-generate yarn.lock

9901355

sneak in various packages

1dc4ce3

Resolve accessibility issues

025a253

accesslint bot approved these changes Jun 28, 2019

View reviewed changes

anselmbradford and others added 5 commits June 28, 2019 11:03

Remove unneeded webpack bits

599202a

Remove hash-router

58e3345

Merge branch 'master' into migrate_rural

213c292

Include yarnrc and cache for rural tool

8777c88

Make FAQs into expandable groups

2461719

niqjohnson added 2 commits July 11, 2019 15:04

Update result table styles

5192b92

- Float the show/hide map button to the right - Hide the border between result and map

Update result page styles

7dfb7f7

- Reduce the top and bottom margins around result count - Bump up the font size of the result counters

anselmbradford and others added 2 commits July 12, 2019 18:33

Merge branch 'master' into migrate_rural

a739fa9

Fix expandables height

1363d77

Convert tables | fix summary counters

e9a8167

niqjohnson reviewed Jul 15, 2019

View reviewed changes

anselmbradford and others added 7 commits July 16, 2019 09:49

Drop warning notification style

d989e14

Override zebra striping and set table to 100%

8bee9a0

Combine buttons into btn-group and remove unused classes

c91f83a

Convert view more links to buttons

c9555bc

Merge branch 'master' into migrate_rural

6e93fba

Merge branch 'master' into migrate_rural

0ccdc77

Merge branch 'master' into migrate_rural

b1f1d10

anselmbradford merged commit 3df2470 into master Jul 24, 2019

anselmbradford deleted the migrate_rural branch July 24, 2019 14:03

chosak mentioned this pull request Jul 25, 2019

Add apache #5122

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate rural or underserved tool into cfgov-refresh #5092

Migrate rural or underserved tool into cfgov-refresh #5092

anselmbradford commented Jun 27, 2019 •

edited

Loading

accesslint bot left a comment

accesslint bot Jun 27, 2019

accesslint bot Jun 27, 2019

accesslint bot Jun 27, 2019

accesslint bot Jun 27, 2019

accesslint bot Jun 27, 2019

chosak commented Jun 27, 2019

accesslint bot left a comment

anselmbradford commented Jun 27, 2019

accesslint bot left a comment

niqjohnson commented Jul 2, 2019

niqjohnson commented Jul 11, 2019

niqjohnson commented Jul 11, 2019

anselmbradford commented Jul 11, 2019 •

edited

Loading

niqjohnson commented Jul 12, 2019

anselmbradford commented Jul 12, 2019

anselmbradford commented Jul 13, 2019

niqjohnson left a comment

niqjohnson Jul 15, 2019

anselmbradford Jul 16, 2019

anselmbradford Jul 16, 2019

Scotchester Jul 16, 2019

anselmbradford Jul 16, 2019

niqjohnson Jul 18, 2019

Migrate rural or underserved tool into cfgov-refresh #5092

Migrate rural or underserved tool into cfgov-refresh #5092

Conversation

anselmbradford commented Jun 27, 2019 • edited Loading

Additions

Testing

Screenshots

Notes

accesslint bot left a comment

Choose a reason for hiding this comment

accesslint bot Jun 27, 2019

Choose a reason for hiding this comment

accesslint bot Jun 27, 2019

Choose a reason for hiding this comment

accesslint bot Jun 27, 2019

Choose a reason for hiding this comment

accesslint bot Jun 27, 2019

Choose a reason for hiding this comment

accesslint bot Jun 27, 2019

Choose a reason for hiding this comment

chosak commented Jun 27, 2019

accesslint bot left a comment

Choose a reason for hiding this comment

anselmbradford commented Jun 27, 2019

accesslint bot left a comment

Choose a reason for hiding this comment

niqjohnson commented Jul 2, 2019

niqjohnson commented Jul 11, 2019

niqjohnson commented Jul 11, 2019

anselmbradford commented Jul 11, 2019 • edited Loading

niqjohnson commented Jul 12, 2019

anselmbradford commented Jul 12, 2019

anselmbradford commented Jul 13, 2019

niqjohnson left a comment

Choose a reason for hiding this comment

niqjohnson Jul 15, 2019

Choose a reason for hiding this comment

anselmbradford Jul 16, 2019

Choose a reason for hiding this comment

anselmbradford Jul 16, 2019

Choose a reason for hiding this comment

Scotchester Jul 16, 2019

Choose a reason for hiding this comment

anselmbradford Jul 16, 2019

Choose a reason for hiding this comment

niqjohnson Jul 18, 2019

Choose a reason for hiding this comment

anselmbradford commented Jun 27, 2019 •

edited

Loading

anselmbradford commented Jul 11, 2019 •

edited

Loading