Monster health progress bar CSS suggestions

[joetweber]

Hi all,

First of all, my GH group loves this project—awesome work. I'm sure (I hope) you hear this all the time, but can you ever really hear it enough? 😉

I have a suggestion for some improved CSS styling of the health progress bars in the monsterHealth utility. This would beef up the progress bars so they're the same size as the buttons, and enhance the size and legibility of the HP numbers (but not too much, so they still fit nicely when the value is 1).

See the example screenshot below, followed by the edits to the code.

.monster-heath-monsters-container .progress {
    margin-top: 0px;  /* was 7px */
}

.progress {
    height: 44px;  /* was 20px */
}

.progress-bar {
    font-size: 18px;  /* was 12px */
    line-height: 40px;  /* was 20px */
    font-weight: bold;  /* added this */
}

Since the progress bars are (arguably) the most important part of the utility, I thought these tweaks would be helpful. Just the 2¢ of a visual design guy; take it or leave it. 😄

[eNon]

+1

I came to suggest that the monster health bars and especially the current HP number should be easier to see. Many play with a laptop at one end of the table and this will make it easier to see from across the table.

I would also make the suggestion that the color of the health bar be changed to something with more contrast against the white background.

[joetweber]

Somewhere recently I stumbled across a fork of this with color-changing progress bars… they started green and then turned yellow and red as health was depleted. (I'll try to find the link and update here when I do.)

[ninjawithkillmoon]

List of forks are here, perhaps it is one of these: https://github.com/ninjawithkillmoon/gloomhaven-thearcanelibrary/network/members ?

[ninjawithkillmoon]

@joetweber if you're able to make a pull request with those changes I can review them directly, otherwise I will make them manually myself and see how it looks.

[joetweber]

@ninjawithkillmoon Ah, of course! 🤦‍♂️ Yes I think it was Xiard's fork – I recognize that name. Anyway, I'm traveling for the next week with very limited access to Internet/devices (hence the delayed response) so if you can handle it that'd be great. 😄 Thanks!

[Xiard]

No, my fork was for creating and managing characters. Nothing to do with progress bars.

[sanjayvsingh]

The version where the bars change is here https://zecrazyeye.github.io/. I can't figure out how to see the source or repository though.

[joetweber]

FWIW, I think the color changing is a good idea (although I’m perfectly happy without it) but I just think the implementation/look could be executed better than in the above example. 🙂

[eNon]

I have been using the above zecrazyeye fork in my games since this was posted and it's been super helpful viewing the bars from my tablet across the table. I think the main app should definitely have this change. I really think the fork's implementation is fine.

[joetweber]

I don't have a problem with adding some color, but I think the specific colors in the zecrazyeye fork are too bright and don't match the rest of the styles/color palette. The font size is also too large (numerals "spill out" of the container at various responsive screen resolutions). I'm a detail guy, and that's just what I noticed… But I do think the larger font is very helpful, up to the size I noted above, and I have no problem with the color-changing function as long as the colors are tasteful. 🙂

[ninjawithkillmoon]

When I stop being a lazy so-and-so and get back from holiday, the minor changes at the top of this thread are the ones likely to be made. I will not use the colours on that other repository :P. But maybe the bars can get a different colour from the palette I've been using.

Feel free to use the other one if it's better, just beware it's not currently got the latest changes and needs to be updated by the owner of that site, who I'm pretty sure I don't have any contact with. You can always check the version history on the home page.