This commit is contained in:
parent
ec56a2a9a4
commit
a962ed7d54
4 changed files with 48 additions and 17 deletions
16
index.html
16
index.html
|
@ -72,11 +72,13 @@
|
|||
are not as polished as they should be.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="action_buttons">
|
||||
<button id="welcome_expand">Extra features</button>
|
||||
</div>
|
||||
<p>
|
||||
You can click any of the top icons to jump to that guide, or
|
||||
check out any of these about this handbook:
|
||||
</p>
|
||||
<div class="action_buttons"></div>
|
||||
</div>
|
||||
<div class="features hidden">
|
||||
<div class="features hidden" data-name="Extra features">
|
||||
<h2>
|
||||
Extra Features
|
||||
</h2>
|
||||
|
@ -94,12 +96,10 @@
|
|||
<img
|
||||
src="assets/images/welcome/bs-local.png"
|
||||
style="width: 40%;"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
src="assets/images/welcome/bs-global.png"
|
||||
style="width: 40%;"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
|
@ -121,9 +121,9 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="credits hidden">
|
||||
<div class="credits hidden" data-name="Other infos">
|
||||
<h2>
|
||||
Other infos
|
||||
Other Informations
|
||||
</h2>
|
||||
<p>
|
||||
Thanks to /tg/station and every wiki contributor who did most of
|
||||
|
|
|
@ -15,16 +15,22 @@ function expandPage(root: HTMLElement) {
|
|||
}
|
||||
|
||||
export function welcomeScript(root: HTMLElement): void {
|
||||
const expandLink = document.getElementById("welcome_expand");
|
||||
expandLink.addEventListener("click", async () => {
|
||||
expandPage(root);
|
||||
const featureDiv = root.querySelector<HTMLDivElement>(".features");
|
||||
await nextAnimationFrame();
|
||||
featureDiv.scrollIntoView({
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
behavior: "smooth",
|
||||
const buttonContainer = root.querySelector<HTMLElement>(".action_buttons");
|
||||
root.querySelectorAll<HTMLDivElement>("div[data-name]").forEach((sec) => {
|
||||
const { name } = sec.dataset;
|
||||
const button = document.createElement("button");
|
||||
button.className = "pretty-button";
|
||||
button.appendChild(document.createTextNode(name));
|
||||
button.addEventListener("click", async () => {
|
||||
expandPage(root);
|
||||
await nextAnimationFrame();
|
||||
sec.scrollIntoView({
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
buttonContainer.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -70,4 +70,14 @@
|
|||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.action_buttons {
|
||||
padding: 10pt;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
font-size: 12pt;
|
||||
padding: 10pt 12pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -223,3 +223,18 @@ noscript {
|
|||
max-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.pretty-button {
|
||||
font-family: "Iosevka Aile Web", sans-serif;
|
||||
background-color: darken($nanotrasen, 10%);
|
||||
border: 1px solid lighten($nanotrasen, 30%);
|
||||
color: white;
|
||||
padding: 6pt 10pt;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 100ms;
|
||||
&:hover {
|
||||
background-color: $nanotrasen;
|
||||
border: 1px solid lighten($nanotrasen, 50%);
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue