Thursday, April 26, 2018

Reworking Special Tables in New Help.

Continuing the enhancement of the new help pages, I made some changes in the XSL transformation and CSS file to remove some special tables and sections. In this case I used CSS properties available in HTML5, such as display:flex; .

Many tables were used to position elements in the page. Depending on the CSS class of the table, the purpose of the table changes. Here are the predefined roles worked so far:

onecell: As the name says, the xml table has only one cell. The html table was replaced by a div and proper css, followed by a line break.

icontable: this type of table type is constructed when the first tablecell contains an image. The html table replacement is rendered row by row by a wrapping div with display: flex; attribute and internal divs for the remaining cells in the row.

howtoget: The section "How to get" has now a wrapping div with display: flex;  and flex-direction: columns; to stack the heading and contents divs.

Notes, Tips and Warnings: The special paragraphs were mapped into tables and now are mapped in divs with display:flex;

All divs are also associated with named classes, and therefore the CSS can be tweaked independently.

The remaining tables are left as is but will also undergo some cleanup in the near future.

Happy CSS tweaking!