Habitica: Tags with Code Markdown Affecting Alignment of Other Tags

[ghost]

General Info

• UUID: c3462725-fe64-422a-b896-7daf396d085f
• Browser: Chromium Browser Version 57.0.2987.98 Built on Ubuntu
• OS: Linux Mint 18.1 (64-bit)

Description

I'm not good with words so let me just illustrate the problem with images. Normally, you'll have the list of tags below the header like the following:

But when I format my tags using the code markdown, this happens:

Did a little experimenting and the tags seems to align to the last tag (from left to right) with the code formatting. For example, when I remove the code formatting on the Time of Day tag, the tags below it align after the Where Context tag:

And it also only affects the row next to the tag with the code formatting. The third row doesn't seem to be affected like in the picture above, third row after the Challenges tag (HealthySleep101April). And also here in the Where Context and Time of Day group of tags:

However, in the following image, the challenge tags (particularly Reading, Books, Greeks, literature, Classics and HealthySleep101April) doesn't seem to be affected by this:

Console Errors

I've found no error in the Javascript console relating to this one. Only a Deprecation warning for moment().zone and this:

Invalid 'X-Frame-Options' header encountered when loading 'https://full-ruler.secure.yahoo.com/html/d20.html?rnd=1-1-13960-1-13960-328…AEYAFqE2J1dHRvbjIuaGtnLmh2LnByb2SCARUIBBCpARjniAggxYCAwAQox42AoASIAfCMn7MO': '' is not a recognized directive. The header will be ignored.

[librarianmage]

My best guess is that the code blocks are making the tags slightly taller, which messes up the formatting/

[ghost]

Yes, that's true. The regular tags without the code markdown has a height of 27.78 pixels in my screen. The tags with the code markdown has a height of 28.89.

[geekwraith]

This is an issue I've noticed, as well, and one I may have time to help with sometime during the next month or so (no promises; I'm in grad school lol). My initial thought for a quick fix is to find the maximum value among the tag heights, and just set all the tags to that height.

What I'd really like, though, is to see if there's a way to set up a table to fit the number of tags, plus filling out the remainder of the last row with empty cells, where all the cells have a height that fits the tallest tag, and populate the table cells with the contents of the tag array... while permitting tags to be dragged and dropped into specific cells.

I have superordinate category tags that are a certain header sizes, and smaller subordinate category tags. A drag-and-drop, arranged-in-a-table setup would be ideal because I could visually arrange subordinate tags in a logical manner near related superordinate(s). I'm not sure if it's possible, but I'd like to find out!

[Alys]

@geekwraith The quick fix you describe might be good for now. The table idea sounds really interesting but one thing we should make you aware of is that staff programmers are part way through a project to make some improvements to the website's code, which will change the code quite a lot in some places. Because of that, it's probably best to not make large enhancements to the website's interface at the moment.

[geekwraith]

Cool... after the paper I'm working on is done and defended, assuming the issue is still open I'll see about implementing the quick fix.

Because of that, it's probably best to not make large enhancements to the website's interface at the moment.

That makes sense, @Alys . I had another idea for achieving the same purpose as the table would. It's more kludgy, but might be better for the time being since it would operate within the existing mechanic. It would entail adding a feature to the Edit Tags interface to generate a user-specificed number (default of 1) of spacer tags, which would be just blank tags of an optionally user-specified width. These could then be repositioned within the tag array by dragging and dropping just like any other tag, so would give more flexibility in arranging tags visually. What do you think?

[TheHollidayInn]

I think user the new CSS Grid or creating a filterable dropdown of tags would be a good approach for this.

[geekwraith]

Nice! Thanks, @TheHollidayInn, I haven't done anything web-based in so long I hadn't even seen Grid yet. I just bookmarked a bunch of likely resources for when I try working with it.

[librarianmage]

Are you still intending on working on this, @geekwraith?

[geekwraith]

I am, @MathWhiz, but not as soon as I'd thought. If you're asking because you or someone else wants to do it, don't wait on me... if it's still open when I finish jumping through extra bureaucratic hoops, I'll tackle it, and if not, I'll find a different open issue to play with. :o)

[librarianmage]

@geekwraith No, it's totally fine!
On Fri, Jun 9, 2017 at 10:14 AM geekwraith [e-mail] wrote:

I am, @MathWhiz https://github.com/mathwhiz, but not as soon as I'd
thought. If you're asking because you or someone else wants to do it, don't
wait on me... if it's still open when I finish jumping through extra
bureaucratic hoops, I'll tackle it, and if not, I'll find a different open
issue to play with. :o)

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/HabitRPG/habitica/issues/8694#issuecomment-307416624,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALz_8xJ6alzPa5m7lMiH3tnjKGW1ySUwks5sCWFggaJpZM4NFS-m
.

[Alys]

I'm putting this on hold because we're most of the way through a project to change the website's front-end code and this might no longer happen afterwards, or if it does, there'll be new code that will need to be modified to fix it.

[geekwraith]

Not a problem -- currently spending all my extra time/energy calling and writing Senators and visiting their offices so that if they pass this damn health care bill and I end up losing coverage and being forced onto disability by my chronic conditions, at least I'll know I did everything I could to prevent it.

[Alys]

I'm closing this because there's been large changes to how tags are displayed.