cityofboston / patterns Goto Github PK

Pull the code used to by @cob-hondo to build this 'grid of videos' on amazon.boston.gov into the Pattern Library.
URL: https://amazon.boston.gov/

URL: https://patterns.boston.gov/components/detail/grid--default.html

Need to optionally be able to toggle layers on and off the map. Per-layer config to be always on, default on, default off.

From @sebastianebarb

Original comps have title in Lora and text in Monsarrat. This should be switched as long strings of text should not be in all caps.

https://patterns.boston.gov/components/detail/detail_list.html

Fin should make a demo page with the current maps web component to show what the city council map will look like.

Layer icons should be able to be clustered. Color probably needs configuration.

This component appears blank in Fractal: https://patterns.boston.gov/components/detail/menu.html

According to Percy, this dates back to at least 15aa11f

This means we’re not getting coverage for this UI.

(With static set of layers for now.)

• Pull in layer data from ArcGIS
• Show Leaflet map
• Add layers to Leaflet as data comes in
• Address search field

Refactor photo component

• Move to pattern library

• Create themeable

• Review backlog for bugs to resolve

Maps.js should be able to locate the user on map load given this as a feature is chosen through the Drupal module.

Example of functionality on front end: https://www.boston.gov/departments/small-business-development/city-boston-food-trucks-schedule

Related to: https://github.com/CityOfBoston/boston.gov/issues/986

The global styles should specify Lora for the body text.

Depends on CityOfBoston/vizwiz#4

Refactor three column with image component

• Move to pattern library

• Create themeable

• Review backlog for bugs to resolve

Page where Icons are found:
URL: https://patterns.boston.gov/components/detail/experiential.html

Google sheet with revised list of icon names:
URL: https://docs.google.com/spreadsheets/d/1vdgBDgM4wgxDdO9w5wCYQR_6TT6L7-dtsqxI5ftAiIA/edit?usp=sharing

Refactor 311 component

• Move to pattern library

• Review backlog for bugs to resolve

• Space between checkboxes and radio buttons and their labels
• Missing descenders in form elements
• .br-b*** classes
• .sel--thin support
• Missing descender in search element (FF)
• Telephone form field needs the "text" treatment
• sel-c needs 100% width

The title and the field content are overlapping each other in map pop-ups:

Could be user error - here is the html used for the pop-up:

"<div style=\"min-width: 280px\">\n <h3 class=\"h3 m-v300\"><a href=\"{{name}}\">{{name}}</a></h3>\n <div class=\"m-v300\">\n <ul class=\"dl dl--sm\">\n <li class=\"dl-i\"><span class=\"dl-t\">Address:</span> <span class=\"dl-d\">{{address}}</span></li>\n <li class=\"dl-i\"><span class=\"dl-t\">Schedule:</span> <span class=\"dl-d\">{{schedule}}</span></li>\n <li class=\"dl-i\"><span class=\"dl-t\">Hours:</span> <span class=\"dl-d\">{{hours}}</span></li></ul>\n </div>"

Expected behavior:
The address search suggestions that show up in a drop down when a user starts typing an address should completely cover the the map legend.

Actual behavior:
When searching for an address, the fill color of the legend polygon appears in the search suggestions:

Able to re-create this behavior on:

• Chrome - 64
• Firefox - 58
• Edge - 16
• Safari - 11
• IE - 11

Url: https://patterns.boston.gov/web-components/city-council.html

After a users searches for their address, have the map center on the found address(es) at a higher zoom level than it currently does (more zoomed out - 14 or 15 might work?). So that they can see more information around the address they searched.

Users testing the snow emergency map have been getting confused when they search for their address and then have to zoom back out to see the nearest parking garage.

For the city council map, we need the councillor popover to appear when the constituent searches for their address (and finds it)

Update map.js to support icons in legend and styling of legends used on iframed maps currently in production

examples:

• http://cob-maps.herokuapp.com/snow_emergency_parking.html
• http://cob-maps.herokuapp.com/farmers_markets.html

Expected Behavior:
Images in pop-ups should look like this (how they appear in all other browsers with the exception of IE 11):

Actual Behavior:
Images in pop-ups on maps are distorted:

Url: https://patterns.boston.gov/web-components/city-council.html

Refactor user action component

• Move to pattern library

• Create themeable

• Review backlog for bugs to resolve

Remove the HTML configuration functionality from and focus just on the JSON configuration.

Simplifies things since we don’t need to handle changes or updating properties.

The Problem:

Siteimprove flags the B in the Menu as problematic for assistive technology because a title tag is present without an accompanying alt tag. A screen reader knows how to handle both an empty alt attribute and one with a text. If there is no attribute some screen readers will compensate and read the path to the image instead.

View Issue and Suggested Solutions in SiteImprove

URL: https://my2.siteimprove.com/Inspector/341026/Accessibility/Page?pageId=8050765329&impmd=68716A68AC2C7A88B4D3675E121C85F5#/Criterion/1.1.1/Check/1

Summary of suggested solutions:

1. add alt text to B image in the Menu to resolve the issue for screen readers, or
2. remove title attribute and set the alt text to null (alt=“”), if the preference is to have screen readers ignore the logo.

Fixing this addresses other Accessibility issues flagged in SiteImprove:

