diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/.gitignore | 2 | ||||
| -rw-r--r-- | static/script.js | 106 | ||||
| -rw-r--r-- | static/style.css | 61 |
3 files changed, 44 insertions, 125 deletions
diff --git a/static/.gitignore b/static/.gitignore new file mode 100644 index 00000000..b99de213 --- /dev/null +++ b/static/.gitignore @@ -0,0 +1,2 @@ +tipped-4.7.0 +jquery-3.* diff --git a/static/script.js b/static/script.js index 8617159a..b9b6a5ba 100644 --- a/static/script.js +++ b/static/script.js @@ -140,11 +140,6 @@ function update_current_time_bar () { current_cell.style.border = "1px solid black"; } -function toggle_event_pupup () { - console.log(this); - this.getElementsByClassName("popup")[0].classList.toggle("show"); -} - function min(a, b) { return a < b ? a : b; } @@ -153,71 +148,6 @@ function max(a, b) { return a > b ? a : b; } -function close_popup (btn) { - o = { class: "popup" } - var popup = parents_until (btn, o); - popup.classList.toggle("show"); -} - -/* -https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively -*/ -function new_popup (event) { - - let days = document.getElementsByClassName("days")[0] - - console.log(event.target); - console.log(this); - // if (event.target !== this) return; - - /* popup = this.children[0].children[0] */ - let ev = parents_until(this, {class: "event"}) - popup = ev.getElementsByClassName("popup")[0]; - popup.classList.toggle("show") - - return; - - /* x-axis fix */ - - /* Popup should neven be wider than viewport */ - popup.style.width = min(popup.style.offsetWidth, days.clientWidth - 10) + "px" - - /* find left edge of source element in viewport */ - here_x = (this.offsetParent.offsetLeft + this.offsetLeft) - days.scrollLeft; - console.log(here_x) - - /* Align popup with source */ - popup.style.left = "0px" - /* move it if it would partially render outside */ - if (here_x < 0) { - popup.style.left = "" + ((- here_x) + 10) + "px"; - } - // overflow_x = (here_x + popup.offsetWidth) - days.offsetWidth - overflow_x = (here_x + popup.offsetWidth) - days.clientWidth - if (overflow_x > 0) { - /* NOTE - Setting the style.left field changes the offsetWidth - of the object. - TODO - Get the popup to actually be inside the viewport! - */ - // console.log(overflow_x) - popup.style.left = "-" + (overflow_x + 10) + "px"; - } - - /* y-axis fix */ - popup.style.height = min(popup.style.offsetHeight, days.offsetHeight) - popup.style.bottom = "calc(100% + 2em)"; - - here_y = this.offsetParent.offsetTop + this.offsetTop; - - overflow_y = here_y - popup.offsetHeight; - if (overflow_y < 0) { - popup.style.bottom = "calc(100% - " + ((- overflow_y) + 10) + "px)"; - } - -} - function setVar(str, val) { document.documentElement.style.setProperty("--" + str, val); } @@ -251,16 +181,6 @@ window.onload = function () { } } - for (let popup of document.getElementsByClassName("popup")) { - ev = parents_until(popup, {class: "event"}) - e = ev.getElementsByClassName("body")[0] - e.onclick = new_popup; - /* disable scroll to element in side list - if popups are available. - */ - e.parentElement.removeAttribute("href"); - } - document.onkeydown = function (evt) { evt = evt || window.event; if (evt.key.startsWith("Esc")) { @@ -269,3 +189,29 @@ window.onload = function () { } } + +$(document).ready(function() { + Tipped.setDefaultSkin("purple"); + Tipped.create(".event", { + /* no padding, I am the one who styles! */ + padding: false, + /* Don't remove from DOM when hiding */ + detach: false, + + /* click element to toggle. + Elements with class "close-tooltip" also + 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 ac490322..aad9a80c 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 { @@ -456,6 +459,7 @@ along with their colors. .event { transition: 0.3s; font-size: var(--event-font-size); + overflow: hidden; } .days .event { @@ -464,8 +468,6 @@ along with their colors. .events .event { width: 100%; - - } .events .event.continuing { @@ -581,60 +583,35 @@ 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 ---------------------------------------- */ -.event-inner .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; +.popup-container { + display: none; +} + +.popup { + display: flex; background-color: #dedede; color: black; overflow-y: auto; - max-width: 100ch; + max-width: 60ch; max-height: 60ch; min-width: 40ch; } -.event-inner .popup article { +.popup article { /* makes the text in the popup scroll, but not the sidebar */ overflow-y: auto; - padding: 1em; + word-break: break-word; } -.event-inner .popup .location { +.popup .location { font-style: initial; } @@ -659,14 +636,8 @@ along with their colors. font-size: 150%; } -.popup.show { - transform: scale(1); -} - -.event-inner .body { - overflow: hidden; - width: 100%; - height: 100%; +.tpd-tooltip a, .tpd-tooltip a:hover { + color: blue; } #bar { |