Habitica: Awkward whitespace in Magic Potion Pets/Mounts sections

[mandyzhou]

General Info

• Browser: Chrome 52.0.2743.116 m
• OS: Windows 7

Description

In the Magic Potion Pets section of the Pets page, there's an awkward amount of whitespace between the heading and the actual pets. A similar issue occurs on the Mounts page. Note that the only magic potion pets/mounts I have are the Thunderstorm ones. See screenshot below:

[tricksyfox]

This is somewhat separate, somewhat related, but it really bothers me that the flying pig is so much higher up on the lineup than the rest of the pets. I get that it's "flying", and it doesn't bother me when it's equipped, but it throws off what is otherwise a very lovely line.

[vickyRuiz]

The reason these pets are so far from the title is because there are 2 invisible rows of pets in between. I'm not familiar enough with the app to say why they're invisible however: were they not developed? Are they not being loaded the right way? They're the spooky, floral and peppermint pets.

[tricksyfox]

I have a floral pet, so the white space is less for me. But in theory the space shouldn't exist unless the user has those pets, right? Or there should be paw prints like there are for the quest pets, as placeholders?

[Alys]

So far, hatching potions for four types of Magic Potion pets and mounts have been released. We don't want to show paw prints for each set unless the user already has at least one pet for that set (and then show the full row of paw prints for both pets and mounts of that type). The website is doing that correctly except that when it hides the row of paw prints, it seems to be not hiding some whitespace that above/below the paw prints.

If this is a fairly easy fix, it's worth doing now, but if it's complicated (e.g. requiring a rewrite of how that section of the page is built), it might be best to leave it for an upcoming website redesign project.

If someone would like to work on this, you're welcome to start and post here to say that you're doing so (so that only one person takes this up), but I recommend reporting back with your findings and intentions for a fix before you start doing the fix. If the fix is complex, it's possible that we'd reject a PR for it, so discussing it first will prevent your time being wasted.

The flying pig being higher than the other pets isn't part of this issue and shouldn't be included in the fix. @tricksyfox It's deliberate and is a direct effect of how the flying effect is implemented, and my personal opinion is that it's desirable that it appears higher in the list of pets. However I can understand the viewpoint that it spoils the line, and there were two +1s on your comment here. If you would like to open a new issue about that, you can and I'll mark it as "suggestion/discussion". Just be aware that it might be decided that the current behaviour is correct and the issue might be closed without being actioned.

[mandyzhou]

@crookedneighbor Hmm, looks like the issue's been resolved for the Pets page but not the Mounts page.

[crookedneighbor]

That's because o forgot to apply it to the mounts page :smile:

[Ozzystrasza]

@crookedneighbor Can I try to do this for the mounts page?

[crookedneighbor]

Sure