Made code more compatible with popups, improve config.

3 files changed, 45 insertions, 74 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 375cc03b..79a44a41 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -189,29 +189,25 @@
 
   (define popup-id (symbol->string (gensym "popup")))
 
-  `((div (@ ,@(assq-merge
-               extra-attributes
-               `((class "event CAL_" ,(html-attr (or (attr (parent ev) 'NAME)
-                                                     "unknown"))
-                   ,(when (and (attr ev 'PARTSTAT)
-                               (string= "TENTATIVE" (attr ev 'PARTSTAT)))
-                      " tentative"))
-                 (data-tipped-options ,(format #f "inline: '~a'" popup-id))
-                 ;; TODO only if in debug mode?
-                 ,@(data-attributes ev))))
-         (div (@ (class "event-inner"))
-              ;; NOTE These popup's are far from good. Main problem being that
-              ;; the often render off-screen for events high up on the screen.
-              (a (@ (href "#" ,(UID ev))
-                    (class "hidelink"))
-                 (div (@ (class "body"))
-                      ,(when (attr ev 'RRULE)
-                         `(span (@ (class "repeating")) "↺"))
-                      ,((get-config 'summary-filter) ev (attr ev 'SUMMARY))
-                      ,(when (attr ev 'LOCATION)
-                         `(span (@ (class "location"))
-                                ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
-                                             (attr ev 'LOCATION))))))))
+  `((a (@ (href "#" ,(UID ev))
+          (class "hidelink"))
+       (div (@ ,@(assq-merge
+                  extra-attributes
+                  `((class "event CAL_" ,(html-attr (or (attr (parent ev) 'NAME)
+                                                        "unknown"))
+                      ,(when (and (attr ev 'PARTSTAT)
+                                  (string= "TENTATIVE" (attr ev 'PARTSTAT)))
+                         " tentative"))
+                    (data-tipped-options ,(format #f "inline: '~a'" popup-id))
+                    ;; TODO only if in debug mode?
+                    ,@(data-attributes ev))))
+            ,(when (attr ev 'RRULE)
+               `(span (@ (class "repeating")) "↺"))
+            ,((get-config 'summary-filter) ev (attr ev 'SUMMARY))
+            ,(when (attr ev 'LOCATION)
+               `(span (@ (class "location"))
+                      ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
+                                   (attr ev 'LOCATION))))))
     ,(popup ev popup-id)))
 
 ;; Format single event for graphical display
@@ -629,14 +625,12 @@
                     (content ,(date->string start-date "~s"))))
            (meta (@ (name end-time)
                     (content ,(date->string  (date+ end-date (date day: 1)) "~s"))))
+           ,(include-css "http://gandalf.adrift.space:8000/tipped/dist/css/tipped.css")
+
            ,(include-css "/static/style.css")
            ,(include-alt-css "/static/dark.css"  '(title "Dark"))
            ,(include-alt-css "/static/light.css" '(title "Light"))
 
-           ;; <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-           ;; <script type="text/javascript" src="tipped/dist/js/tipped.min.js"></script>
-           ;; <link rel="stylesheet" type="text/css" href="tipped/dist/css/tipped.css"/>
-           ,(include-css "http://gandalf.adrift.space:8000/tipped/dist/css/tipped.css")
            (script (@ (src "https://code.jquery.com/jquery-3.1.1.min.js")) "")
            (script (@ (src "http://gandalf.adrift.space:8000/tipped/dist/js/tipped.min.js")) "")
 
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:
  */