fix(markdown): improve markdown table styling #139
Conversation
Rendered tables currently show up in OpenShift.io without borders and without any padding whatsoever. That makes them really hard to identify as tables. This change adds a border, padding and alternating row colors for a rendered table. Here's a preview of the changes standalone: https://www.w3schools.com/code/tryit.asp?filename=FQB3L3C4L6CM
src/app/markdown/markdown.component.less 33:18 ✖ Do not add zeros before a number number-leading-zero
|
Will this impact any of the other tables where this component is used, as it directly styles HTML elements? |
@mindreeper2420 I'm styling inside the |
|
[test] |
|
@mindreeper2420 I believe this will only impact tables inside the component which is intended. By default components do encapsulation. |
|
@kwk that's what I'm not sure about - the styles are usually all dropped into the |
@mindreeper2420 there already is a style encapsulated alongside my table styles. We can see where it is located in the head right now, can't we? I mean, can you. I'm no good in judging this. |
|
@mindreeper2420 I can only find one class for an
|
|
@sanbornsen view encapsulation is turned off for this component (from what I saw), as well as the majority of OSIO. @kwk my biggest concern is if this will have unintended consequences one the Planner table - my thought is no, but I'm not sure :) I'll check the Planner page, to see if anything from this component ends up in the head section. I believe that is the only area that uses this component. |
|
@mindreeper2420 true that it stays in the header but it has separate tags. Well, here is a test example. I kept two simple tables, one inside f8-markdown one outside it. The one outside has no style from the newly added CSS.
|
|
@sanbornsen @kwk I just checked in OSIO and, even though styles from this component are being added to
|
|
@mindreeper2420 that sounds harm free then. Shall we merge this? |
Thanks to @sanbornsen for showing me the right place to make these changes.
Rendered tables currently show up in OpenShift.io without borders and without any padding whatsoever. That makes them really hard to identify as tables.
This change adds
to a rendered table.
Before
This is how the rendering of a table looks in OpenShift.io before the style changes:
After
And this is how it looks with the style changes (applied in Chrome):
Try standalone
Here's a preview of the changes standalone:
https://www.w3schools.com/code/tryit.asp?filename=FQB3L3C4L6CM