Made code more compatible with popups, improve config.

1 files changed, 13 insertions, 46 deletions

diff --git a/static/style.css b/static/style.css
index 8067b3ff..3bedd3e1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -396,6 +396,9 @@ along with their colors.
     height: 100%;
     padding: 0;
     overflow-x: scroll;
+
+    /* allow for popup placement */
+    position: relative;
 }
 
 .events {
@@ -464,8 +467,7 @@ along with their colors.
 
 .events .event {
     width: 100%;
-
-
+    overflow: hidden;
 }
 
 .events .event.continuing {
@@ -581,59 +583,32 @@ along with their colors.
 .clock-22 { top: calc(100%/24 * 22); }
 .clock-24 { top: calc(100%/24 * 24); }
 
-.event-inner {
-    /* Makes the popup's "position: absolute" be relative the event.
-        unset, initial, and inherit all seem to work */
-    position: unset;
-    width: 100%;
-    height: 100%;
-}
 
 /* Popups
 ----------------------------------------
 */
 
+.popup-container {
+    display: none;
+}
+
+
 .popup {
-    /* TODO & NOTE
-       If I understand it correctly this is absolute to the nearest offset parent.
-       since .event-inner has a position: unset the offset parent becomes
-       - event for week view, and
-       - body for month view.
-       This has the effect that top and left attributes become relative the offset
-       parent (even though without them the element is positioned relative to it's
-       direct event parent (except not in month view if the day is scrolled)).
-
-       I think it's something here which stops popups in the month view from going
-       of the edge of the screen. I just want the same thing to be true for the
-       week view, since it's REALY ugly when a popup makes the calendar wider.
-   */
-    /* position: absolute; */
     display: flex;
-    /* A scale(0%) is chosen for hiding the element for the following reasons:
-       - visibility: hidden still reserves space, which causes unwanted scroll-
-         bars since the final position of the popup is calculated at runtime
-       - Easier animation
-   */
-    /* transform: scale(0); */
-    /* transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); */
-    /* z-index: 100; */
-
     background-color: #dedede;
     color: black;
 
     overflow-y: auto;
-    max-width: 100ch;
+    max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
-
-    /* display: none; */
 }
 
 .popup article {
     /* makes the text in the popup scroll, but not the sidebar */
     overflow-y: auto;
-
     padding: 1em;
+    word-break: break-word;
 }
 
 .popup .location {
@@ -661,10 +636,8 @@ along with their colors.
     font-size: 150%;
 }
 
-.event-inner .body {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+.tpd-tooltip a, .tpd-tooltip a:hover {
+    color: blue;
 }
 
 #bar {
@@ -675,11 +648,5 @@ along with their colors.
     left: -1em;
 }
 
-.popup-container {
-    /* min-width: 50ch; */
-    /* min-height: 50ch; */
-    display: none;
-}
-
 /* vim:expandtab:softtabstop=4:shiftwidth=4:
  */