UI update: making people's boxes equal in height

[void-ness]

Hello community members. While navigating through the Publiclab.org website I stumbled upon the people's page. The page is very well drafted. however the div containing each users details are visually not equal in height due to badges assigned to each user. To give you all a better idea, please find attached a photo explanation of the above issue.

An inspection of the above shows that the div are of equal size. but the cards inside it are not utilizing 100% height of their div. proof attached below

This can be fixed by making changes in the stylesheet file. For example I would like to propose we can specify height attribute to "peoplecard" class and its value can be set to 100%. I have attached a reference photo to show how the website will look after making the changes. for the sake of eg, I have specified height attribute to "card" class. In future this can be avoided to prevent unwanted changes across the overall website as class "card" seems to be more general.

I would suggest doing this change to bring about a touch up of symmetricity on the website. Do let me know your thoughts on the same and suggest changes if required. waiting for your feedback. Thank you 😄

[welcome[bot]]

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help. Please follow the issue template to help us help you 👍🎉😄 If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸 Do join our Gitter channel for some brainstorming discussions.

[TildaDares]

Hi @void-ness, this looks really great. Can I see a screenshot of a card with longer tags and one without? Something like this:

[void-ness]

Hey! Glad to know that. Here's the requested screenshot.

(one with longer tags on one card and none on other)

(other examples for reference)

apart from that, I would like to add on if the user names can also be aligned in the same line it will give a better user experience. This misalignment is only in the case where the number of badges are not equal for two adjacent user cards. Here's an example showing the bad formatting due to increased height.

For this, one solution is to update the flexbox alignment values accordingly. Like updating the align items attribute for the flex box can be a good start.

[TildaDares]

@void-ness This looks really great. You can go ahead and open a PR for it. Thanks!!

[rajvidg]

Hello community members. While navigating through the Publiclab.org website I stumbled upon the people's page. The page is very well drafted. however the div containing each users details are visually not equal in height due to badges assigned to each user. To give you all a better idea, please find attached a photo explanation of the above issue.

An inspection of the above shows that the div are of equal size. but the cards inside it are not utilizing 100% height of their div. proof attached below

This can be fixed by making changes in the stylesheet file. For example I would like to propose we can specify height attribute to "peoplecard" class and its value can be set to 100%. I have attached a reference photo to show how the website will look after making the changes. for the sake of eg, I have specified height attribute to "card" class. In future this can be avoided to prevent unwanted changes across the overall website as class "card" seems to be more general.

I would suggest doing this change to bring about a touch up of symmetricity on the website. Do let me know your thoughts on the same and suggest changes if required. waiting for your feedback. Thank you 😄

Hey! is this issue open? and if yes, can I contribute to it? Please let me know. :)

[rajvidg]

Hello community members. While navigating through the Publiclab.org website I stumbled upon the people's page. The page is very well drafted. however the div containing each users details are visually not equal in height due to badges assigned to each user. To give you all a better idea, please find attached a photo explanation of the above issue. An inspection of the above shows that the div are of equal size. but the cards inside it are not utilizing 100% height of their div. proof attached below This can be fixed by making changes in the stylesheet file. For example I would like to propose we can specify height attribute to "peoplecard" class and its value can be set to 100%. I have attached a reference photo to show how the website will look after making the changes. for the sake of eg, I have specified height attribute to "card" class. In future this can be avoided to prevent unwanted changes across the overall website as class "card" seems to be more general. I would suggest doing this change to bring about a touch up of symmetricity on the website. Do let me know your thoughts on the same and suggest changes if required. waiting for your feedback. Thank you 😄

Hey! is this issue open? and if yes, can I contribute to it? Please let me know. :)

I am an Outreachy applicant and an UI/UX designer and front end web developer, please let me know the details regarding this issue.

[void-ness]

@void-ness This looks really great. You can go ahead and open a PR for it. Thanks!!

Thank you so much for the go ahead. I am more than happy to work on it. I would like to mention one more issue related to this. In the people page, each card of a user can show at most 3 badges in the current GUI. Here attaching an image for reference.

(Here the number indicates the count of badges shown)

Therefore if a viewer intends to view what all badges a person has, he needs to click on a user's card which then opens up a new webpage showing more details about the user.

I have a suggestion regarding the same. A graphical object can be added in the UI, hovering over which will popup the details about the other badges of the user. Here attaching a screen snap for an idea.

Something on the lines of above can be worked out. With this I have noticed, through this open issue, a collection of sub issues have been raised, and it will be difficult to address them in a single PR. keeping that in mind, I have included these issues to be a part of my GsoC proposal. You can find it over here. I would love to know your thoughts about the same.

Rest assured I will be more than happy to work on the above mentioned issues whole heartedly.

[void-ness]

Hello community members. While navigating through the Publiclab.org website I stumbled upon the people's page. The page is very well drafted. however the div containing each users details are visually not equal in height due to badges assigned to each user. To give you all a better idea, please find attached a photo explanation of the above issue. An inspection of the above shows that the div are of equal size. but the cards inside it are not utilizing 100% height of their div. proof attached below This can be fixed by making changes in the stylesheet file. For example I would like to propose we can specify height attribute to "peoplecard" class and its value can be set to 100%. I have attached a reference photo to show how the website will look after making the changes. for the sake of eg, I have specified height attribute to "card" class. In future this can be avoided to prevent unwanted changes across the overall website as class "card" seems to be more general. I would suggest doing this change to bring about a touch up of symmetricity on the website. Do let me know your thoughts on the same and suggest changes if required. waiting for your feedback. Thank you 😄

Hey! is this issue open? and if yes, can I contribute to it? Please let me know. :)

Hey! I would love working with you to solve the above mentioned issue. Do you mind helping me out? I am currently struck at locating the Cascading style sheet for the page in discussion. Can you help me with its file path in the repository?

[nawed2611]

Hey, Can I work on this issue?

[TildaDares]

Hi @nawed2611, please go ahead! Feel free to reach out if you need help. Thanks!

[nawed2611]

Thanks for the quick reply!

[NPDebs]

Hi @nawed2611, please go ahead! Feel free to reach out if you need help. Thanks!

Hi @TildaDares 👋🏼 If this is still available, I'd love to work on it, please.

[TildaDares]

Hi @NPDebs, please go ahead. Thank you!

[NPDebs]

Hi @NPDebs, please go ahead. Thank you!

Thank you very much, @TildaDares. I'll revert to you soon.

[FrancoFrancis]

Hello @TildaDares can I go ahead to contribute to this issue? THANKS

[TildaDares]

Hi @FrancoFrancis, @NPDebs is already working on this. Maybe you could ask them if they need assistance.

[FrancoFrancis]

Hi @FrancoFrancis, @NPDebs is already working on this. Maybe you could ask them if they need assistance.

ok thanks

[FrancoFrancis]

@NPDebs do you need some help?

[NPDebs]

@NPDebs do you need some help?

Hi @FrancoFrancis 👋🏼 Thanks so much for offering. 🙏🏼

I've been battling lots of errors trying to get setup (using gitpod).

Here are some screenshots to help put things in perspective...

[NPDebs]

@NPDebs do you need some help? @FrancoFrancis I attempted it now, to get these screenshots. Have a look, please.

Thank you...

[FrancoFrancis]

i think the community is the best place to have this conversation so other people can learn or help out too.