UI Mobile vs Desktop Enhancement

[Rodelph]

Hey guys. We have an issue with mobile not being able to display the card correctly due to the current UI.

The issue is that the current version is overwhelmed by buttons (you have to scroll down to see the searched card) (Mobile Homepage). I believe we should work on a fix where the change should not affect the user experience nor the PC version Mobile Search.

In my opinion, for mobile we should have something like this. With this design, the user has always the ability to search for word, and this will pop up in an area where he can see it. As for the buttons, we should have a slide left or tap the 3 lined area option to have access to the links and buttons. This will make the user experience much better than what is currently is where this user has to clear the search in order to do something else.

I don't know if this is possible with Astro. Maybe one of our UI experts or web devs can give us their opinion ?

What do you guys think about this ? Looking forward to your feedback, maybe someone has a better solution.

[RayMathew]

Agreed on the proposed behaviour.

Astro is merely a framework, we should be able to create pages / components in any way we want.

I look forward to hearing if others have different proposals for the behaviour.

[Buzzpy]

Agreed on your idea, @Rodelph!
It would make it better and more accessible.

On a side note, I'll make a PR and merge the develop branch now, since the button-disappearance bug should be fixed immediately.

[Rodelph]

Hey guys. Regarding this issue i have done some research and stumbled on this article and you can test it live here. What do you guys think ?

[RayMathew]

Looks good to me. And I see 2 more folks agree with the proposed approach.

[Buzzpy]

@Rodelph, sorry for the late reply! I thought I had already replied to this.

And that approach looks great to me too. Have you started working on it?

[Rodelph]

Hi @Buzzpy. All good, no need for the hurry. I haven't yet since i am busy with some exams, and work. I will have a lot of time on my side starting from 6th of September and i will work on it on top of other things. If someone wants to give this a try I will be more than happy to see the results, otherwise it might wait a bit :(.

[Buzzpy]

Oh, I'm sorry and that's totally fine! Please don't feel any pressure, studies and work should always be first! 🚀
Please don't worry about what's happening here, and I'll give it a try soon too.

Good luck with your exams! All the best 🍻

[Rodelph]

@Buzzpy @RayMathew Hi guys. I hope yall doing well. I have managed to enhance the UI for mobile version. It is compatible with all screen size (i have set a screen size of 768px to be the max to have that burger button at the top instead of the classic version (desktop buttons) in order to access links and navigate through the page. The reason why i did this is because tablets have large screen size so it shouldn't be an issue (IMO) for them to press the buttons instead of having the burger button for navigation. Do you guys think this approach is good ? Do i need to do something else to make it better ?

[RayMathew]

Hey that looks amazing @Rodelph . @Buzzpy is there any way we can test this? Maybe by pushing to dev branch and deploying? I'm concerned about making a few CSS adjustments, but I'd need to see it in my own screen first.

[Rodelph]

I saw that there is a PR open regarding dark mode. I will open a PR once that one is merged/closed. @Buzzpy @RayMathew

[Buzzpy]

@Rodelph that looks great! I closed the above PR, so now you can open a PR for this.

[Rodelph]

@Buzzpy Thanks for the update. I have deployed a test from the branch i currently work on. You can try it here using ur phones or F12 then select device.

I will pull the changes tomorrow and modify what is needed. Do test then create the PR.

See ya till then. :)

[RayMathew]

Hey, so I had a look at the link.

1. The padding on the right side of the menu is not enough. It should be equal to the left side.
2. The expanding animation should be used for the menu alone, and not the text. It doesn't look good for the first quarter or so of a second where all the letters look crushed, before they expand to full size. (This is just my opinion).
   How to fix: Expand the menu with the animation, make the animation slightly faster and reveal the text only after the menu has finished expanding.