From d670bf7229df3c4edcb84124c659178b5d8ee08e Mon Sep 17 00:00:00 2001 From: Sacha Chua Date: Sun, 22 Dec 2024 21:02:30 -0500 Subject: let's experiment with sticky --- local.css | 9 ++++++++- templates/page.tmpl | 6 ++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/local.css b/local.css index 56834706..d2abba3b 100644 --- a/local.css +++ b/local.css @@ -135,5 +135,12 @@ a.highlight { background-color: yellow } .transcript .sticky-video { display: none } @media only screen and (min-width: 64.063em) { - .transcript .sticky-video { position: sticky; top: 0 } + .transcript .sticky-video { + position: sticky; + top: 0; + display: block; + margin-left: calc(47vw + 30rem); + width: calc(45vw - 30rem); + float: left; + } } diff --git a/templates/page.tmpl b/templates/page.tmpl index 05fade46..4d8a8d86 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -416,9 +416,11 @@ Last edited /* videoType: mainVideo, qanda */ function addStickyVideo(videoType) { const transcriptDiv = document.querySelector('.transcript-' + videoType); - const video = document.querySelector('.vid.' + videoType); + const video = document.querySelector('.vid.' + videoType + ' video'); if (!video || !transcriptDiv) return; - if (transcriptDiv.querySelector('video')) return; // already has it + if (transcriptDiv.querySelector('.vid')) + transcriptDiv.querySelector('.vid').remove(); + // already has it // TODO: Make a copy of the video and place it at the start of the btranscript div, positioned to the left, and sticky, but only on large screens. const videoCopy = video.cloneNode(true); transcriptDiv.prepend(videoCopy); -- cgit v1.2.3