narrow desktop breakpoint constraint relaxed somewhat to accomodate more fringe-case window aspect ratios; #id_gear_btn now, like #id_kit_btn, restyles to contain --quaUser rgb value when menu is active; dashboard.html include ordering switched for #id_dash_applet_menu & #id_gear_btn, to fix an issue causing the menu to overlay the btn instead of the other way around
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
@@ -6,7 +6,9 @@ const initGearMenus = () => {
|
||||
e.stopPropagation();
|
||||
const menu = document.getElementById(menuId);
|
||||
if (!menu) return;
|
||||
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
|
||||
const opening = menu.style.display === 'none' || menu.style.display === '';
|
||||
menu.style.display = opening ? 'block' : 'none';
|
||||
gear.classList.toggle('active', opening);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
@@ -14,6 +16,7 @@ const initGearMenus = () => {
|
||||
if (!menu || menu.style.display === 'none') return;
|
||||
if (e.target.closest('.applet-menu-cancel') || !menu.contains(e.target)) {
|
||||
menu.style.display = 'none';
|
||||
gear.classList.remove('active');
|
||||
}
|
||||
});
|
||||
})
|
||||
@@ -33,5 +36,6 @@ document.body.addEventListener('htmx:afterSwap', (e) => {
|
||||
document.querySelectorAll('.gear-btn').forEach(gear => {
|
||||
const menu = document.getElementById(gear.dataset.menuTarget);
|
||||
if (menu) menu.style.display = 'none';
|
||||
gear.classList.remove('active');
|
||||
});
|
||||
});
|
||||
@@ -9,8 +9,10 @@
|
||||
});
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
if (dialog.open) {
|
||||
dialog.close();
|
||||
if (btn.classList.contains('active')) {
|
||||
dialog.removeAttribute('open');
|
||||
btn.classList.remove('active');
|
||||
clearSelection();
|
||||
return;
|
||||
}
|
||||
fetch(btn.dataset.kitUrl, {
|
||||
@@ -61,9 +63,9 @@
|
||||
});
|
||||
|
||||
function attachCardListeners() {
|
||||
dialog.querySelectorAll('.kit-card').forEach(function (card) {
|
||||
dialog.querySelectorAll('.token[data-token-id]').forEach(function (card) {
|
||||
card.addEventListener('click', function () {
|
||||
dialog.querySelectorAll('.kit-card.selected').forEach(function (c) {
|
||||
dialog.querySelectorAll('.token[data-token-id].selected').forEach(function (c) {
|
||||
c.classList.remove('selected');
|
||||
});
|
||||
card.classList.add('selected');
|
||||
@@ -71,6 +73,21 @@
|
||||
var slot = document.querySelector('.token-slot');
|
||||
if (slot) slot.classList.add('ready');
|
||||
});
|
||||
|
||||
card.addEventListener('mouseenter', function () {
|
||||
var tooltip = card.querySelector('.token-tooltip');
|
||||
if (!tooltip) return;
|
||||
var rect = card.getBoundingClientRect();
|
||||
tooltip.style.position = 'fixed';
|
||||
tooltip.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
|
||||
tooltip.style.left = rect.left + 'px';
|
||||
tooltip.style.display = 'block';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function () {
|
||||
var tooltip = card.querySelector('.token-tooltip');
|
||||
if (tooltip) tooltip.style.display = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user