Habitica: Skills Layout is a bit off

[SebastiaanNijland]

General Info

• UUID: 2f3f22af-3abf-4236-bf9e-67ff88051df9
• Browser: not browser specific
• OS: not os specifc

Description

As you can see in this screenshot, the text of the skills is aligned to the bottom, while it would be nicer to have it aligned in the center:

On certain screen sizes, there are also issues with the text and the mana cost symbol overflowing, that could be fixed by using some flexbox styles to align it in the center:

[SebastiaanNijland]

Note that I'd like to work on this myself if that's okay :)

[Alys]

This is something @Tressley might like to comment on so I've marked it with the design on hold label.

[Tressley]

@SebastiaanNijland -- Thanks for wanting to pick this up. I've made some revisions to the design and added them to our Zeplin project here: https://zpl.io/aMjPv5m

Please let me know if you have any questions.

[SebastiaanNijland]

Nice design, it looks awesome! I will take a look at it, hopefully I will find some time for it this week or next week!

[SabreCat]

@SebastiaanNijland Are you still planning to work this one? Let us know if you won't have a chance--we've got a volunteer sprint coming up that'll be eager to pick up stray issues.

[SebastiaanNijland]

I fear I won't get around to this at the moment, so that's fine with me!

[jaimeparrajr]

Hi, can I help with this item?

[Alys]

@jaimeparrajr Thank you, yes! Please go ahead and post here if you have questions.

[jaimeparrajr]

Thank you. How can I get access to the new design?

[Alys]

@jaimeparrajr Post your email address here and tag @ Tressley or if you'd prefer to not make your email address public, send an email to [email protected] and include your GitHub username and this issue's URL.

[Tressley]

Invite sent @jaimeparrajr!

[shanaqui]

@jaimeparrajr Hi there! Are you still interested in working on this one? Let us know!

[shanaqui]

@jaimeparrajr I've marked this as help wanted again for now, but if you do want to pick it up again, let us know!

[dabrowskif]

Hi, I would like to participate in the Habitica and I chose this for my first bugfix. I've already sent a mail - you can invite me to Zeplin project, so I can look at a new design that was made by Tressley.

[Alys]

@dabrowskif Fantastic, thanks! I've marked this as in progress for you. I've found your email and passed on your email address to Tressley and the other staff. :)

[Tressley]

Invite sent! Here's the Zeplin artboard to reference: https://zpl.io/aMjPv5m

[shanaqui]

@dabrowskif Hi! Are you still interested in working on this issue? If not, or if we don't hear from you within seven days, I'll mark this issue as "help wanted" again just to make sure it doesn't go stale!

[dabrowskif]

@dabrowskif Hi! Are you still interested in working on this issue? If not, or if we don't hear from you within seven days, I'll mark this issue as "help wanted" again just to make sure it doesn't go stale!

Yes, ive got stuck at one moment and currently i don't have time to solve it, i hope ill move forward next week.

[shanaqui]

No worries! :) I'll leave this as in progress for you.

[shanaqui]

@dabrowskif Just checking in again to make sure this issue doesn't go stale! Are you still planning to work on this? If not, or we don't hear from you within a week, I'll mark it as help wanted again.

[SabreCat]

@paglias and I poked at this a little in the context of @JalanshMunshi's recent PR, but it's still proving thorny..

[shanaqui]

@dabrowskif Since I didn't hear back, I'm marking this as help wanted again. You can let us know if you want to pick it back up later, of course!

[raghavchugh21]

I'll work on this issue!

[Alys]

@raghavchugh21 Thanks! I've marked it as in progress for you. Post here if you have questions!

[Tressley]

Hi @raghavchugh21 -- Please provide an email address to receive a Zeplin invite. Zeplin is how the platform we use for design hand-off to contributors.

[raghavchugh21]

Here's my email - [email protected]

[raghavchugh21]

Starting my work on the issue, kindly share the acceptance tests.

[paglias]

@raghavchugh21 what do you mean by acceptance tests?

[raghavchugh21]

@Tressley @paglias Can you point out your requirements from this issue once more?

[paglias]

