@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.45

package/src/reports/moh-740/moh-740.component.scss

@@ -1,120 +1,200 @@
+/* MOH-740 laid out for A4, matching MOH-711: geometry in millimetres, type in
+   points, one rule weight throughout. Its 52 rows fit a single page. */
+
+$ink: #000;
+$bar: #d9d9d9;
+$rule: 1px solid $ink;
+
+/* The same scale MOH-711 uses, so the two forms read as one family */
+$text: 7pt; // table cells
+$title: 7.5pt; // form title
+$sub: 7.5pt; // subtitle
+$meta: 6.5pt; // facility strip
+
+/* Page chrome, outside the sheet */
+
 .reportLayout {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    row-gap: 10px;
-    padding: 15px 15px;
-
-    .reportHeader {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        row-gap: 15px;
-
-        .reportTitle {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-        }
-
-        .reportFilters {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            row-gap: 5px;
-        }
-    }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 0.5rem;
+  padding: 0.75rem 0;
 }
 
-.reportContent {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 30px 30px;
+.reportHeader {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 0.75rem;
 }
 
+.reportFilters {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
 
-.sectionHeader {
-    background-color: #f2f2f2;
-    font-weight: bold;
-    text-align: center;
-    text-transform: uppercase;
+.reportContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
+/* Masthead */
+
+/* The four blocks below stack flush and share their edges: each drops its top
+   border and its margin, so the masthead, facility strip, indicator table and
+   sign-off read as one continuous form rather than four separate boxes. */
+
 .headerContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
 }
 
 .mainTitleBox {
-    border: 2px solid #000;
-    padding: 10px;
-    text-align: center;
-    width: 100%;
+  width: 100%;
+  padding: 3mm;
+  text-align: center;
+  border: $rule;
 }
 
-.formCodeBox {
-    text-align: right;
-    font-size: 9px;
-    width: 25%;
+.mainTitle {
+  margin: 0;
+  font-size: $title;
+  font-weight: 700;
 }
 
-.darkBorder{
-    border: 1px solid #000;
-    padding: 4px;
-    text-align: left;
+.subTitle {
+  margin: 1mm 0 0;
+  font-size: $sub;
+  font-weight: 700;
+}
+
+/* Facility / MFL / county strip beneath the masthead */
+
+/* Facility strip. Its cells are bordered like the form: the previous rule set
+   `border: none` here, which at (0,1,1) silently beat the `.darkBorder` class
+   the cells carried. */
+
+/* The facility strip: one continuous band with no rules inside it, so the five
+   fields are separated by spacing alone. Fixed layout holds them in place, and
+   the facility name gets the largest share since it is the only one that
+   carries a long value. */
+
+.topMeta {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: $rule;
+  border-top: none;
+
+  td {
+    width: 17%;
+    padding: 1.5mm;
+    font-size: $meta;
+    vertical-align: top;
+    word-break: break-word;
+    border: none;
+  }
+
+  td:first-child {
+    width: 32%;
+  }
 }
 
-.bgGrey {
-    background-color: #e0e0e0;
+/* The indicator table */
+
+.darkBorder {
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
 }
 
+/* `border-collapse` already merges the shared edge, so the table needs no
+   special casing where it meets the strip above it. */
+
+/* A disease-group divider spanning the table: DIABETES, HYPERTENSION, ... */
+
 .sectionHeader {
-    background-color: #f2f2f2;
-    font-weight: bold;
-    text-align: center;
-    text-transform: uppercase;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  background-color: #ececec;
 }
 
 .subHeader {
-    font-weight: bold;
+  font-weight: 600;
 }
 
-.topMeta{
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 10px;
-}
+/* Indented age-band rows beneath a "Total No. with…" sub-heading. Restored:
+   these were referenced by a literal class string, which CSS Modules never
+   matched, so the rows rendered unbordered and unindented. */
 
-.topMeta td {
-    border: none;
-    padding: 2px;
+.indent {
+  padding-left: 5mm;
 }
 
-.signOff {
-    margin-top: 20px;
-    width: 100%;
+.bgGrey {
+  background-color: #e0e0e0;
 }
 
-.indent {
-    padding-left: 20px;
-}
+/* The indicator table, sharing the band's edge above it */
 
-.mainTitle {
-    margin: 0;
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.subTitle {
-    margin: 5px 0;
+/* The column header. It carried only width and alignment classes, so it was the
+   one row in the table with no borders; and it shared `.sectionHeader` with the
+   DIABETES / HYPERTENSION dividers, which made the two indistinguishable. */
+
+.dataTable thead th {
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  font-weight: 700;
+  background-color: $bar;
+  border: $rule;
 }
 
 .dataElement {
-    width: 40%;
+  width: 40%;
 }
 
 .otherElement {
-    width: 20%;
+  width: 20%;
+  text-align: center;
+}
+
+/* Sign-off, enclosed by the form rather than floating beneath it */
+
+.signOff {
+  display: grid;
+  grid-template-columns: 34mm repeat(4, 1fr);
+  align-items: end;
+  column-gap: 5mm;
+  row-gap: 3mm;
+  width: 100%;
+  padding: 3mm;
+  font-size: $meta;
+  border: $rule;
+  border-top: none;
+
+  span {
     text-align: center;
-}
+  }
+
+  span:first-child {
+    font-weight: 600;
+    text-align: left;
+  }
+}
+
+.signOffRule {
+  min-height: 4mm;
+  padding-bottom: 0.5mm;
+  border-bottom: $rule;
+}