Add rudementary popup system.

2 files changed, 80 insertions, 2 deletions

diff --git a/static/script.js b/static/script.js
index bc20cb07..dcc7285f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -95,8 +95,15 @@ function update_current_time_bar () {
     event_area.append(bar_object)
 }
 
+function toggle_event_pupup () {
+    console.log(this);
+    this.getElementsByClassName("popup")[0].classList.toggle("show");
+}
+
 window.onload = function () {
+    console.log("Running");
 
+    /*
     update_current_time_bar()
     // once a minute for now, could probably be slowed to every 10 minutes
     window.setInterval(update_current_time_bar, 1000 * 60)
@@ -106,4 +113,9 @@ window.onload = function () {
         c.onmouseup = onmouseuphandler;
         c.onmousemove = onmousemovehandler;
     }
+    */
+
+    for (let e of document.getElementsByClassName("event-inner")) {
+        e.onclick = toggle_event_pupup;
+    }
 }
diff --git a/static/style.css b/static/style.css
index 2545b9e9..77c9e2f8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -293,9 +293,10 @@ html, body {
 	border: 2px solid black;
 	font-size: 8pt;
 
-	overflow: hidden;
+	/* overflow: hidden; */
 
-	z-index: 0;
+        /* Setting this makes popups render under */
+	/* z-index: 0; */
 }
 
 .root footer {
@@ -392,3 +393,68 @@ html, body {
     border-color: blue;
     left: -1em;
 }
+
+.event-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.event-inner .popup {
+    visibility: hidden;
+    position: absolute;
+    left: 10%;
+    bottom: 125%;
+    z-index: 100;
+
+    background-color: #dedede;
+    color: black;
+    border: 2px solid black;
+
+    font-size: 8pt;
+    font-family: monospace;
+
+    white-space: pre;
+    overflow-y: scroll;
+    max-width: 100ch;
+    max-height: 60ch;
+}
+
+.event-inner .popup td {
+    white-space: pre-line;
+}
+
+/* Arrow pointing at origin of popup
+   Currently broken due to an overflow: scroll
+*/
+/* .event-inner .popup:after { */
+
+/*     content: ""; */
+/*     position: absolute; */
+/*     top: 100%; */
+/*     /\* left: 5%; *\/ */
+/*     border-style: solid; */
+/*     border-width: 1.5em; */
+/*     /\* margin-left: -2em; *\/ */
+/*     border-color: transparent; */
+/*     border-top-color: #555; */
+/* } */
+
+.popup th {
+    text-align: right;
+    vertical-align: top;
+}
+
+.popup th::after {
+    content: ": ";
+}
+
+.popup.show {
+    visibility: visible;
+}
+
+.event-inner .body {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}