Habitica: Pets and Mounts in the Stable need margin updates

[Tressley]

Should have ~24px between each Pet/Mount.

Current

Designed

If you would like to work on this issue, please comment an email address to be invited to our Zeplin project.

[Alys]

I've added the "help wanted" label. @Tressley that's the best way to ensure contributors will consider working on an issue. :) I've also adjusted the priority. We use "important" for problems that seriously impact the usability of the site or API.

[Tressley]

@Alys -- I knew I was missing something! Thank you!

[mandyzhou]

I remember a previous iteration of the website having the larger margins between pets. When the margins were reduced/removed, I assumed that was to prevent pets of one type from breaking across multiple rows and welcomed the change.

[JustinHurt]

I would like to work on this. Email is [email protected]

[Alys]

Thanks @JustinHurt! It's yours. Comment here if you have questions.

@mandyzhou made a good point. It's important that each row of pets doesn't wrap to a new line on browser windows set to a reasonable width. My personal feeling is that as a rough guild, if you're using a browser full screen on a 13in laptop, the rows should not wrap. I think it's acceptable to wrap on very small window/screen widths.

[seekheart]

What's the status of this issue? If it's still open I'd like to help with the template :)

[lemoness]

@JustinHurt Are you still working on this issue?

@seekheart Let's wait a few days for a response. In the meantime, you can check out the help wanted tag to see some of our other issues :)

[seekheart]

@lemoness alrighty, I'm gonna take this time to learn some vue :)

[seekheart]

@lemoness do you wanna put a verdict?

[lemoness]

@seekheart It's yours!

[seekheart]

@lemoness thanks, I was checking out the code and was wondering how does the class item work? I noticed it isn't scoped in the styles so does it propagate from some main component's scss? Additionally I'm trying to find where the margin: .5em; lives xD

[seekheart]

@lemoness @Alys PR is ready whenever you guys are.

[paglias]

Fixed in #9656

[Tressley]

I am re-opening this as it was not corrected following the instructions listed in the opening comment. The gutters should be ~24px between pets. We also want to prevent the first and last item in a row from being offset by zeroing out their margins accordingly.

[seekheart]

@Tressley if it was ~24px margin the pet slots would be really far apart though...

[Tressley]

@seekheart -- I understand. This is more of a responsive design issue and how we handle that moving forward (for the left column as well.) The rows break down fairly early (1280px). I've outlined a skeleton for how I think the margins should adjust given screen size.

Desktop XL (1440) - 24px;
Desktop L (1280) - 6px;
Desktop (1024) - 12px;
Tablet (768) - 24px;
Mobile - 24px;

[seekheart]

@Tressley should responsive design be a separate child issue of this one?

[Tressley]

@seekheart -- Probably. In the mean time, the correct fix should be updating the margins to 6px (most users are at 1280 resolution) and ensuring that the first and last item in a row have their margins zeroed properly.

[TheHollidayInn]

@seekheart if you want, you can use media queries to set the breakpoints that Tressley has mentioned above. Be sure to convert the px to ems for responsive design though.

[beffymaroo]

@seekheart Are you still working on this issue? Please let us know. Thank you!

[seekheart]

@beffymaroo all yours homie

[beffymaroo]

@seekheart I will not be working on it myself, but thank you for the update. I will open it up so others know it's available.

[yb50110]

@Tressley Would this be the right CSS in item.scss:

.item.pet-slot {
  margin: 0 24px;

  @media only screen and (min-width: 1024px) {
    margin: 0 12px;
  }
  @media only screen and (min-width: 1280px) {
    margin: 0 6px;
  }
  @media only screen and (min-width: 1400px) {
    margin: 0 24px;
  }
}

[csgray]

Is anybody working on this? If not, I think I can knock it out now that my dev environment is stable. I don't think the responsive design should be difficult. [email protected]

[csgray]

A bit premature, as no one has approved my request to work on this, but I have a class assignment to submit a PR to an Open Source project and would rather work on one that I care about. That said: If we don't use my code because of it, I totally understand. I also haven't figured out yet where to remove the left margins from the first items and the right margins from the last items, so if someone could point me in the right direction I'd appreciate it.

[paglias]

@csgray sorry for the late response here but you can work on this!