Make the defition pop-ups more readable (#244)

MinBZK · Nov 12, 2024 · 4b3f408 · 4b3f408
2 parents 45b59fe + 0231557
commit 4b3f408
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
@@ -22,3 +22,28 @@
         align-items: center;
     }
 }
+
+.aiv-definition {
+  position: relative;
+  display: inline-block;
+  border-bottom: 2px dotted black;
+}
+
+.aiv-definition .aiv-definition-text {
+  visibility: hidden;
+  width: 300px;
+  background-color: var(--rvo-color-wit);
+  color: var(--rvo-color-zwart);
+  filter: drop-shadow(0 4px 4px rgba(115, 142, 171, 0.5));
+  text-align: left;
+  border-radius: var(--rvo-border-radius-xl);
+  border-color: var(--rvo-color-grijs-200);
+  border: 1px;
+  padding: var(--rvo-alert-padding-sm-padding-block-end);
+  position: absolute;
+  z-index: 1;
+}
+
+.aiv-definition:hover .aiv-definition-text {
+  visibility: visible;
+}
diff --git a/frontend/src/assets/decision-tree.json b/frontend/src/assets/decision-tree.json
diff --git a/script/inject_definitions_in_decision_tree.py b/script/inject_definitions_in_decision_tree.py
@@ -15,7 +15,14 @@
 
 # Create a dictionary to lookup terms
 term_dict = {
-    definition["term"]: (f"<dfn><abbr title=\"{definition['definition']}\">{definition['term']}</abbr></dfn>")
+    definition["term"]: (
+        f"<div class='aiv-definition'>"
+        f"{definition['term']}"
+        f" <span class='aiv-definition-text'>"
+        f"     {definition['definition']}"
+        f" </span>"
+        f"</div>"
+    )
     for definition in definitions["definitions"]
 }