streetsupport / streetsupport-web Goto Github PK

this is done on a separate site

Spin up a quick prototype to build different outputs from the same codebase, with a view to merge the codebases of the main site, and the (the charter)[https://github.com/StreetSupport/manchester-charter].

pros:

• reduce code duplication across styles, common js modules

cons:

• complication in codebase and build

we've had a few reports of issues when viewed in safari on a mac. would be really appreciated if people can give the site a test, and report any errors as issues on here.

so as not to flood the live site with test data, can you use the UAT site:

https://ssn-web-uat.azurewebsites.net/

happens when the "desired-location" cookie doesn't match any supported cities

proper polyfilling for non-ES6 browsers

create new print-friendly page for https://streetsupport.net/find-help/all-service-providers/, which lists org title, synopsis, and addresses

add print button underneath heading synopsis, giving it a class of .js-print-btn

hide irrelevant items:

• remove entire search box (titled "To find organisations in your area...")
• remove entire search organisation by name form
• remove view type tabs (list, map)
• remove drop shadow from card
• hide print button in print styling

when viewing the site on a mobile device, you can swipe left and move the site body across, revealing a yellow box. this is an issue with how the mobile nav works.

I must have already done this previously

For each location home page (eg https://github.com/StreetSupport/streetsupport-web/blob/develop/src/pages/manchester/index.hbs) take out the form after the "You're in {location-name}" and put it into a partial (https://github.com/StreetSupport/streetsupport-web/tree/develop/src/partials/locations)

Currently supported locations:

Bolton
Bournemouth
Bradford
Bury
Leeds
Liverpool
Manchester
Oldham
Portsmouth
Rochdale
Salford
Southampton
Stockport
Tameside
Trafford
Wigan

Please also do https://github.com/StreetSupport/streetsupport-web/blob/develop/src/pages/locations/_home-page.hbs - which is used in the scaffolding of new location pages.

As part of an effort to make SSN V1 more efficient dev side, we should consider dropping visual regression testing as:

• we don't use it,
• a fair few dependencies,
• the version is very old and would probably need redoing anyway.

reproducing the issue:

1. go to https://streetsupport.net/find-help/all-service-providers/map/
2. enter the postcode "M4 1LE"
3. hit "find help" button
4. zoom in the map

clicking on the icon shows info for Centrepoint. However, there is also the organisation Coffee4Craig there, as they share office space.

TODO:

• aggregate the data, grouping organisations that share a lat/long
• remove the purple (? i'm colour blind!) heading
• list organisations in the white remaining white section:

eg

button - "x" (close marker)

h1 - "Centrepoint - Greater Manchester"
p - "Homelessness charity for 16 - 25 year olds."
a - "view details"

h1 - "Coffee4Craig"
p - "Holistic homelessness support"
a - "view details"

ensure:

• other map listings are unaffected eg https://streetsupport.net/find-help/meals/map
• the curved corners are retained

take a look at:

https://github.com/StreetSupport/streetsupport-web/blob/develop/src/scss/partials/_card.scss
https://github.com/StreetSupport/streetsupport-web/blob/develop/src/js/pages/all-organisations/map/app.js

Improve use of space when printing a services timetable page eg https://streetsupport.net/find-help/meals/timetable/ by adding print media query to the components:

• remove entire search box (titled "to find services near you...")
• remove view type tabs (listing, timetable, map)
• extend cards to full width
• remove drop shadow from card
• add print button underneath service category synopsis, giving it a class of .js-print-btn
• hide print button in print styling

Improve use of space when printing a services timetable page eg https://streetsupport.net/find-help/meals/ by adding print media query to the components:

• remove entire search box (titled "to find services near you...")
• remove view type tabs (listing, timetable, map)
• extend cards to full width
• remove drop shadow from card
• add print button underneath service category synopsis, giving it a class of .js-print-btn
• hide print button in print styling

Improve use of space when printing the org listing page eg https://streetsupport.net/find-help/meals/timetable/ by adding print media query to the components:

• remove entire search box (titled "To find organisations in your area...")
• remove entire search organisation by name form
• remove view type tabs (list, map)
• remove drop shadow from card
• add print button underneath heading synopsis, giving it a class of .js-print-btn
• hide print button in print styling

On the contact page, add a button to subscribe to our monthly newsletter.

Add the button to the "more information" section.

link: http://streetsupport.us12.list-manage1.com/subscribe?u=da9a1d4bb2b1a69a981456972&id=52ba96f2af

link text "Donate Now"

edit https://github.com/StreetSupport/streetsupport-web/blob/develop/src/partials/bournemouth/nav.hbs

link: https://www.justgiving.com/campaign/changeforgoodBournemouth

Move the heading "To find services near you, enter your postcode below." in the search box, to underneath the category heading.

Change the moved paragraph to "To find services near you, please enter your postcode"

Have a look at:

• https://github.com/StreetSupport/streetsupport-web/blob/develop/src/partials/find-help/header.hbs
• https://github.com/StreetSupport/streetsupport-web/blob/develop/src/partials/locations/selector-hogan.hbs

to improve search engine optimisation, create a sitemap for crawling robots.

the site is built using https://metalsmith.io/. keep in mind a number of pages are created as part of the build process - take a look in tasks/ and any files called generate...

there's probably a plugin for metalsmith that will crawl its own files and generate one, otherwise, create a gulp task that can be run post-build that builds it!

Twitter & Facebooks default widgets are huge chunks of code. Maybe we can do something simpler as we don't do anything advanced with our social.

go to streetsupport.net/rochdale in mobile, and the real change banner has the title image for wigan!

contact @vincelee888 for correct one

The image used for the header background image (https://charter.streetsupport.net/assets/img/header-background.png) is 70kb. Replace with a SVG.

this can also be ported to the charter: StreetSupport/manchester-charter#9

on the org listing page (find-help/all-service-providers/) wire up to the search org form to query the API (currently, it just does a client-side filter of the orgs returned by the postcode proximity search)

this requires a GET request being sent to the API endpoint via the following URL: /v1/service-provider-locations/?name={org-name}

when i hover over a navigation element's child element
then the parent element retains its hover state of a dark green background

eg

when i hover over give help then offer items, give help should stay dark green

from an org's details page (eg https://streetsupport.net/find-help/organisation/?organisation=riverside)

create a section that lists the accommodation entries they provide.

• make query to API at /v1/accommodation?providerId=riverside
• display any accommodation entries using similar styling as the main accommodation listing page: https://streetsupport.net/find-help/accommodation/listing/
• link each entry to the accommodation details page: https://streetsupport.net/find-help/accommodation/listing/details/?id=59cbc4ebbcc3d712bc48ba70

have a look at:

• https://github.com/StreetSupport/streetsupport-web/blob/develop/src/js/page-organisation.js
• https://github.com/StreetSupport/streetsupport-web/blob/develop/src/pages/find-help/accommodation/listing/index.hbs

consider:

• extracting the markup for the accommodation card into a partial used in both views
• perform the query and templating separately to existing loading/templating

we can use the same frontend for the blog if we do this.

not strictly required but will help with organisation.

• Add link to https://www.justgiving.com/streetsupportnetwork in the "How you can help" section in https://github.com/StreetSupport/streetsupport-web/blob/develop/src/pages/give-help/partnership/index.hbs
• use class "btn btn--brand-e" for link, and "btn__text" for child span tag
• rename "partnership" directory to "business-support"
• add permanent redirect in web.config from "give-help/partnership" to "give-help/business-support"
• update any href links
• update nav link text to "Business Support"
• update title to "Business Support"
• update sub-title to "How your business can help"

Not sure if webpack is caching stuff correctly when it chunks everything. can then get rid of our custom cache busting in the pipeline

to aid people finding the content they need, create a new sitemap page.

this should be generated as part of the build process. see tasks/ for all the build steps.

Link from the footer, and also to T&Cs.

NB Categories would ideally be pulled from the DB as can change, but static will do for now.

Full list of pages and links here: https://docs.google.com/spreadsheets/d/1x6OCCD1avbpiHKD7eNnnPHEEz438neAtazjXhgD1giQ/edit?usp=sharing

Sitemap Desktop:
https://sketch.cloud/s/xK2P8/all/sitemap/sitemap-desktop
Mobile:
https://sketch.cloud/s/xK2P8/all/sitemap/sitemap-page-mobile

see _cards.scss and make a variant

172kb isnt ideal

implement a content security policy, to reduce the chance of script injection etc

currently uses apple's linkmaker which takes a while to resolve. just re-create the image and host them in the site

I've added the correctly encrypted browser stack access key, and the build runs: https://github.com/StreetSupport/streetsupport-web/tree/bstack

however, it doesn't seem to running the tests

add a gulp task to generate /find-help/index.html, injecting the required html for each of the service category buttons, with the aim of improving SEO for those pages.

edit https://github.com/StreetSupport/streetsupport-web/blob/develop/src/partials/header-nav.hbs and make "about -> organisations" the first item in the drop down - please be sure to check in mobile view.

example page to replicate (on dev): /find-help/organisation/?organisation=barnabus

###opening times

on a location's opening times listing, each day should be listed vertically, and multiple opening times (eg 09:00 - 12:00; 13:00 - 17:00) should be listed horizontally

###errant drop shadow

remove the drop shadow that is floating about when a location does not have any services

This should mean they scale with height properly instead of horrible css

Note: Partial the icons themselves and use handlebars to include?