@ampath/esm-reports-app 1.0.0-next.5 → 1.0.0-next.50

package/src/reports/moh-711/moh711.scss

@@ -1,41 +1,156 @@
 
-h3 {
-    text-align: center;
+/* Smaller than the section headings beneath it: at 9pt the form title was
+   heavier than the lettered sections it introduces. */
+
+.mainTitleBox h5 {
+  font-size: 7.5pt;
+  font-weight: 700;
+  line-height: 1.25;
+  text-align: center;
 }
 
 .container {
-    border: 1px solid #ccc;
-    margin: 0 2rem;
-    margin-top: 0.5px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4mm;
+  align-items: start;
+  margin: 0 0 4mm;
+
+  grid-template-areas: 'left right';
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.left {
+  grid-area: left;
+  min-width: 0;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.right {
+  grid-area: right;
+  min-width: 0;
 }
 
-.title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+/* Stack on small screens */
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'left'
+      'right';
+  }
 }
+
+/* A lettered section. Maternity carries three tables and Family Planning two,
+   so the gap inside a section is smaller than the gap between them -- given the
+   same margin, a multi-table section reads as several separate ones.
+
+   Kept off a page break so a section is never split from its heading; at about
+   116 rows in the taller column this runs to roughly two A4 pages. */
+
+.section {
+  margin-bottom: 4mm;
+  break-inside: avoid;
+  page-break-inside: avoid;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Full width, so both columns fill their half of the grid and line up with the
+   header box above -- sized to content they came out ragged and short of it. */
+
 .table {
-  width: auto;
+  width: 100%;
+  margin-bottom: 2mm;
+  table-layout: auto;
   border-collapse: collapse;
-  
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid #dee2e6;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: 7pt;
+  border: 1px solid #000;
+}
+
+.tableBordered th {
+  font-weight: 600;
+  background-color: #f4f4f4;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
   background-color: #f9f9f9;
-}
+}
+
+/* Sub-heading rows inside a section table */
+
+.greyBackground {
+  font-weight: 600;
+  background-color: #e0e0e0;
+}
+
+.compiledBy {
+  width: 10rem;
+}
+
+/* Spans the same width as the two columns beneath it */
+
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 0 4mm;
+}
+
+.mainTitleBox {
+  width: 100%;
+  padding: 3mm;
+  text-align: center;
+  border: 1px solid #000;
+}
+
+.locationContainer {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 3mm;
+  margin-top: 3mm;
+  font-size: 6.5pt;
+  white-space: nowrap;
+}
+
+/* These carry the facility and period once a report is generated, so they need
+   to hold text on the rule rather than only draw it. */
+
+.line,
+.shortLine {
+  display: inline-block;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  border-bottom: 1px solid #000;
+}
+
+.line {
+  width: 26mm;
+}
+
+.shortLine {
+  width: 14mm;
+}
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
+}