Made code more compatible with popups, improve config.

2 files changed, 24 insertions, 47 deletions

diff --git a/static/script.js b/static/script.js
index 91c840e3..4fbf160e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -261,7 +261,7 @@ window.onload = function () {
 }
 
 $(document).ready(function() {
-    Tipped.setDefaultSkin('none');
+    Tipped.setDefaultSkin("purple");
     Tipped.create(".event", {
         /* no padding, I am the one who styles! */
         padding: false,
@@ -273,5 +273,15 @@ $(document).ready(function() {
            acts as close buttons */
         showOn: 'click',
         hideOn: 'click',
+
+        /* makes popups relative our scrolling days view */
+        container: '.days',
+
+        /* Ensures that the popups stay within the given area,
+           and don't strectch the container */
+        containment: {
+            selector: '.days',
+        },
+        behaviour: 'sticky',
     });
 });
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:
  */