wmcadigital / wmn-find-rail-zones Goto Github PK

View Code? Open in Web Editor NEW

0.0 4.0 0.0 2.09 MB

A service to help you find what rail zones you travel within throughout the West Midlands.

Home Page: https://find-rail-zones.wmnetwork.co.uk/

JavaScript 97.04% HTML 1.27% SCSS 1.62% Shell 0.07%

react ticketing rail train zones wmn west-midlands-network west-midlands

wmn-find-rail-zones's Introduction

West Midlands Network Create React App template

Get started

Installation

Click Use this template in the top right hand corner of Github
Git clone your newly created repo based on this github template
npm i to install dependencies

Alternatively

Clone the project: git clone https://github.com/wmcadigital/wmn-create-react-app-template.git
npm i to install dependencies

Installed pacakges

Dependencies

Dev Dependencies

eslint (included with Create React App)
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-jam3
eslint-plugin-prettier
prettier
react-app-rewired
sass-lint (soon to move to stylelint)
sass-lint-webpack (soon to move to stylelint-webbpack-plugin)

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

wmn-find-rail-zones's People

Contributors

Watchers

wmn-find-rail-zones's Issues

Limit the amount of additional stations a user can add

Current behaviour:

Currently, we don't have a limit on the number of additional stations which a user can add. This means users can add as many fields as they like. This doesn't cause any issues with the service, but it's unlikely that users will need more than 10 additional station fields.

Feature request:

Add a max limit of 10 stations. Hide the 'Add additional stations' button when 10 stations have been added to stop users from adding more.

Add alt text to facilities icons

The full, part step-free access and parking icons do not have any alt text. This is important to add, especially for the list view as users with screen readers will need to know which stations have these facilities.

Alt-text:

Full step-free access: alt="This station has full step-free access"
Part step-free access: alt="This station has part step-free access"
Parking: alt="This station has parking"

Choosing Worcester Forgate Street makes the entire page content disappear

Issue

Every time I select Worcester Forgate Street from the dropdown, the page's content disappears. I need to reload the link in order for the content to re-appear.

Update metadata

The app has default metadata.

Update to match bus operator journey metadata.

Description: Train stations across the West Midlands are in five zones. Use this service to find which rail zones your train stations are in.

Out of county zones listed as being in Zone 7

Zones that are 'Out of county', such as Lichfield or Codsall, are being listed as Zone 7 when you search for them.
Zones in the 'WMN nTrain zone', such as Rugeley Town, are being listed as Zone 6. This isn't inline with educational content or our ticket offering where we tell users there are only zones 1-5.

Zones in the WMN nTrain zone should be listed as being in the 'WMN nTrain zone'. and Zones that are out of county should be listed as 'Out of County'.

Some rail lines at the bottom of the live map have a different thickness

Map on https://wmn-find-rail-zones.netlify.app/:

Map in Illustrator:

Some of the train lines at the bottom of the map where the solid line ends and the line with a gradient begins have a different thickness.

Not sure what is causing this as some of the ends of other lines are showing fine on the live map.

Width of the intro text column should be 3-4 instead of full-width

What it is currently:

What it should be:

Text across the website will only use 3-4 columns as it makes the text easier to read. I understand that this will make the map move down further, but it's best to change it for consistency with other services.

Update back to ticket finder link

The link that appears when the find a ticket query string (?ticketSearch=true)
is added should be https://find-a-ticket.tfwm.org.uk instead of https://find-a-ticket.wmnetwork.co.uk/

Feedback link needs updating

https://forms.office.com/Pages/ResponsePage.aspx?id=RetZCK7xCk6e-ubWa7tnLz45Weo_RTVDpYxVYcrD8wxUOFVXSzk3N01CTElHRUVLN0hURk9IVURLVS4u

Rail zone list - accessibility

Make sure that when "stepFreeAccess": null, a disabled icon isn't shown next to the station name (Example: Bordesley, Small Heath, Tyseley, Old Hill)
For screen readers, make sure the station bullet points are read as: "{stationName}, which has {disabledAccess} and parking", "{stationName}, which has {disabledAccess}"```, "{stationName}, which has parking", or "{stationName}"```

Remove the '+ Add another station' link and move the button below the additional stations field.

Current behaviour

The '+ Add another station' button and link perform the same action, so it's unnecessary to have both. These were in the designs, but after reviewing the live service it no longer seems necessary.

Feature request

When a user clicks on the 'add another station' button, the additional station field(s) will now be above the button. This is so screen readers can read the content & button in a logical order.

The '+ Add another station link' which was below the field is now removed, so the button is the only way to add another station.

Quick mock-up:

Ticket recommendation: Add a purple message box behind the recommendation

Adding the purple Help message box component (without the close button) behind the ticket recommendation will give the copy more prominence, so users won't miss this vital piece of information which they often did in the bus area micro journey testing.

This new style for the ticket recommendation copy is being used for the bus area micro journey.

When selecting a rail zone as part of the TF, the zone information for each station will no longer be in the inset text component.

Select your rail zones (Ticket finder)

Desktop: https://zpl.io/amjqZ66
Mobile: https://zpl.io/aB478PO

Find your rail zone service (as part of the ticket finder):

Desktop: https://zpl.io/awEYPld
Mobile: https://zpl.io/adlroKL

For the Find your rail zone service, just focus on the ticket recommendation style in the designs, since it's not been updated with the design changes made during its development (such as the mobile map being at the top)