Mejora de UI/UX

[gmartincor]

Card Height Adjustment and Layout Refactor with Flexbox

Pull Request Description

This PR fixes the content overflow issue in cards caused by using height instead of min-height. It also introduces improvements in element distribution to ensure responsive design and uniform card alignment.

Fixes and Improvements

1. Card Height and Overflow Fix:

   • Replaced height: 178px with min-height: 178px to prevent content overflow when information exceeds the default height.
   • Added flexible properties to each card container to adjust dynamically to the content while maintaining a minimum height.

2. Main Container Refactor with Flexbox:

   • Applied display: flex; flex-wrap: wrap; gap: 20px; to .to-member-cards to ensure uniform card distribution and correct placement in rows when multiple columns are present.
   • .to-member-card__wrapper now defines consistent widths on both large and small screens, improving responsive design adaptability.

3. Vertical Distribution and Internal Organization:

   • Each card (.to-member-card) uses display: flex; flex-direction: column; to organize its content vertically with justify-content: space-between in the body.
   • This ensures that the header and content are evenly spaced and do not overlap with the card's bottom.

4. Responsiveness Improvements:

   • Media queries were adjusted so that cards occupy 100% of the available width on small screens.

5. Minor Visual Changes (Optional):

   • Added border-radius to the cards to round corners and unify the style.

Summary

• Main Goal: Prevent content overflow by using min-height instead of height.
• Additional Improvements: Adapt the layout to Flexbox for better responsive design and uniform card structure.
• Visual Changes: Minor style adjustments to enhance aesthetic cohesion.

With this update, cards behave correctly on different screen sizes, prevent content overflow, and maintain a consistent appearance throughout the overall design.

[gmartincor]

El primer commit es solo la configuración del archicvo docker-compose.yml. Hice commit y se me olvidó borrarlo.

Un saludo!

[franpb14]

Hello Guille, first of all, welcome and thank you for wanting to contribute! It's great to see you here 😉!
I think you have made a good pull request description, however, there are certain things to improve:

• We don't use Spanish, it is like that so everyone from everywhere can understand us and even collaborate in an easier way
• It would be good a better title trying to be more descriptive, although it should be short (good practices say no more than 50 chars)
• It's better to do an understandable code than writing comments, comments should be used in really complex code

About the code I'll do a fast review now, but I'd like to check it in more depth later.

[markets]

Bienvenido @gmartincor! Encantados de tener más ayuda en este proyecto 💪

Algunas notas:

• En general es buena idea mandar pull requests lo más pequeños y focus posible, así es más fácil revisar, testar, preparar release, ... Creo que el tema del orden deberíamos quitarlo, no tengo claro cual es el problema actual.
• El actual docker file es más bien para producción, igual algun día (o no jeje) hacemos uno oficial para desarrollo, pero por ahora lo mejor es no commitear cambios en ese file, ya que podría romper la instancia de pro. En realidad esta app es tan senzilla que hasta sin docker es fácil/directo correrla en cualquier sistema basado en UNIX.
• En estas discusiones no hay problema en usar cualquier idioma, pero en el code si usamos siempre english, tb los comentarios (en caso que aporten valor, sino casi mejor ✂️). Tengamos en cuenta que ocasionalmente hemos recibido contribuciones de diferentes países.

Saludos 👋👋

[gmartincor]

Hello!! Thanks so much for your time and attention. I'll get right on those corrections. 😁

Always a pleasure!

Best regards!! 👋👋

[markets]

Hello @gmartincor I think we should also revert the second point:

2. Reordenamiento de miembros en la aplicación (users_controller.rb)

Not sure what problem are you trying to solve here, IMO the current default ordering and sorting is fine (it took us some time to reach the current behavior, see this thread #495 for more information).

[gmartincor]

Hello @markets , I thought it would be a good idea for administrators to appear first by default in the user list when opening the site for the first time, so that the rest of the members can have easier and more intuitive visual access to them, while maintaining the order based on the last connection for both administrators and the rest of the members.

[markets]

Sorry @gmartincor 🙏🏼 but I don't agree with that. IMO we should revert that change.

In general, it's a good idea to use each branch/PR for one single thing, that's the easiest way to move forward. I think we should use this branch to fix only this issue #729. And if we want to change the default ordering, it will be better to discuss it before and in another thread. Focused branches are the best 👌🏼 for everybody (developer, reviewer, tester, releaser, product).

[franpb14]

Hey @gmartincor let's do it as @markets said and focus only on that issue. Nevertheless, I'm going to take the opportunity to give you a few more tips.

[gmartincor]

Hello @markets , this is my first time participating in an open-source project, and I'm still in the learning phase . Thanks to you and @franpb14 for your patience and interest, and for giving me advice for future contributions 😁.

Best regards!

[markets]

Hello 👋 @gmartincor Welcome to the wonderful world of open source! It helped me a lot to grow as a developer and I still learn new things everyday after more than 10 years doing so 🙌

Hope we can help you too with those code reviews and discussions, they are always very useful.

PS sorry 🙏 we are still using a very old Bootstrap version, I just created a new issue (#766) to migrate to a newer version some day

[gmartincor]

"Hello @markets , yesss!! My intention is to collaborate while I continue learning and growing as a developer. Thank you very much for your support. I still don't have much experience with Bootstrap, but I would like to carry out the migration to the updated version if it is possible 😁.

[franpb14]

right now when someone has a long description this is happening

Not only the card has a bigger size than the other but it also creates a gap

[markets]

@gmartincor after all those changes, we're still not fixing the original issue (#729). Actually, the current diff in this branch:

• added some border-radius
• removed a class that breaks our test suite (Please don't forget to run the tests! bundle exec rspec)

I still think we should focus on fix/improve the issue described in #729. Small steps is the way to go.

[franpb14]

Sorry the delay 🙏. I think it's okay. However, it'd be good to check with @markets if the changes and the different sizes that can have a card are okay. It would be good if you share a screenshot with those cases.

[gmartincor]

Hello!! I have corrected what was mentioned in the previous comment. After applying the mentioned correction, the cards appear exactly as shown in the attached image. Thank you very much!! 😊

[markets]

@gmartincor Let me ask for a couple of things before completing the code review and testing:

• Please please 🙏🏼 revert all unnecessary diff, there are a lot of unrelated changes. Sorry to be picky with that, but that's really important to minimize reviewers work and keep a clean Git history.
• Would be nice if you can update the PR title and description to reflect actual changes.

[gmartincor]

Hello! 👋 @markets ,Thank you very much🙏 for the time you and Fran are dedicating to reviewing my code and comments. I’m sorry for sending so many commits, and I really appreciate your patience. This process has been a great learning experience for me.😀

Initially, I tried changing only the height value to min-height, but since the cards have different contents, their heights were also different, creating a lot of space between them and negatively affecting their visual appearance.

To solve this problem, I had to make more modifications. I have edited the Pull Request (PR) description where I explain these changes in more detail.

Thank you again for your understanding and support.

Best regards!!👋👋

[markets]

No prob @gmartincor! We're really happy to have more help in this project 👏🏼

Please don't forget about this point:

Please please 🙏🏼 revert all unnecessary diff, there are a lot of unrelated changes. Sorry to be picky with that, but that's really important to minimize reviewers work and keep a clean Git history.

[gmartincor]

Hi!! The changes in the application.scss file were uploaded by mistake. I believe this happened due to an automatic configuration I have installed that I need to review and adjust.

Finally, I removed the changes from that file and restored it to its original state.