vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-14 05:13:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: final touchups with bugfixes

Browse source
This commit is contained in:
Victor Westerlund 2024-07-04 17:57:06 +02:00
parent 3b20f94e69
commit e2152d3f1b
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/css/pages/about/battlestation.css
View file

@ -127,9 +127,11 @@ section.config[data-case="1"] > svg g.case {
/* ## Specs */ /* ## Specs */
section.config .specs { section.config .specs {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(var(--padding) / 2); gap: calc(var(--padding) / 2);
border-radius: 6px;
} }
section.config .specs :is(.spec, .group) { section.config .specs :is(.spec, .group) {
@ -147,6 +149,16 @@ section.config .specs :is(.spec, .group) * {
pointer-events: none; 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 */ /* ### Spec */
section.config .specs .spec { section.config .specs .spec {
@ -167,6 +179,11 @@ section.config .specs .spec.active {
cursor: initial; cursor: initial;
} }
section.config .specs.active .spec.active {
position: sticky;
top: calc(var(--running-size) + var(--padding));
}
section.config .specs .spec h3 { section.config .specs .spec h3 {
color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .3);
} }

21
assets/js/pages/about/battlestation.js
View file

@ -21,28 +21,35 @@ new vv.Interactions("battlestation", {
element.addEventListener("mouseenter", () => { element.addEventListener("mouseenter", () => {
// Find an element in the most adjacent speclist and highlighit it // Find an element in the most adjacent speclist and highlighit it
const target = element.closest("section.config").querySelector(`.spec[data-target="${element.dataset.target}"]`); 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 // 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 // Don't close the group after hove ends
let closeGroupOnLeave = false; 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"); 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 // 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 // Bind hover leave listener
element.addEventListener("mouseleave", () => { element.addEventListener("mouseleave", () => {
// Reset to initial states
target.classList.remove("active"); 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) { if (closeGroupOnLeave) {
collection.previousElementSibling.classList.remove("active"); collectionElement.previousElementSibling.classList.remove("active");
} }
}, { once: true }); }, { once: true });
}); });