facioquo / uswds-design-patterns Goto Github PK

New design pattern, modeled after https://digitalcorps.gsa.gov/process/

When trying to add HTML meta page descriptions, they do not showup. Found in #5
What we implemented:

• meta loaded in root module
• meta created and defined as a service in page constructors

Done when:

• meta descriptions work
• sitemap.xml works for all routes
• add URL in banner mention of GitHub repo
• more meta icons

the problem

On mid sized iOS browser screen width (iPad Mini), this button text / icon doesn’t wrap well. There’s an unneeded   appended, or happens with zoomed scaling. This does not appear in a normal desktop web browser.

If I recall, this happens when there's a carriage return in the code between the <a>...</a> tags, strangely.

New design pattern, modeled after (below), but with fade-in top edge.

When accessing the catalog, images often don't show when behind a VPN or other enterprise firewall. The error shows up as:

Request URL: https://{third-party photo inventory list URL}
Request Method: GET
Status Code: 504 Gateway Timeout (from service worker)
Referrer Policy: strict-origin-when-cross-origin

However, it's more likely that it's blocked.

Consider a nicer "images cannot be retrieved" user error or use a more direct / reliable image source for this demo. Possibly, host a set of usable stock images directly, without relying on third-party APIs.

Done when:

• not using third party API for image source
• pattern guidance updated to reflect limitations (e.g., See All and possibly Show More not appropriate for massive data.

the problem

When navigating from the homepage design pattern cards, the routerLink uses a fragment for pages that don't need one and the page loads with partial scroll instead of at the top.

the problem

On the hero callout overlay pattern page, some styling was dropped.

When social sharing links to pattern pages, the description and preview are not rendered. This is likely due to use of Angular SPA. Suggest converting to Angular Universal SSR approach.

Done when:

• fix button issue (below)
• anchor back to setting on setting change, to prevent bad scrolls in Safari

the problem

When viewing the “suggest a pattern” tile on the home page, on an iOS mobile device, this plus sign doesn’t center vertically as it should.

After attempting to remove all of the progressive web app components in 71dfd5c. Use of PWA isn't necessarily a problem if it didn't cause style conflicts between site and design pattern pages; however, when removing it, these persist:

• it shows an "install" option when deployed, likely due to a properly defined manifest.json file

  

• notable page load flicker when navigating

Recommend:

• modify (simplify) manifest.json file, rename to root manifest.json
• add properly formatted maskable icons, including an SVG option (see manifest link)
• merge down to one root stylesheet with special class family?

An alternate to Cards and grids, for an alternate short image-based menu of large touch surface options.

To do:

• add new bubbles page (baseline)
• refactor: reuse card catalog data, instead of hardcoded bubbles with attr.background-image
• fix: honor page margins
• fix: use margins instead of padding for bubble spacing (to max use of width in container)
• consider a settings panel
• add proper focus and hover affect, with correct colors
• update thumbnails for pattern, social card, and README

the problem

The 404 page isn’t working … or I just forgot to fully implement it. It renders, but is just a blank page.

When on page 3 of the card catalog classic design pattern, neither the first page or Previous link are shown, they should be.

the problem

Looks like a 1px offset gap where fade starts. Observed on iOS Retina display.

the problem

The pattern page "return to top" link does not display, in Chrome only. It also works in Chrome in developer mode, when hosted on localhost. Maybe this was just a glitch in the build?

in Chrome

in Edge (and Safari)