engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

feat: cinema mode — hamburger + Edit into sidebar above Download

Browse source 
Two cinema-mode polishes:

1. Top task bar (hamburger / shop name / Edit button) relocates into
   .product-right above the .well on cinema-on. Cached original parent
   + next sibling at init lets us put it back on cinema-off. Moved
   within the same DOM subtree that survives SPA nav so it persists
   across product changes. CSS stacks its children vertically inside
   the sidebar instead of the horizontal strip shape up top.

2. The 'click image to open in new window' wrapper link on static
   products (images, PDFs) is redundant in cinema mode since media
   already fills the viewport. pointer-events:none disables the
   click without removing the anchor from the DOM.
This commit is contained in:
russell@unturf.com 2026-04-22 15:43:12 -04:00
parent f6654ba7d2
commit 872a7121f8
2 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
make_post_sell/static/css/common.css
View file

@ -1778,6 +1778,28 @@ section.two-column.cinema-mode .watch-audio-container > .product-main {
margin-right: auto;
}
/* Cinema: the main media is already showing at full viewport width,
so the wrapping "click to open in new window" link is redundant
and just steals the click from scrolling and other interactions. */
section.two-column.cinema-mode .product-images > a[target="_blank"] {
pointer-events: none;
cursor: default;
}
/* Cinema: task bar (hamburger + Edit) relocates into .product-right
above the well via JS. Stack its children vertically and make it
feel like part of the sidebar rather than a floating chrome strip. */
section.two-column.cinema-mode section.product-right section.windows-95-task-bar {
grid-template-columns: 1fr;
padding: 0;
margin-bottom: 8px;
}
section.two-column.cinema-mode section.product-right section.windows-95-start-button,
section.two-column.cinema-mode section.product-right section.call-to-action {
padding-left: 0;
padding-right: 0;
}
/*************************************************************
*
* for displays bigger than 800px which are "desktop-ish".

26
make_post_sell/static/js/watch.js
View file

@ -188,13 +188,39 @@
if (savedCinema !== null) cinemaMode = savedCinema === '1';
} catch (e) {}
// Cache the task bar's original position so we can put it back when
// cinema mode toggles off. Done once at init — before any relocation.
var _taskbarOriginalParent = null;
var _taskbarOriginalNextSibling = null;
(function cacheTaskbarHome() {
var tb = document.querySelector('section.windows-95-task-bar');
if (tb) {
_taskbarOriginalParent = tb.parentElement;
_taskbarOriginalNextSibling = tb.nextSibling;
}
})();
function applyCinemaMode() {
var section = document.querySelector('section.two-column');
if (!section) return;
var taskbar = document.querySelector('section.windows-95-task-bar');
var productRight = document.querySelector('section.product-right');
if (cinemaMode) {
section.classList.add('cinema-mode');
// Move taskbar (hamburger + Edit) into the sidebar above the well.
if (taskbar && productRight) {
var well = productRight.querySelector('.well');
if (well && taskbar.parentElement !== productRight) {
productRight.insertBefore(taskbar, well);
}
}
} else {
section.classList.remove('cinema-mode');
// Put taskbar back where it came from.
if (taskbar && _taskbarOriginalParent && taskbar.parentElement !== _taskbarOriginalParent) {
_taskbarOriginalParent.insertBefore(taskbar, _taskbarOriginalNextSibling);
}
}
}
applyCinemaMode();