The requirements are to change the Skills Layout to match the design that you can find here on Zeplin https://app.zeplin.io/project/59c16a1433075573feaa48fb/screen/5dadbe46c02f1e83270ec082

[raghavchugh21]

@paglias Great. Working on this right away!

[Tressley]

@raghavchugh21 -- Please take a look at #10618 as it overlaps with this issue.

[raghavchugh21]

thanks for letting me know! I'll include the fixes for both issues in my PR.

[raghavchugh21]

Also, could you help me with where do I find the Skills Layout designs in Zeplin.

[paglias]

@raghavchugh21 they're here https://app.zeplin.io/project/59c16a1433075573feaa48fb/screen/5dadbe46c02f1e83270ec082

[VipulKhandelwal1999]

Hi @Tressley @paglias I have worked on this issue. I am able to come up with a solution and fixed at my local setup.

--> Screenshots Of Issues Right Now:-

Desktop View:-

Ipad View:-

--> Screenshots After I Have Fixed These Issues:-

Desktop View:-

Ipad View:-

The reason why i think that this layout is perfect as per your layout it is not possible for text earthquake in skill card to get fit into the skill card just beside its logo as you can see below. If you will minimize your window a little bit the text will get overlapped with the div containing diamond as you can see below.

Please tell me what do you think if it's perfect then i will work on it and will send PR ASAP.

[VipulKhandelwal1999]

Hi @Tressley I am not @raghavchugh21 .Please give me access of your designs so that i can implement them ASAP.
My email id is khandelwal.[email protected]

[Tressley]

Hi @VipulKhandelwal1999 -- Thank you for your interest! This issue is currently being handled by @raghavchugh21. If @raghavchugh21 is unable to continue working on this issue, it will be open for you to claim.

[VipulKhandelwal1999]

Ok @Tressley .Thanks for your response.

[raghavchugh21]

I would like to hand over this issue to @VipulKhandelwal1999

[VipulKhandelwal1999]

Thanks @raghavchugh21

[VipulKhandelwal1999]

Hi @Tressley @paglias .Please assign this issue to me and please provide me the access of your designs as well so that i can work on it ASAP. My email id is khandelwal.[email protected]

[shanaqui]

@VipulKhandelwal1999 Hi! Did you get everything and get chance to get started on this? I'm just checking in to make sure the issue doesn't go stale -- if you're not working on it anymore or you don't reply within a week, I'll mark it as Help Wanted again. :)

[VipulKhandelwal1999]

@shanaqui Hi! I am working on it. I have completed most part. Now i am just refactoring the code to avoid redundancy, etc.

Zeplin's Design Of Skill Section:-

This is the output of my code same as the mentioned in zeplin's design.

Close Snapshot of skills section:-

[shanaqui]

Thanks for checking in!

[VipulKhandelwal1999]

@paglias i will work on this again while keeping in mind all the things which you have mentioned in the previous PR.

[VipulKhandelwal1999]

@paglias i am working so hard on this. I just wanna know few things because i am new to open source. What must be the size of the drawer containing all the skills. So basically i just wanna know that whether i have to keep same dimensions mention on Zeplin or i can change little bit.
And how can we fix eslint errors.
Please help me out....

[Tressley]

@VipulKhandelwal1999 -- Zeplin contains the approved design specifications for implementation. Your goal should be to have implementation be as close to the design as possible. If there are questions you have about the design or how to achieve certain design pieces, feel free to ask.

[VipulKhandelwal1999]

@Tressley Thank you very much. Now i will be able to send you PR ASAP.

[paglias]

@VipulKhandelwal1999 the only thing I'd not implement from the zeplin design is the exact with of the drawer as it should get calculated automatically based on the items inside it. Also it's very difficult to work without seeing the code so my suggestion is to push the PR even if you can't fix some issues and we can work on it from there. The eslint errors usually have a description with what's wrong, but in this case as well it's very difficult to understand what's wrong without seeing the code

[VipulKhandelwal1999]

@paglias Thank You very much. Now, I have all my doubt resolved. Now i can work efficiently. Hope i could meet your expectations