css ribbons + meta spacing changes

[npinsker]

visual changes to the master puzzle table. follow up to (and obviates) https://github.com/cardinalitypuzzles/cardboard/pull/732

the main motivations for this:

• make it easier to see at a glance what round a puzzle's part of
• separate rounds and distinguish metas visually a bit more
• (as a result) meta tags are redundant; they don't serve the same end-user function as regular tags, and it's no longer helpful to filter on them, so hide them

changes:

• add spacer rows between top-level meta rounds
• assign a color & show a ribbon for each meta round (generated kinda naively)
• hide meta (black) tags; meta membership can still be edited through the tags menu
• remove "X" on tags (removing tags is an uncommon action, and should go through the tags menu)
• font size a bit bigger for metas

[akirabaruah]

Thanks!

• add spacer rows between top-level meta rounds
• assign a color & show a ribbon for each meta round (generated kinda naively)

These seem immediately useful 😎 Could we use this PR to focus on these changes?

• hide meta (black) tags; meta membership can still be edited through the tags menu
• remove "X" on tags (removing tags is an uncommon action, and should go through the tags menu)

I'm wary about having all of this functionality buried in the tags menu. Can we consolidate these changes into https://github.com/cardinalitypuzzles/cardboard/pull/732?

• font size a bit bigger for metas

Hmm, in concept, this seems like a reasonable change, but I'm not convinced it's easier to read, especially with nested metas. Alternating between changing font sizes while scanning the list of puzzle names seems visually fatiguing to me. Mind if we pull this into a separate PR?

[akirabaruah]

Just saw your comment in https://github.com/cardinalitypuzzles/cardboard/pull/732#issuecomment-1881665193.

Happy to close that one and just have all discussions in this 1 PR, but figured we could land some portions of this PR sooner by splitting them out. Up to you :)

[npinsker]

thanks for the comments!!

removing "X" on tags -- I'm mostly drawing from my experiences hunting on Galactic, where in general we look to intentionally minimize the ability of non-power users (the vast majority of our hunters) to edit structure. People would occasionally click such buttons by mistake and then either have to figure out how to undo their changes -- or worse, have to ask somebody else for help.

(also, the buttons have an odd UI imbalance where you can remove tags but not add them, even though adding tags is a more common action.)

the reason i put this change is here rather than in #732 is that this commit solves the problem of "how do i tell easily which meta this puzzle is part of?", but #732 doesn't (so removing the meta tags would be harmful). i thought it felt odd to break something and promise to fix it in a future commit but idk 🤷

font size -- reverted

[npinsker]

tags inline

note that it looks a bit wonky cause of the edit options, you probably should put them after the tags, but this feels strictly worse than either other option to me --

as separate column:

as is (tags below puzzles) with colwidth reduced:

[akirabaruah]

Thanks for the quick tests! Yeah, I agree that the latter 2 options look better than the 1st. I see benefits to either of those last 2 options. Your original implementation seems most compact, which is nice.

removing "X" on tags -- I'm mostly drawing from my experiences hunting on Galactic, where in general we look to intentionally minimize the ability of non-power users (the vast majority of our hunters) to edit structure. People would occasionally click such buttons by mistake and then either have to figure out how to undo their changes -- or worse, have to ask somebody else for help.

(also, the buttons have an odd UI imbalance where you can remove tags but not add them, even though adding tags is a more common action.)

Makes sense. I don't recall that being a huge problem for us tbh, but I'm with you on the idea of minimizing ways to break things accidentally. Ideally, we'd show the "quick tags" UI for power users, as set in Hunt Settings, but that's probably more work than necessary.

I'm reviewing the code itself now, but in the meantime, maybe we should run the UI changes here with other devs on our team if we intend to use this for this year's hunt?

[npinsker]

I'm reviewing the code itself now, but in the meantime, maybe we should run the UI changes here with other devs on our team if we intend to use this for this year's hunt?

Yeah absolutely, thanks for mentioning it -- I definitely don't want to make these sorts of changes without a lot of buy-in!

[rgossiaux]

Seems broadly fine to me. I've always disliked the visual clutter from meta tags so I think hiding them is good, but I still think that if there are > 1 meta tags on a puzzle they should be shown--both for the case when feeders go into multiple metas but also for the case where someone messes up and accidentally tags a feeder with multiple metas (where it'll be much harder to notice after this change).

Removing the X on the tags seems sensible enough.

I was initially worried about nested metas with this UI (how this highlights the outermost meta and consequently buries the inner meta(s) more) but in practice it might be ok. Hard to know without seeing how it works on a real hunt.

How does the meta grouping work with the search bar at the top? It does weird stuff to the table (filtering and sorting).

I think I actually prefer the separate column for the tags. Putting them below is nice to compress the UI and looks a bit nicer aesthetically but I'm worried it makes the puzzle list harder to scan (both the extra text and the eye-catching tag colors). Even in these small screenshots I feel like readability is worse.

[npinsker]

addressed comments & added the meta tags back for puzzles with 2+ metas

How does the meta grouping work with the search bar at the top? It does weird stuff to the table (filtering and sorting).

i think search is consistent with old behavior, not totally sure -- here's a particularly ugly example:

the only difference is, it inserts a spacer between two puzzles with a different top-level meta, so if the search results in interleaving lots of puzzles from different metas (unlikely i think?) then it could be a bit degen