I'm submitting a ...

• feature request/bug report (a bit both I would say)

What is the current behavior?

Prettier and Eslint were installed but never set up properly. That's why we had to run Prettier manually all the time. I tried to configure them in the following PR - it did run well locally however it would need to format the whole codebase on deployment to pass the vercel check which was risky to do at that time:

Ideally we would need to have a group session to go through config (to customise Eslint as per our preferences) then run it through the whole codebase and fix issues along the way. Sometimes solution offered by Eslint is not the best solution - we we might need to come up with the walk-around for some cases.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

You can load the eslint branch from the following PR to check the results of it's run.

What is the expected behaviour?

No longer running Prettier for each page. Being prompted to fix format issues on the go.

Solution

• Group (or pair) session to configure the Eslint - discussion which features we need, how we format the code, etc;
• Running the confit through code base and fixing existing issues;

Link to Trello card: here

Problem

We welcome all contributions in the form of pull requests (PRs) from the community. But too often, PRs are being created with insufficient/missing details to help the reviewers in reviewing the PRs. And we have given little guidance on what details should be provided by the PR authors

We should create a Pull request template to provide that guidance to PR authors.

Good References

• https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository
• https://github.com/embeddedartistry/templates/blob/master/oss_docs/PULL_REQUEST_TEMPLATE.md
• https://axolo.co/blog/p/part-3-github-pull-request-template

I'm submitting a ...

• bug report

What is the current behavior?

The table now:

• has a horizontal scroll bar;
• text within the table is cut off;
• when you scroll there is a lot of empty space on the right size.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

• Open browser and go to https://council-emissions-calculator-spike-flax.vercel.app/howWeCalculate
• Open toggle device toolbar and choose mobile
• Have a look at the table and scroll horizontally

What is the expected behavior?

• No text is cut off within the table;
• No need to scroll horizontally;

Solution

There are different ways to solve this problem:

1. Do research and find how to adjust responsiveness in Chakra UI table component then fix it;
2. Potentially build it as a regular table component or divs.

What is the motivation / use case for changing the behavior?

Responsiveness on mobile.

Link to Trello card: here

I'm submitting a feature request.

What feature do you recommend to add?

SeeChange logo on top of the page should lead back to the home page for a smooth User experience:

What is the value of this feature?

Users can come back to the main page at any moment. There is a perception that clicking on the logo returns the user to the home page.

Solution

• Logo is a link that returns the user to the Home page: / locally or https://council-emissions-calculator-spike-flax.vercel.app/ for staging and http://seechange.codeforaustralia.org/ for production.

Link to Trello card

I'm submitting a bug report.

What is the current behaviour?

Explain what the issue is including screenshots and/or links. What did you do to get this issue?

On mobile, the inner content block of the travel method selection page is sticking out of the main layout component which causes a misalignment and also an empty space on the top right of the navigation panel.

What is the expected behaviour?

What is supposed to happen when the bug is fixed?

Responsive page.

Do you know what cause the issue? If yes, can you list or briefly explain.

Explain the cause of the issue

Potentially:

• Content block (choice of travel methods) has a min width which is smaller than mobile window width;
• There is a padding/margin on the left which causes the shift;

Solution (or options to fix the bug)

• Investigate the reason;
• Fix the issue with responsiveness on the page;
• Test on different mobile screens using Toggle device toolbar.

Link to Trello card

I'm submitting a feature request.

What feature do you recommend to add?

Add alt text to all images on the main survey pages:

What is the value of this feature?

• Website will be more accessible for screen readers;
• Improved SEO;

Solution

• Add Alt text to all images on the pages for main survey: https://council-emissions-calculator-spike-flax.vercel.app/
  • results and how we calculate pages are out of scope for this one;
• Test in the browser (ideally also check out some screen-reader plugin);

Link to Trello card

I'm submitting a ...

• bug report

What is the current behavior?

User feedback graph makes the rest of the content less responsive:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

• Open browser and go to https://council-emissions-calculator-spike-flax.vercel.app/results
• Open toggle device toolbar and choose mobile

