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.
|
are not as polished as they should be.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="action_buttons">
|
<p>
|
||||||
<button id="welcome_expand">Extra features</button>
|
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>
|
||||||
</div>
|
<div class="features hidden" data-name="Extra features">
|
||||||
<div class="features hidden">
|
|
||||||
<h2>
|
<h2>
|
||||||
Extra Features
|
Extra Features
|
||||||
</h2>
|
</h2>
|
||||||
|
@ -94,12 +96,10 @@
|
||||||
<img
|
<img
|
||||||
src="assets/images/welcome/bs-local.png"
|
src="assets/images/welcome/bs-local.png"
|
||||||
style="width: 40%;"
|
style="width: 40%;"
|
||||||
loading="lazy"
|
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="assets/images/welcome/bs-global.png"
|
src="assets/images/welcome/bs-global.png"
|
||||||
style="width: 40%;"
|
style="width: 40%;"
|
||||||
loading="lazy"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
@ -121,9 +121,9 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="credits hidden">
|
<div class="credits hidden" data-name="Other infos">
|
||||||
<h2>
|
<h2>
|
||||||
Other infos
|
Other Informations
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
Thanks to /tg/station and every wiki contributor who did most of
|
Thanks to /tg/station and every wiki contributor who did most of
|
||||||
|
|
|
@ -15,17 +15,23 @@ function expandPage(root: HTMLElement) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function welcomeScript(root: HTMLElement): void {
|
export function welcomeScript(root: HTMLElement): void {
|
||||||
const expandLink = document.getElementById("welcome_expand");
|
const buttonContainer = root.querySelector<HTMLElement>(".action_buttons");
|
||||||
expandLink.addEventListener("click", async () => {
|
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);
|
expandPage(root);
|
||||||
const featureDiv = root.querySelector<HTMLDivElement>(".features");
|
|
||||||
await nextAnimationFrame();
|
await nextAnimationFrame();
|
||||||
featureDiv.scrollIntoView({
|
sec.scrollIntoView({
|
||||||
block: "start",
|
block: "start",
|
||||||
inline: "nearest",
|
inline: "nearest",
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default { welcomeScript };
|
export default { welcomeScript };
|
||||||
|
|
|
@ -70,4 +70,14 @@
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action_buttons {
|
||||||
|
padding: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 12pt;
|
||||||
|
padding: 10pt 12pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -223,3 +223,18 @@ noscript {
|
||||||
max-width: 32px;
|
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