diff --git a/site/blueprints/blocks/jeu.yml b/site/blueprints/blocks/game.yml similarity index 100% rename from site/blueprints/blocks/jeu.yml rename to site/blueprints/blocks/game.yml diff --git a/site/blueprints/pages/article.yml b/site/blueprints/pages/article.yml index 641107e..17b5f78 100644 --- a/site/blueprints/pages/article.yml +++ b/site/blueprints/pages/article.yml @@ -70,8 +70,8 @@ tabs: extends: blocks/image video: extends: blocks/video - jeu: - extends: blocks/jeu + game: + extends: blocks/game white-paper: extends: blocks/white-paper diff --git a/site/snippets/blocks/jeu.php b/site/snippets/blocks/game.php similarity index 100% rename from site/snippets/blocks/jeu.php rename to site/snippets/blocks/game.php diff --git a/src/styles/blocks/jeu.css b/src/styles/blocks/game.css similarity index 100% rename from src/styles/blocks/jeu.css rename to src/styles/blocks/game.css diff --git a/src/styles/index.css b/src/styles/index.css index 5731ee0..7c0c395 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -17,5 +17,5 @@ @import "./blocks/list.css"; @import "./blocks/quote.css"; @import "./blocks/image.css"; -@import "./blocks/jeu.css"; +@import "./blocks/game.css"; @import "./blocks/white-paper.css"; diff --git a/src/views/Article.svelte b/src/views/Article.svelte index 135fc92..ab728f6 100644 --- a/src/views/Article.svelte +++ b/src/views/Article.svelte @@ -45,7 +45,23 @@ iframe.style.pointerEvents = 'auto' container.classList.add('game-active') overlay.setAttribute('data-state', 'played') - container.scrollIntoView({ behavior: 'smooth', block: 'center' }) + + const menuHeight = document.querySelector('header')?.offsetHeight ?? 0 + const minTop = menuHeight + 16 + const rect = container.getBoundingClientRect() + const centeredTop = (window.innerHeight - rect.height) / 2 + const targetTop = Math.max(centeredTop, minTop) + + let scrollEl = container.parentElement + while (scrollEl && scrollEl !== document.body) { + const { overflow, overflowY } = getComputedStyle(scrollEl) + if (/auto|scroll/.test(overflow + overflowY)) break + scrollEl = scrollEl.parentElement + } + const base = (!scrollEl || scrollEl === document.body) ? window.scrollY : scrollEl.scrollTop + const target = base + rect.top - targetTop + ;(scrollEl && scrollEl !== document.body ? scrollEl : window) + .scrollTo({ top: target, behavior: 'smooth' }) }) deactivateBtn?.addEventListener('click', (e) => {