The image does not have the correct alternative:
URL: https://my2.siteimprove.com/Inspector/341026/Accessibility/Page?pageId=8050765329&impmd=68716A68AC2C7A88B4D3675E121C85F5#/Criterion/1.1.1/Check/46

Image link is missing alternative text
URL: https://my2.siteimprove.com/Accessibility/341026/Pages/Issue?CheckId=5&CriterionChapter=2.4.4

CityOfBoston/vizwiz#31 has the definition of an updated schema. The <cob-viz> web component needs to be updated to consume it.

See CityOfBoston/vizwiz#29 for the vizwiz side of this change.

We are fine just running on PRs and devel. This will save us some snapshots.

The map should ignore the width of the legend when setting its center point. This will let us set a center point to the middle of Boston, the browser‘s location, or a search result without worrying that it’s obscured or crowded out by the legend.

Centered without regard to legend:

Centered outside of legend:

Expected Behavior:
When viewing a map on a mobile device, or on a screen small enough for the overlay div to be collapsed, the menu should automatically re-collapse once a user has searched for an address, so the user would see this directly after selecting an address:

Actual behavior:
The div stays open after an address has been selected and the user sees this:

Currently we have not implemented the legend for the modal maps style.

Maps.js should be able to display the address search box given this as a feature is chosen through the Drupal module.

Example of functionality on front end: http://cob-maps.herokuapp.com/snow_emergency_parking.html

Seen in both FF and IE: using the scroll wheel can cause the map to zoom in and out over and over again.

Probably related to the code that tries to keep the attributes up-to-date with the map state.

Map triggered by a button that pops it up as a full-screen modal.

Expected Behavior/Acceptance Criteria

Tables should be centered on the page, and responsive when viewed on mobile phones in portrait and landscape view.

URL: https://www.boston.gov/parks-and-playgrounds

On iPhone X:

Actual Behavior

on iPhone:

On Android:

Browser

Device

Samsung Galaxy S8
Release: 2017, April
OS: Android, v7
Browser: Chrome
Screen Size: 5.8 in - 2.5 x 5.2 in
Resolution: 1440 x 2960 px
Viewport: 360 x 740 dp
Aspect Ratio: 18.5 : 9

IPHONE X
Release: 2017, September
OS: OS, v11
Browser: Safari
Screen Size: 5.8 in - 2.79 x 5.65 in
Resolution: 1125 x 2436 px
Viewport: 375 x 812 dp
Aspect Ratio 19.5 : 9

Example URL

URL: https://www.boston.gov/metrolist/lottery-and-resale
URL: https://www.boston.gov/transportation/performance-parking-pilot
URL: https://www.boston.gov/parks-and-playgrounds

Relevant Screenshot(s) or Logs

Tables Discussed elsewhere: see comment from @jimafisk:
#730 Replace table formatting on websites

Steps to Reproduce the Behavior/How to Test

1. On your mobile phone, go to a URL that has one of these tables.
2. Expand a drawer to expose the table within.
3. Verify that the table is centered and has a border.
4. Rotate the phone and verify the table is responsive (i.e. nothing breaks, still aligned, centered, with border)
5. Repeat steps 1-5 for each drawer.

Reminder: Add any relevant Labels, Projects, and/or Milestone(s). If fields don't apply, please right N/A.

Users testing the snow emergency map have an interest in seeing the street names under the streets with restricted parking. If increase the line width (to 5 maybe?) and the opacity (to 0.6 maybe?) when displaying line features that should help.

For the future: I think moving to a vector basemap would address this issue because you can make labels always draw on top, but for now we should adjust our default line width/opacity to address

If the config JSON doesn't parse we seem to get a silent error. Should write to console.error instead.

Can we get the following icons added to the patterns library for maps:

• outdoor pool
• tot spray
• trash/recycling bin

These should be added to this location where we have the other mapping icons stored.

Add tables to pattern library, but use the tables that were used on budget.boston.gov

• revisit spacing between the table title and table

• when testing, account for our current variants of tables (with top row styling option)

Few tables to test with:

1. performance parking
2. past budgets

Looking on IE 11, seeing need for Array.from and Symbol polyfills for Mandelbrot and Browsersync, respectively.

May have changes to unit test infrastructure.

Try out using a web testing framework to validate web components across a few different supported browsers.

• Pick a testing framework
• Implement / document a dev-side story
• Add CI

Per Sebastian’s request.

The map vectors don't appear due to a CSS rule in the legacy boston.gov stylesheet that gives svg elements width: auto; height: auto;

We should remove that rule, but need to QA to make sure it’s ok.

This is to de-flake the Percy runs, which are alternating city council and snow emergency routes.

Maps.js should support ability to use a user-specified icon for points on a map. Selection will come from Drupal module.

Related to: https://github.com/CityOfBoston/boston.gov/issues/985

We need to be able to specify different icons and/or colors for features within a layer based on properties of the feature.

If used, the different icons should appear on the legend.

Currently the order that layers appear is slightly non-deterministic because the config events are not firing always in source order.

The layers should appear in the order in which they're specified as <cob-map> children.

Now that our PRs have been merged, we can use the official npm releases of the Esri leaflet (and virtual grid) packages.