I have to change a code base responsible for generating PDF reports using the Jinja2 tool. For that, I need to change HTML and CSS documents. For the former, my concern is with the naming convention for div's. According to BEM , I should use hyphen to name the div's. So how do I name nested divs? The logic of the following code uses spaces ("content" -> "content info").
For the second, I need to structure the report in order to center the table ("content info") and, below it, have the same size and side-by-side graphs ("pie_week_chart" and "pie_project_chart" / p>
This code base is bequeathed and generated automatically. So my intention is to rewrite it as simply as possible.
Current code:
HTML:
<div class='description'>
<div class="municipality">{{ municipality }}</div>
</div>
<div class="summary">
<div class="content info">
<TABLE border="0" class="table0">
<TR>
<TD><P class="td3 p9 ft9">Resumo semana de {{ start_date }} até {{ end_date }}</P></TD>
<TD><P class="td3 p9 ft9"> </P></TD>
</TR>
<TR>
<TD><P class="td5 p5 ft0">Prof. Participantes</P></TD>
<TD><P class="td6 p6 ft0">{{ professores_participantes }}</P></TD>
</TR>
<TR>
<TD><P class="td5 p5 ft0">Prof. Avaliaram</P></TD>
<TD><P class="td6 p6 ft0">{{ professores_q_avaliaram }}</P></TD>
</TR>
<TR>
<TD><P class="td5 p5 ft0">Avaliações Realizadas</P></TD>
<TD><P class="td6 p6 ft0">{{ avaliacoes_realizadas }}</P></TD>
</TR>
<TR>
<TD><P class="td3 p5 ft11">Prof. que não avaliaram</P></TD>
<TD><P class="td4 p6 ft11">{{ professores_q_nao_avaliaram }}</P></TD>
</TR>
<TR>
<TD><P class="tr8 td0 p2 ft13"> </P></TD>
<TD><P class="tr8 td1 p2 ft13"> </P></TD>
</TR>
<TR>
<TD><P class="td3 p9 ft9">Uso Semanal</P></TD>
<TD><P class="td3 p9 ft9"> </P></TD>
</TR>
<TR>
<TD><P class="td5 p5 ft0">Prof. dentro do esperado</P></TD>
<TD><P class="td6 p6 ft0">{{ prof_ok }}</P></TD>
</TR>
<TR>
<TD><P class="td3 p5 ft11">Prof. fora do esperado</P></TD>
<TD><P class="td4 p6 ft11">{{ prof_n_ok }}</P></TD>
</TR>
</TABLE>
</div>
<div class="content presentation">
<div class="content presentation week">
{{ pie_week_chart }}
</div>
<div class="content presentation project">
{{ pie_project_chart }}
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Create two unequal columns that floats next to each other */
.content {
float: left;
}
.info {
width: 60%;
}
.chart {
width: 40%;
}
/* Clear floats after the columns */
.summary:after {
content: "";
display: table;
clear: both;
}
.content_chart {
display: inline-block;
height: auto;
width: auto;
vertical-align: middle;
max-width: 100%;
}
@media screen {
div.report_name {
display: none;
}
}
@media print {
h1 {
page-break-before: always;
}
h1, h2, h3, h4, h5 {
page-break-after: avoid;
}
figure {
page-break-inside: avoid;
}
div#footer {
position: fixed;
bottom: -0.8cm;
right: 0px;
text-transform:uppercase;
font: 12px 'Calibri';
}
}
img.resize {
;
}
.former_border{border-top: #a6a6a6 1px solid;padding: 2px;margin: 0px;vertical-align: top;}
.dclr {clear:both;float:none;height:1px;margin:0px;padding:0px;overflow:hidden;}
.ft0{font: 14px 'Calibri';line-height: 19px;}
.ft1{font: 14px 'Calibri';line-height: 15px;}
.ft2{font: bold 14px 'Calibri';line-height: 29px;}
.ft3{font: 14px 'Calibri';line-height: 1px;}
.ft4{font: bold 14px 'Calibri';color: #595959;line-height: 19px;}
.ft5{font: 14px 'Calibri';line-height: 6px;}
.ft6{font: 14px 'Calibri';line-height: 19px;}
.ft7{font: 14px 'Calibri';line-height: 22px;}
.ft8{font: 14px 'Calibri';line-height: 17px;}
.ft9{font: bold 14px 'Calibri';line-height: 19px;}
.ft10{font: bold 14px 'Calibri';color: #404040;line-height: 19px;}
.ft11{font: bold 14px 'Calibri';color: #ff0000;line-height: 19px;}
.ft12{font: 14px 'Calibri';line-height: 18px;}
.ft13{font: 14px 'Calibri';line-height: 8px;}
.ft14{font: bold 14px 'Calibri';line-height: 15px;}
.ft15{font: bold 14px 'Calibri';line-height: 14px;}
.ft16{font: 14px 'Calibri';line-height: 9px;}
.ft17{font: 14px 'Calibri';line-height: 14px;}
.ft18{font: bold 14px 'Calibri';color: #808080;line-height: 14px;}
.ft19{font: 14px 'Calibri';line-height: 13px;}
.p0{text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;}
.p1{text-align: left;padding-left: 4px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p2{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p3{text-align: left;padding-left: 129px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p4{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p5{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p6{text-align: right;padding-right: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p7{text-align: right;padding-right: 238px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p8{text-align: right;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p9{text-align: left;padding-left: 150px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p10{text-align: left;padding-left: 75px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p11{text-align: center;padding-right: 21px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p12{text-align: center;padding-right: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p13{text-align: center;padding-right: 10px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p14{text-align: center;padding-right: 6px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p15{text-align: center;padding-right: 15px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p16{text-align: left;padding-left: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p17{text-align: center;padding-right: 18px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p18{text-align: center;padding-right: 9px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.td0{padding: 0px;margin: 0px;vertical-align: bottom;}
.td1{padding: 0px;margin: 0px;vertical-align: bottom;}
.td2{padding: 0px;margin: 0px;vertical-align: bottom;}
.td3{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td4{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td5{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td6{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td7{padding: 0px;margin: 0px;vertical-align: bottom;}
.td8{padding: 0px;margin: 0px;vertical-align: bottom;}
.td9{padding: 0px;margin: 0px;vertical-align: bottom;}
.td10{padding: 0px;margin: 0px;vertical-align: bottom;}
.td11{padding: 0px;margin: 0px;vertical-align: bottom;}
.td12{padding: 0px;margin: 0px;vertical-align: bottom;}
.td13{padding: 0px;margin: 0px;vertical-align: bottom;}
.td14{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td15{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td16{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td17{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td18{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td19{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td20{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td21{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td22{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td23{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td24{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td25{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td26{padding: 0px;margin: 0px;vertical-align: bottom;}
.td27{padding: 0px;margin: 0px;vertical-align: bottom;}
.tr0{height: 30px;}
.tr1{height: 36px;}
.tr2{height: 6px;}
.tr3{height: 19px;}
.tr4{height: 25px;}
.tr5{height: 23px;}
.tr6{height: 17px;}
.tr7{height: 21px;}
.tr8{height: 39px;}
.tr9{height: 34px;}
.tr10{height: 20px;}
.tr11{height: 18px;}
.tr12{height: 8px;}
.tr13{height: 31px;}
.tr14{height: 16px;}
.tr15{height: 9px;}
.tr16{height: 14px;}
.t0{margin-top: 13px;font: 16px 'Calibri';border-spacing: 0;background-color: white;}
.t1{margin-top: 15px;font: 12px 'Calibri';}
.t2{font: 11px 'Calibri';}