Monster Health - Hide top of page config buttons while in "All Active" mode.

[eNon]

On screens with less space, it would be beneficial for all of these buttons & bars at the top to be hidden, as none of these have a use when you're in the "All Active" mode. This would include the Level & Chars bars, as well as all the buttons related to adding monsters. This could all be collapsed into an expandable Configuration section with a "Show/Hide Config" button at the top.

[eNon]

If you're not entertaining the idea of auto-hiding these bars. I think that a helpful & easy modification would be to add more padding space between the bottom of the monster addition buttons and where the list of active monsters are displayed. Currently there is very little space between them and if you don't scroll the page to hide the top buttons just right, you've got what looks like a big continuous block of brightly colored bars, without a good separation between the config buttons and the health data. It's kind-of an overload.

There is a good amount of padding between the condition buttons and the health trackers. Maybe this could be duplicated at the top.

I really like your project btw. I've tried a bunch of apps and sites for Gloomhaven and yours is the only one that I use. Keep it up. I want to continue to see it improve, but I do not code myself to be able to help.

[ninjawithkillmoon]

Are you able to show a screenshot of what you mean, so I can see what the issue is (from the latest post)? I'm struggling to follow...

I'm glad you like it, but it's highly unlikely to get any major feature updates from me personally now. I've spent a lot of time on it and am mostly happy where it's at.

[eNon]

Sure.

The space at the top between similar elements is very small. The space between the top row of monsters and all of the Add Monster buttons is basically the same as the space between each line of monsters. By contrast, the space between similar elements at the bottom is more appropriate for separating different sections of elements on the page.

This is a small change, but it would help with readability. It also seems like it would be a pretty easy thing to change.

[joetweber]

@eNon what do you think of this?

Add more space at the top:

.monster-heath-monsters-container {
    margin-top: 40px; /* was 10px */
}

Optional: also add a bit more breathing room between each row of monsters:

.monster-health-col {
    padding-top: 10px; /* was 5px */
    padding-bottom: 10px; /* was 5px */
}

Before:

After:

Before & After:

[eNon]

Yeah. That separates the elements a bit more. It's mainly to make it easier to see what's what from across the table. I will let you guys decide how you want to do it. For the sake of fitting all the monsters on 1 screen without having to scroll, I would hesitate to add any more space between the monsters.