ChrisMichaelPerezSantiago/ryuanime

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

ChrisMichaelPerezSantiago opened this issue Β· 13 comments

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 commented

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!

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.

πŸ†• 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 commented

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

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 commented

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

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 commented

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

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 commented

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.

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 commented

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

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!