From 255f26030a2712f06722205ad593e4f7df0ed76c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:11:57 +0200 Subject: Test tooltip library. --- static/style.css | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css index ac490322..8067b3ff 100644 --- a/static/style.css +++ b/static/style.css @@ -593,7 +593,7 @@ along with their colors. ---------------------------------------- */ -.event-inner .popup { +.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 @@ -607,16 +607,16 @@ along with their colors. 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; + /* 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; + /* transform: scale(0); */ + /* transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); */ + /* z-index: 100; */ background-color: #dedede; color: black; @@ -625,16 +625,18 @@ along with their colors. max-width: 100ch; max-height: 60ch; min-width: 40ch; + + /* display: none; */ } -.event-inner .popup article { +.popup article { /* makes the text in the popup scroll, but not the sidebar */ overflow-y: auto; padding: 1em; } -.event-inner .popup .location { +.popup .location { font-style: initial; } @@ -659,10 +661,6 @@ along with their colors. font-size: 150%; } -.popup.show { - transform: scale(1); -} - .event-inner .body { overflow: hidden; width: 100%; @@ -677,5 +675,11 @@ 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 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. --- static/style.css | 59 +++++++++++++------------------------------------------- 1 file changed, 13 insertions(+), 46 deletions(-) (limited to 'static/style.css') 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 From f0e0549f93bd8f9f83838320eb161e41551ff931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:57:52 +0200 Subject: Move overflow: hidden for events. --- static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css index 3bedd3e1..aad9a80c 100644 --- a/static/style.css +++ b/static/style.css @@ -459,6 +459,7 @@ along with their colors. .event { transition: 0.3s; font-size: var(--event-font-size); + overflow: hidden; } .days .event { @@ -467,7 +468,6 @@ along with their colors. .events .event { width: 100%; - overflow: hidden; } .events .event.continuing { -- cgit v1.2.3