diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css index 561ae1ed3..d68582841 100644 --- a/web/source/css/_media-wrapper.css +++ b/web/source/css/_media-wrapper.css @@ -29,7 +29,6 @@ border-radius: $br; position: relative; overflow: hidden; - z-index: 2; img { width: 100%; @@ -59,7 +58,6 @@ position: absolute; height: 100%; width: 100%; - z-index: 3; overflow: hidden; display: grid; diff --git a/web/source/css/status.css b/web/source/css/status.css index 11a6fee82..3b284ea81 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -28,8 +28,6 @@ padding-top: 0.75rem; a { - position: relative; - z-index: 1; color: inherit; text-decoration: none; } @@ -109,11 +107,6 @@ gap: 0.5rem; } - .text-spoiler > summary, .text { - position: relative; - z-index: 1; - } - .text-spoiler > summary { list-style: none; display: flex; @@ -193,7 +186,6 @@ .poll { background-color: $gray2; - z-index: 2; display: flex; flex-direction: column; @@ -277,7 +269,6 @@ } details.stats-more-info { - z-index: 2; margin-left: auto; & > summary { @@ -350,7 +341,7 @@ .stats-more-info-content { position: absolute; right: 0; - z-index: 3; + z-index: 2; flex-direction: column; max-width: 100%; @@ -374,7 +365,6 @@ } .stats-item:not(.published-at):not(.edit-timeline) { - z-index: 2; user-select: none; } diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index 860d6d10a..da158ed77 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -338,3 +338,25 @@ Array.from(document.getElementsByTagName('time')).forEach(timeTag => { timeTag.textContent = dateTimeFormat.format(date); } }); + +// When clicking anywhere that's not an open +// stats-info-more-content details dropdown, +// close that open dropdown. +document.body.addEventListener("click", (e) => { + const openStats = document.querySelector("details.stats-more-info[open]"); + if (!openStats) { + // No open stats + // details element. + return; + } + + if (openStats.contains(e.target)) { + // Click is within stats + // element, leave it alone. + return; + } + + // Click was outside of + // stats elements, close it. + openStats.removeAttribute("open"); +}); diff --git a/web/template/status_info.tmpl b/web/template/status_info.tmpl index 8decf25c9..7252334f3 100644 --- a/web/template/status_info.tmpl +++ b/web/template/status_info.tmpl @@ -83,7 +83,7 @@ {{- else }} {{- end }} -
+
More info