What is the expected behaviour?

Content of the component is fitted into the window.

Proposed solution

Convert user feedback graph into a different format for mobile screen - potentially create a separate component shown only on mobile;

What is the motivation / use case for changing the behavior?

Not responsive on mobile.

Link to Trello card: here

I'm submitting a ...

• bug report

What is the current behavior?

Sections have different alignment (example - first section is center aligned, top three - is left aligned, etc);

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

• Open browser and go to https://council-emissions-calculator-spike-flax.vercel.app/results
• Open toggle device toolbar and choose mobile

What is the expected behavior?

• each section is center aligned
• each section has the same margins and padding from both sides.

Solution

Change alignment for the section to be consistent of mobile.

What is the motivation / use case for changing the behavior?

Responsiveness on mobile.

Link to Trello card: here

I'm submitting a feature request.

What feature do you recommend to add?

New design/functionality or modification of existing feature

What is the value of this feature?

How it will improve the current view/behaviour

What are the approx. steps to create this feature?

• Step 1
• Step 2
• Step 3

Link to Trello card

Describe the bug
When node is upgraded to latest lts version (v18.12.1), app fails to run locally with npm run dev.

Bug first reported here

The following error msg is displayed on console:

$ npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/hqtan/mememe/civic-makers/ce-calc/.env.local
info  - Loaded env from /home/hqtan/mememe/civic-makers/ce-calc/.env.development
info  - Loaded env from /home/hqtan/mememe/civic-makers/ce-calc/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
[INFO]: NODE_ENV: development
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/hqtan/mememe/civic-makers/ce-calc/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1

To Reproduce
Steps to reproduce the issue:

1. install and use the latest lts version using nvm:

nvm install v18.12.1
nvm use

2. remove node_modules/ folder, and run npm install
3. run npm run dev
4. Should see error message similar to above

Expected behavior
app should run on http://localhost:3000/ when npm run dev command is executed

Environment
should use nvm to set up dev environment for app.

I'm submitting a feature request.

What feature do you recommend to add?

• Add a limit to how many km a person can mention in the travel distance section:
  

• Round the number of digits after decimal point:
  

What is the value of this feature?

• Reduce the chance of making a typo with extra digit which could cause inaccuracy in data calculation.

Solution

• Limit the number to 2 whole digits (or 99 km?);
• Limit the number of digits after decimal point to 2;

I'm submitting a feature request.

What feature do you recommend to add?

Update the readme as the original readme was referring to the project as experiment. Also the way to contribute has changed.

What is the value of this feature?

Create a better experience for new team members in understanding the project and contributing to it.

Solution

Update readme with the following:

• Replace Project Goals with Project description as it's now ready;
• How to Install and Run the Project;
• How to Use the Project;
• How to Contribute to the Project (Collaboration: Working In a Forked Repository is now change and we need to update it: explain that we have two main branches - for staging and prod, and we create PR towards staging);
• Update About section for the repo on top right - it's no longer an experiment;
• Update all links in the README (for example, trello link is pointing to the old Trello board);

Trello card

I'm submitting a feature request.

What feature do you recommend to add?

Add alt text to all images and Highcharts graphs on results page:

What is the value of this feature?

• Website will be more accessible for screen readers;
• Improved SEO;

Solution (or options to fix the bug)

• Add alt text to all images on the results page: https://council-emissions-calculator-spike-flax.vercel.app/
  • survey pages are out of scope for this one;
• Add alt text to Highcharts graphs (this might be a bit tricky, analysis is required and review of documentation for Highcharts: https://www.highcharts.com;

Link to Trello card

I'm submitting a bug report.

What is the current behaviour?

Explain what the issue is including screenshots and/or links. What did you do to get this issue?

What is the expected behaviour?

What is supposed to happen when the bug is fixed?

Do you know what cause the issue? If yes, can you list or briefly explain.

Explain the cause of the issue

Solution (or options to fix the bug)

• Step 1
• Step 2
• Step 3

Link to Trello card