tenkuma/web
tenkuma/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fixed hint bar when header is not visible

Browse source
This commit is contained in:
天クマ 2026-04-23 17:12:29 -03:00
commit b54133ddd2
3 changed files with 55 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
_includes/base.njk
View file

@ -14,10 +14,10 @@
<title>Adrian Victor{% if pageTitle or postTitle %} - {{pageTitle or postTitle}}{% endif %}</title> <title>Adrian Victor{% if pageTitle or postTitle %} - {{pageTitle or postTitle}}{% endif %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/main.css?fixcache=1"> <link rel="stylesheet" href="/static/main.css?fixcache=1">
<script src="/static/scripts/ccd.js"></script> <script type="module" src="/static/scripts/ccd.js"></script>
<script src="/static/scripts/music.js" defer></script> <script type="module" src="/static/scripts/music.js" defer></script>
<script src="/static/scripts/88x31.js" defer></script> <script type="module" src="/static/scripts/88x31.js" defer></script>
<script src="/static/scripts/tips.js" defer></script> <script type="module" src="/static/scripts/tips.js" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">

10
static/main.css
View file

@ -618,6 +618,16 @@ div.hs.selected {
opacity: 0.6; opacity: 0.6;
} }
#fixedHint {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 10;
padding: .2em;
outline: thin solid var(--theme-color);
}
#sound { #sound {
filter: invert(); filter: invert();
} }

42
static/scripts/tips.js
View file

@ -1,15 +1,49 @@
/* This script provides functionality similar to FL Studio's hint panel. */ const body = document.querySelector('body');
const elements = document.querySelectorAll('[data-tip]'); const elements = document.querySelectorAll('[data-tip]');
const hint = document.querySelector("#headerSubtitle"); const hint = document.querySelector("#headerSubtitle");
const hintPanelDefaultText = hint.innerHTML; const hintPanelDefaultText = hint.innerHTML;
let fixedHint;
let currentObserver;
elements.forEach(el => { elements.forEach(el => {
el.addEventListener('mouseenter', function() { el.addEventListener('mouseenter', function() {
hint.innerHTML = `${this.dataset.tip}`; cleanup();
if (currentObserver) {
currentObserver.disconnect();
}
currentObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
fixedHint = document.createElement('p');
fixedHint.id = "fixedHint";
fixedHint.innerHTML = el.dataset.tip;
fixedHint.setAttribute('aria-hidden', 'true');
body.appendChild(fixedHint);
} else {
hint.innerHTML = el.dataset.tip;
}
})
});
hint.innerHTML = el.dataset.tip;
currentObserver.observe(hint);
}); });
el.addEventListener('mouseleave', function() { el.addEventListener('mouseleave', function() {
hint.innerHTML = hintPanelDefaultText; cleanup();
}); });
}) })
function cleanup() {
hint.innerHTML = hintPanelDefaultText;
hint.classList.remove('fixed');
if (fixedHint) {
fixedHint.remove();
}
if (currentObserver) {
currentObserver.disconnect();
currentObserver = null;
}
}