From e2152d3f1b9d9b1cf49d72bd6d0913432c30d0df Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Thu, 4 Jul 2024 17:57:06 +0200
Subject: [PATCH] fix: final touchups with bugfixes

---
 assets/css/pages/about/battlestation.css | 17 +++++++++++++++++
 assets/js/pages/about/battlestation.js   | 21 ++++++++++++++-------
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/assets/css/pages/about/battlestation.css b/assets/css/pages/about/battlestation.css
index ee33622..47a22e4 100644
--- a/assets/css/pages/about/battlestation.css
+++ b/assets/css/pages/about/battlestation.css
@@ -127,9 +127,11 @@ section.config[data-case="1"] > svg g.case {
 /* ## Specs */
 
 section.config .specs {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--padding) / 2);
+	border-radius: 6px;
 }
 
 section.config .specs :is(.spec, .group) {
@@ -147,6 +149,16 @@ section.config .specs :is(.spec, .group) * {
 	pointer-events: none;
 }
 
+/* ### Active state */
+
+section.config .specs.active {
+	background-color: rgba(255, 255, 255, .03);
+}
+
+section.config .specs.active :is(.group, .spec:not(.active)) {
+	display: none;
+}
+
 /* ### Spec */
 
 section.config .specs .spec {
@@ -167,6 +179,11 @@ section.config .specs .spec.active {
 	cursor: initial;
 }
 
+section.config .specs.active .spec.active {
+	position: sticky;
+	top: calc(var(--running-size) + var(--padding));
+}
+
 section.config .specs .spec h3 {
 	color: rgba(255, 255, 255, .3);
 }
diff --git a/assets/js/pages/about/battlestation.js b/assets/js/pages/about/battlestation.js
index 7404742..4550346 100644
--- a/assets/js/pages/about/battlestation.js
+++ b/assets/js/pages/about/battlestation.js
@@ -21,28 +21,35 @@ new vv.Interactions("battlestation", {
 	element.addEventListener("mouseenter", () => {
 		// Find an element in the most adjacent speclist and highlighit it
 		const target = element.closest("section.config").querySelector(`.spec[data-target="${element.dataset.target}"]`);
+		// Get closest specs wrapper element
+		const specsElement = target.closest(".specs");
 		// Spec item is part of a collection, we need to expand the group if that is the case
-		const collection = target.closest(".collection") ?? null;
+		const collectionElement = target.closest(".collection") ?? null;
 		// Don't close the group after hove ends
 		let closeGroupOnLeave = false;
 
+		// Set fixed height on .specs wrapper to prevent glitchy page jumping when scrolled
+		specsElement.style.setProperty("height", `${specsElement.offsetHeight}px`);
 		target.classList.add("active");
+		specsElement.classList.add("active");
 
-		if (collection) {
+		if (collectionElement) {
 			// Close the group on leave if the group wasn't active before hovering
-			closeGroupOnLeave = !collection.previousElementSibling.classList.contains("active");
+			closeGroupOnLeave = !collectionElement.previousElementSibling.classList.contains("active");
 
-			collection.previousElementSibling.classList.add("active");
+			collectionElement.previousElementSibling.classList.add("active");
 		}
 
-		//window.scrollTo(0, target.offsetTop);
-
 		// Bind hover leave listener
 		element.addEventListener("mouseleave", () => {
+			// Reset to initial states
 			target.classList.remove("active");
+			specsElement.classList.remove("active");
+			specsElement.style.removeProperty("height");
 
+			// Group was closed prior to hover, let's close it on hover leave
 			if (closeGroupOnLeave) {
-				collection.previousElementSibling.classList.remove("active");
+				collectionElement.previousElementSibling.classList.remove("active");
 			}
 		}, { once: true });
 	});