From b3fca6966f7a6a3a4291486748802fc694dfbd1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:42:48 +0200 Subject: Made code more compatible with popups, improve config. --- module/output/html.scm | 48 ++++++++++++++++++---------------------- static/script.js | 12 +++++++++- static/style.css | 59 +++++++++++--------------------------------------- 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")) - ;; - ;; - ;; - ,(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: */ -- cgit v1.2.3