cityofboston / patterns Goto Github PK
View Code? Open in Web Editor NEWThe City of Boston pattern library for public-facing websites.
Home Page: https://patterns.boston.gov/
The City of Boston pattern library for public-facing websites.
Home Page: https://patterns.boston.gov/
If the config JSON doesn't parse we seem to get a silent error. Should write to console.error instead.
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.
Summary of suggested solutions:
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
We are fine just running on PRs and devel
. This will save us some snapshots.
.br-b***
classes.sel--thin
supportsel-c
needs 100% widthLayer icons should be able to be clustered. Color probably needs configuration.
The global styles should specify Lora for the body text.
Can we get the following icons added to the patterns library for maps:
These should be added to this location where we have the other mapping icons stored.
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.
Need to optionally be able to toggle layers on and off the map. Per-layer config to be always on, default on, default off.
Looking on IE 11, seeing need for Array.from
and Symbol
polyfills for Mandelbrot and Browsersync, respectively.
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
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:
Refactor three column with image component
Move to pattern library
Create themeable
Review backlog for bugs to resolve
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
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.
Map triggered by a button that pops it up as a full-screen modal.
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.
Now that our PRs have been merged, we can use the official npm releases of the Esri leaflet (and virtual grid) packages.
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.
Try out using a web testing framework to validate web components across a few different supported browsers.
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.
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
Depends on CityOfBoston/vizwiz#4
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
Refactor user action component
Move to pattern library
Create themeable
Review backlog for bugs to resolve
Fin should make a demo page with the current maps web component to show what the city council map will look like.
This is to de-flake the Percy runs, which are alternating city council and snow emergency routes.
May have changes to unit test infrastructure.
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
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
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:
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
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
Tables Discussed elsewhere: see comment from @jimafisk:
#730 Replace table formatting on websites
Reminder: Add any relevant Labels, Projects, and/or Milestone(s). If fields don't apply, please right N/A.
Currently we have not implemented the legend for the modal maps style.
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:
Refactor photo component
Move to pattern library
Create themeable
Review backlog for bugs to resolve
Update map.js to support icons in legend and styling of legends used on iframed maps currently in production
examples:
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:
Url: https://patterns.boston.gov/web-components/city-council.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
(With static set of layers for now.)
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.
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.
Per Sebastian’s request.
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>"
For the city council map, we need the councillor popover to appear when the constituent searches for their address (and finds it)
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:
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.
Refactor 311 component
Move to pattern library
Review backlog for bugs to resolve
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.