@tassoman opened this Issue on June 7th 2016 Contributor

As you can see in the attached screenshot, the <tr> tag inside report's <tbody> datatable has no class, it's an empty space. <tr class=" " [...]>

That's causing issues on custom theming alternate rows in visitors datatables. No problems inside actions datatables (forum topic about it) because of class definition: level0, level1, level3 ...

istantanea_2016-06-07_14-11-50

@tsteur commented on June 10th 2016 Owner

I'm not quite sure, which class is missing here? Is the class actually needed in this case for alternate colors ? Does maybe using tbody tr:nth-child(even) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 10%) !important;} work as well?

@tassoman commented on June 13th 2016 Contributor

Until now I've solved using this rules in my theme.less

table.dataTable tbody tr:nth-child(odd) td,
table.dataTable tbody tr.level0:nth-child(odd) td { background-color: <a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast !important; }
table.dataTable tbody tr.level1:nth-child(odd) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 5%) !important; }
table.dataTable tbody tr.level2:nth-child(odd) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 10%) !important; }
table.dataTable tbody tr.level3:nth-child(odd) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 15%) !important; }
table.dataTable tbody tr.level4:nth-child(odd) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 20%) !important; }
table.dataTable tbody tr.level5:nth-child(odd) td { background-color: darken(<a class='mention' href='https://github.com/theme'>@theme</a>-color-background-tinyContrast, 25%) !important; }

normal tr «oddity» takes @theme-color-background-tinyContrast then, going deeper in action tree datatable's rows you get 5 shades of grey 5% darker.

Rendered html by the browser draws <tr class=" ", doesn't create aesthetic problem but I don't think is strictly correct to declare empty arguments in html tags.

@tsteur commented on June 13th 2016 Owner

Thanks for letting us know. I will close the issue for now. While it's not strictly correct to declare empty arguments and causes more bandwidth etc we sometimes have these cases. It's a bit of a trade-off when it's simpler to maintain cases like this: https://github.com/piwik/piwik/blob/2.16.1/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig#L37

This Issue was closed on June 13th 2016
Powered by GitHub Issue Mirror