export/html: improve traceability matrix table layout: headers; add p…

…laceholders
strictdoc-project · Jan 3, 2024 · 27ab232 · 27ab232
1 parent 87b37a8
commit 27ab232
Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/strictdoc/export/html/_static/base.css b/strictdoc/export/html/_static/base.css
@@ -42,6 +42,7 @@
   --base-line-height: 1.6;
 
   --font-size: 16px;
+  --font-size-l: 1.25rem;
   --font-size-sm: 0.8125rem;
   --font-size-xsm: 0.75rem;
   --font-size-xxsm: 11px;

diff --git a/strictdoc/export/html/_static/element.css b/strictdoc/export/html/_static/element.css
@@ -1234,3 +1234,19 @@ a.sdoc-table_key_value-key::after {
   color: var(--color-fg-secondary);
   background-color: var(--color-bg-main);
 }
+
+/* badge */
+
+.badge {
+  white-space: nowrap;
+}
+
+.badge::before {
+  content: attr(text);
+  padding: 0 calc(var(--base-rhythm)/2);
+  border: 1px solid;
+  border-radius: calc(var(--base-rhythm)/2);
+  font-size: var(--font-size-xxsm);
+  font-weight: 600;
+  text-transform: uppercase;
+}
diff --git a/strictdoc/export/html/_static/traceability_matrix.css b/strictdoc/export/html/_static/traceability_matrix.css
@@ -42,33 +42,48 @@
 }
 
 .traceability_matrix td {
-  /* padding: var(--base-rhythm); */
   border: 1px solid var(--color-border);
   background-color: var(--color-bg-contrast);
   vertical-align: top;
 }
 
 td.traceability_matrix__document {
-  background-color: var(--color-bg-main);
   position: sticky;
   padding: 0;
   top: 0;
   z-index: 1;
 }
 
+.traceability_matrix__placeholder {
+  padding: var(--base-rhythm);
+  text-align: center;
+  font-size: var(--font-size-sm);
+}
+
+td.traceability_matrix__null {
+  height: calc(4 * var(--base-rhythm));
+  background-color: var(--color-bg-main);
+  border: none;
+}
+
 .traceability_matrix__document_line {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
-  column-gap: var(--base-rhythm);
-  font-size: var(--font-size-sm);
+  column-gap: calc(2 * var(--base-rhythm));
+  font-size: var(--font-size-l);
   font-weight: 600;
-  line-height: 1.5;
+  line-height: 1.2;
   width: 100%;
-  background-color: var(--color-bg-main);
-  padding-top: calc(3 * var(--base-rhythm));
-  padding-left: var(--base-rhythm);
-  border-bottom: 2px solid var(--color-border);
+
+  padding: var(--base-rhythm);
+  padding-top: calc(1.5 * var(--base-rhythm));
+
+  border-bottom: 1px solid var(--color-border);
+}
+
+.traceability_matrix__document_stat {
+  margin-left: auto;
 }
 
 .traceability_matrix__requirement {

diff --git a/strictdoc/export/html/templates/screens/requirements_coverage/main.jinja b/strictdoc/export/html/templates/screens/requirements_coverage/main.jinja
@@ -25,7 +25,13 @@
     {%- for document in traceability_index.document_tree.document_list -%}
       <tr class="traceability_matrix__anchor" id="{{ loop.index }}">
         <td class="traceability_matrix__document" colspan="100">
-          <div class="traceability_matrix__document_line">{% include "_res/svg_ico16_document.jinja.html" %}{{ document.title }}</div>
+          <div class="traceability_matrix__document_line">
+          {% include "_res/svg_ico16_document.jinja.html" %}
+            {{ document.title }}
+            <div class="traceability_matrix__document_stat">
+              {# <span class="badge" text="88%"></span> #}
+            </div>
+          </div>
         </td>
       </tr>
 
@@ -76,6 +82,17 @@
           </tr>
         {%- endif %}
       {%- endfor %}
+
+      {%- if not document.has_any_requirements() %}
+        <tr>
+          <td colspan="100"><div class="traceability_matrix__placeholder">No traceable content.</div></td>
+        </tr>
+      {%- endif %}
+
+      <tr>
+        <td class="traceability_matrix__null" colspan="100"></td>
+      </tr>
+
     {%- endfor %}
     </tbody>
   </table>