search

polubis / 4markdown

11 stars 1 forks source link

Add mentoring page #42

Open polubis opened 5 months ago

polubis commented 5 months ago

Context

Our platforms grows. With 400-1000 daily visits, we want to add mentoring program page. On this page, we'll display different plans, with nice looking UI.

Definition of done:

  1. There is a version with en/pl.
  2. No typos, grammar mistakes for both languages.
  3. There is no weird user interface behaviors on desktop/mobile
  4. Works on iPhone 12 and iPhone 8 without problems.
  5. There is a new link in navigation:

Image Image Image

  1. The page have URL -> /mentoring for english and /pl/mentoring/ for pl version
  2. Looks according to the design for desktop:

Image

  1. Work well and looks well on mobile devices - 320px width +.

Image

  1. After click [PARTICIPATE_BUTTON] there is a modal with info

Image

  1. After clicking [BUY_BUTTON], there is a similar modal, but with different text inside.
  2. Both modals doesn't have typos, grammar mistakes.
  3. Modals can be closed via "X" icon or clicking on backdrop outside.
  4. After scrolling, the movement of dots outside is triggered randomly
polubis commented 5 months ago

I finished work, please test it at https://rainbow-pegasus-c779b6.netlify.app/mentoring/ and give feedback.

KaminskiKrzysztof commented 5 months ago

While conducting tests on the mobile version of our website using my iPhone 12 Pro Max, I encountered a significant issue that could potentially frustrate users. The problem arises when attempting to open modals after scrolling down the page. Occasionally, upon clicking the buttons designed to trigger the modals, the interface freezes, requiring two or even three clicks to successfully open the modal. This issue persisted both on my physical device and in the developer tools' simulation of the iPhone 12 Pro. Attached is a video demonstrating the problem, showcasing instances where I had to repeatedly click the button before the modal finally appeared. I have made sure that the delays captured in the video are not due to connection issues affecting the opening animation; rather, they represent genuine delays in modal activation. If you pay attention to the buttons you can see that I have clicked them many times before they finally opened. It happens on both English and Polish language versions

https://github.com/polubis/4markdown/assets/159806817/564509d3-e4a4-4e7a-8db7-e0c97cc9178d

Definition of done 1 Users should be able to effortlessly access a text modal with just one click after scrolling through the page. 2 Upon clicking the "BUY" button once, the text modal promptly appears. 3 The modal can be easily closed by either clicking the "X" button or clicking outside the modal on the backdrop.

MajaWielechowska commented 5 months ago

Definition of done:

  1. There is a version with en/pl. 💚
  2. No typos, grammar mistakes for both languages. 💚
  3. There is no weird user interface behaviors on desktop/mobile 💚
  4. Works on iPhone 12 and iPhone 8 without problems. 💚
  5. There is a new link in navigation 💚
  6. The page have URL -> /mentoring for english and /pl/mentoring/ for pl version 💚
  7. Looks according to the design for desktop. 💚
  8. Work well and looks well on mobile devices - 320px width +. 💚
  9. After click [PARTICIPATE_BUTTON] there is a modal with info. 💚
  10. After clicking [BUY_BUTTON], there is a similar modal, but with different text inside. 💚
  11. Both modals doesn't have typos, grammar mistakes. 💚
  12. Modals can be closed via "X" icon or clicking on backdrop outside. 💚
  13. After scrolling, the movement of dots outside is triggered randomly. ❤ Movement of dots in the background doesn't change with every scroll, their movement usually stutters on every other scroll:

Image

MajaWielechowska commented 5 months ago

Context When I'm on the mentoring program page and I attempt to switch the language, I'm automatically redirected to the home page. This behavior occurs in both language options. Such functionality may pose inconvenience for users.

Image

Definition of done

  1. There is the possibility to change the language from pl to en and vice versa on the mentoring program page,
  2. After switching to either language, the mentoring program page remains visible in changed language.
KaminskiKrzysztof commented 5 months ago

Definition of done:

1- There is a version with en/pl. ✔ 2- No typos, or grammar mistakes for both languages. ✔

3- There are no weird user interface behaviors on desktop/mobile ➖ 4- Works on iPhone 12 and iPhone 8 without problems. ➖ for context, I've described the problem above (in added comment)

5- There is a new link in the navigation. ✔ 6- The page have URL -> /mentoring for english and /pl/mentoring/ for pl version ✔ 7- Looks according to the design for desktop. ✔ 8- Works well and looks well on mobile devices - 320px width +. ✔ 9- After clicking [PARTICIPATE_BUTTON] there is a modal with info. ✔ 10- After clicking [BUY_BUTTON], there is a similar modal, but with different text inside. ✔ 11- Both modals don't have typos, grammar mistakes. ✔ 12- Modals can be closed via "X" icon or clicking on backdrop outside. ✔ 13- After scrolling, the movement of dots outside is triggered randomly. ✔