Improve the UI for the Ryuanime web version [FOR CONTRIBUTORS]

[ChrisMichaelPerezSantiago]

Hello contributors,

I have plans to improve the user experience regarding the UI. The current version is a pre-alpha. It is functional but needs drastic design changes. Any idea in mind can let me know and I will gladly give it my approval.

CSS Framework in use Tailwindcss

Changes to be made

• The first thing that could be done is to change the style of the navabar.
• Improve the UI of the video section.

Things to keep

• Anime cards will be left as they are.
• The violet color will remain as the main color.

📣These UI changes must be responsive for the desktop version (electron)📣

[kinow]

I'm using Vuetify and Material, but learned about Tailwindcss after using vue-ads-table-tree and have been wanting to have a chance to try that. So +1 on that!

[ChrisMichaelPerezSantiago]

Hi @kinow
This pull request #68 was merged to the master branch correctly.

Things to correct [PHONES ONLY]

• Layouts for phone versions slightly out of order. In other words, the width of the anime cards does not fit the width of the screen. In the same way it happens in the section of the videos.

• That can be corrected using media rules, is used in media queries to apply different styles for different media types / devices.

[ChrisMichaelPerezSantiago]

🆕 Contributor
🎉 Congratulations @kinow, you were added as one of the contributors to the project. 🎉

Very grateful that you can be part of the team, and contribute your ideas and knowledge.
You can check the README in the Contributors section

[kinow]

Thanks @ChrisMichaelPerezSantiago ! Will spend some time reading Tailwind docs (thanks for the tip on media rules) and try to fix it for mobile.

[ChrisMichaelPerezSantiago]

Hi @kinow ,

I will be starting another project related to anime streaming. But the content is all in Spanish. If you want you can help me. All the code is in English, but everything the user sees (UI) will be in Spanish.

https://github.com/ChrisMichaelPerezSantiago/horizon-animax

[kinow]

Hi @ChrisMichaelPerezSantiago

I am interested! Haven't practised Spanish in a long time, so it might be a good chance to practice both Vue & learn some more Spanish :-) - plus maybe find something interesting to watch.

Count me in

[ChrisMichaelPerezSantiago]

Hi @kinow

This pull request #74 was merged to the master branch correctly.

I liked the idea of creating the AnimeListing component, which is very useful because it is a dynamic component that is attached to the necessities of use.

Excellent contribution 💯

[kinow]

Thanks @ChrisMichaelPerezSantiago! Will now have a go at the pagination and the responsive (mobile) layout.

[ChrisMichaelPerezSantiago]

Hi @kinow

This pull request #75 was merged to the master branch correctly.
My mistake was only to return the data and not the whole object, which I have access to the total pages.

Excellent observation and contribution 💯

[kinow]

Thanks @ChrisMichaelPerezSantiago ! Now the responsive part will be a challenge. Still a newbie with Tailwind, so I may need some help to spot what classes and other styles need adjusting.

[ChrisMichaelPerezSantiago]

Hi @kinow

This pull request #87 was merged to the master branch correctly.

The problem of keeping the UI responsive to phone versions is corrected, and the scrollbar issue has been corrected.

Thank you very much for the effort ..

[kinow]

Great news @ChrisMichaelPerezSantiago ! Thanks! Now will start having fun with the Horizon Animax

[ChrisMichaelPerezSantiago]

FOR THE CONTRIBUTORS.

We have already reached the point where everything we had to do was defined and implemented.

Now I will take care of the deployment, so that the changes are seen. Besides, I will also be applying the changes to the desktop version, I will be uploading from alpha to beta version.

From this point, those who want to contribute something else will be more than welcome.
For now I will personally focus on the Horizon Animax project

❤️ Excellent work!