From 1f92e7992bc69f5f90ff65a6df24fa32b4381340 Mon Sep 17 00:00:00 2001
From: Toni Verbeiren <toni.verbeiren@gmail.com>
Date: Thu, 28 Sep 2023 12:18:35 +0200
Subject: [PATCH] Hide empty elements (containing no text or other elements)

---
 _quarto.yml | 14 ++++++++++++++
 styles.css  | 36 +++++++++++++++++++++++++-----------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/_quarto.yml b/_quarto.yml
index 38d3d8a3..0b73672c 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -54,6 +54,20 @@ format:
         function virusFormatter(value, row) {
           return value
         };
+
+        // Rewrite the DOM by adding a .blank class to all 'empty' div elements
+        // The :empty CSS attribute does not work on DIV elements containing a newline
+        // The below checks if a node contains only whitespace AND has no children
+        function cleanUpMyDOM(){
+            var nodes = document.querySelectorAll("div");
+            for(var i = 0; i < nodes.length; i++) {
+                const content = nodes[i].innerHTML.replace(/^[\s\n]+|[\s\n]+$/, '');
+                if(!content && ( nodes[i].children.length == 0) ) {
+                    nodes[i].className += " blank";
+                }
+            }
+        }
+        window.addEventListener("load", cleanUpMyDOM);
         
         </script>
 
diff --git a/styles.css b/styles.css
index 7ccfb4b7..d4d7a658 100644
--- a/styles.css
+++ b/styles.css
@@ -342,6 +342,19 @@ table {
 }
 
 /* Virus pages */
+/* .temp:empty { */
+/*   width: 90%; */
+/*   margin: auto; */
+/*   padding: 10px; */
+/*   border: 1px solid #9095A8; */
+/*   background: yellow !important; */
+/* } */
+
+/* Virus pages */
+.blank {
+  display: none;
+}
+
 .virus-figure {
   width: 90%;
   margin: auto;
@@ -349,6 +362,17 @@ table {
   border: 1px solid #9095A8;
 }
 
+/* Add an indicator that text can be found below the figure */
+.virus-figure::before {
+  font-weight: 300;
+  font-size: 1em;
+  float: right;
+  vertical-align: top;
+  color: #9095A8;
+  font-style: italic;
+  content: "text under figure(s)";
+}
+
 .virus-toolbox {
   font-weight: 500;
   font-size: 1.2em;
@@ -364,19 +388,9 @@ table {
   width: 80%;
   margin: auto;
   text-align: left;
+  border-top: 4px solid #9095A8;
   border-left: 4px solid #9095A8;
   border-right: 4px solid #9095A8;
   border-bottom: 4px solid #9095A8;
   padding: 10px;
 }
-
-.virus-figure::before {
-  font-weight: 300;
-  font-size: 1em;
-  float: right;
-  vertical-align: top;
-  color: #9095A8;
-  font-style: italic;
-  content: "text under figure(s)";
-}
-