Mobile friendly tables

[NejcZdovc]

Added mobile friendly tables.

Resolves #246

[NejcZdovc]

@skipjack what do you think?

[skipjack]

@NejcZdovc first off, thanks for your work on this. As I just mentioned in #246, this is a tough problem and, even with all those proposals on CSS Tricks, none jump out as the perfect solution.

That said, I think what you've done here is definitely better than what we have now. The one thing I'm not a huge fan of is adding even more markdown.js utility which increases our dependency on marked. We've been debating on moving away from it since it's not too well supported any more. From what I'm seeing, the additions to markdown.js are basically to add class names, a little extra markup, and then re-implement the normal marked tokenizer for eveything aside from tables... is that right or am I missing something else?

[skipjack]

@NejcZdovc my inclination is to tie in some of the styling changes from #440, then merge this and come back to it more in-depth later on if we ever get to moving away from marked.

I think the cleanest way to implement all these customizations in a react environment is to have something parse the markdown and pass that data to react components for any kind of special behavior. The only projects I have come across that seem to offer this functionality are:

• markdown-to-react-components
• reactdown (maybe? I'm not even sure on this one)

My only worry would be trying to pick something that will continue to be maintained.

cc @bebraw @bdougie - interested in both of your thoughts here as well. I know we've discussed this a bit on #178.

[skipjack]

@NejcZdovc we should try to delineate the the two "rows" better here, they can blend together a bit.

In your screenshot in #246 you had removed the horizontal borders within each row:

which would be a good start although I'm not sure if this is tough to implement or not.

[NejcZdovc]

@skipjack yes you are correct. I only changed table parser, everything else was copied from an original library. I didn't find a way to override only table renderer so I needed to override tok function.

Regarding design, in this stage I only added basic styling, so that if you like the approach we can go one step further. So let's first check if we all agree to like this change and then invest some more time into CSS changes. Personally I like this approach, because it's a lot more readable on mobile and like you said it's not a perfect solution, but I am not aware of a perfect one 😄

[NejcZdovc]

@skipjack I removed borders for mobile now

[bdougie]

@skipjack, having these customizations and overrides would be interesting in a React Component. I like the idea of generally making hi-jacks or overrides more declarative than implied, which is what the markdown.js does a lot of. TBH, it took me a bit of time just to get up to speed with the file, but that might just be a limit of my experience.

I also have reservations to adding more options to the markdown.js but only from the experience trying to swap/update marked to a moreup to date and maintained remarkable or showdown.

[bebraw]

@bdougie Yup, agreed. Ideally we should be able to push these kind of bits to React side. I would love to replace marked with something actively maintained btw.

That said, it's fine by me if we go with a solution that makes sense from user point of view even if the solution is not technically perfect. So keep up good work. 👍

[skipjack]

@NejcZdovc looks much better with the removed borders on mobile... one last question:

It seems more than just the table contents is wrapped in table-wrap class, is this intentional?

Aside from that I think this is good to go, as you mentioned I'll probably be submitting another PR shortly after we get this one merged to do a bit more styling (somewhat based off of #440).

[NejcZdovc]

@skipjack No it was not intentionally, I forgot to close table-wrap. It's fixed now.

[skipjack]

@NejcZdovc awesome work, I'll follow up with another PR soon.