refactor: migrate templates to tailwind utilities
This commit is contained in:
@@ -6,6 +6,11 @@
|
||||
return;
|
||||
}
|
||||
dropdown.classList.toggle("open");
|
||||
const menu = dropdown.querySelector("[data-dropdown-menu]");
|
||||
if (menu instanceof HTMLElement) {
|
||||
menu.classList.toggle("invisible");
|
||||
menu.classList.toggle("opacity-0");
|
||||
}
|
||||
};
|
||||
window.toggleDropdown = toggleDropdown;
|
||||
document.addEventListener("click", (event) => {
|
||||
@@ -19,6 +24,11 @@
|
||||
}
|
||||
if (!dropdown.contains(target)) {
|
||||
dropdown.classList.remove("open");
|
||||
const menu = dropdown.querySelector("[data-dropdown-menu]");
|
||||
if (menu instanceof HTMLElement) {
|
||||
menu.classList.add("invisible");
|
||||
menu.classList.add("opacity-0");
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -6,6 +6,11 @@
|
||||
}
|
||||
|
||||
dropdown.classList.toggle('open')
|
||||
const menu = dropdown.querySelector('[data-dropdown-menu]')
|
||||
if (menu instanceof HTMLElement) {
|
||||
menu.classList.toggle('invisible')
|
||||
menu.classList.toggle('opacity-0')
|
||||
}
|
||||
}
|
||||
|
||||
;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
|
||||
@@ -23,6 +28,11 @@
|
||||
|
||||
if (!dropdown.contains(target)) {
|
||||
dropdown.classList.remove('open')
|
||||
const menu = dropdown.querySelector('[data-dropdown-menu]')
|
||||
if (menu instanceof HTMLElement) {
|
||||
menu.classList.add('invisible')
|
||||
menu.classList.add('opacity-0')
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
|
||||
@@ -6,8 +6,14 @@
|
||||
return;
|
||||
}
|
||||
const triggers = group.querySelectorAll("[data-tab-trigger]");
|
||||
triggers.forEach((tab) => tab.classList.remove("active"));
|
||||
clickedTab.classList.add("active");
|
||||
triggers.forEach((tab) => {
|
||||
tab.classList.add("tab-trigger");
|
||||
tab.classList.remove("bg-[var(--surface-tab-active)]", "text-[var(--accent)]");
|
||||
tab.classList.add("bg-[var(--panel-soft)]", "text-[var(--text-muted)]");
|
||||
});
|
||||
clickedTab.classList.add("tab-trigger");
|
||||
clickedTab.classList.remove("bg-[var(--panel-soft)]", "text-[var(--text-muted)]");
|
||||
clickedTab.classList.add("bg-[var(--surface-tab-active)]", "text-[var(--accent)]");
|
||||
};
|
||||
document.addEventListener("click", (event) => {
|
||||
const target = event.target;
|
||||
|
||||
@@ -6,8 +6,14 @@
|
||||
}
|
||||
|
||||
const triggers = group.querySelectorAll('[data-tab-trigger]')
|
||||
triggers.forEach((tab: Element): void => tab.classList.remove('active'))
|
||||
clickedTab.classList.add('active')
|
||||
triggers.forEach((tab: Element): void => {
|
||||
tab.classList.add('tab-trigger')
|
||||
tab.classList.remove('bg-[var(--surface-tab-active)]', 'text-[var(--accent)]')
|
||||
tab.classList.add('bg-[var(--panel-soft)]', 'text-[var(--text-muted)]')
|
||||
})
|
||||
clickedTab.classList.add('tab-trigger')
|
||||
clickedTab.classList.remove('bg-[var(--panel-soft)]', 'text-[var(--text-muted)]')
|
||||
clickedTab.classList.add('bg-[var(--surface-tab-active)]', 'text-[var(--accent)]')
|
||||
}
|
||||
|
||||
document.addEventListener('click', (event: MouseEvent): void => {
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
if (!(target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
if (!target.closest(".header-search-wrapper")) {
|
||||
if (!target.closest("[data-search-root]")) {
|
||||
searchDropdown.replaceChildren();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
return
|
||||
}
|
||||
|
||||
if (!target.closest('.header-search-wrapper')) {
|
||||
if (!target.closest('[data-search-root]')) {
|
||||
searchDropdown.replaceChildren()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
return formatter.format(date);
|
||||
};
|
||||
const updateNextAiring = (node, parsed) => {
|
||||
const card = node.closest(".notification-content");
|
||||
const card = node.closest("[data-notification-content]");
|
||||
if (!card) {
|
||||
return;
|
||||
}
|
||||
@@ -164,7 +164,7 @@
|
||||
nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`;
|
||||
};
|
||||
const updateNode = (node, localOffsetMinutes) => {
|
||||
const card = node.closest(".notification-content");
|
||||
const card = node.closest("[data-notification-content]");
|
||||
const nextNode = card ? card.querySelector("[data-next-airing]") : null;
|
||||
const structured = parseFromStructuredAttrs(node);
|
||||
const source = node.getAttribute("data-jst-text");
|
||||
|
||||
@@ -190,7 +190,7 @@
|
||||
}
|
||||
|
||||
const updateNextAiring = (node: Element, parsed: ParsedBroadcast): void => {
|
||||
const card = node.closest('.notification-content')
|
||||
const card = node.closest('[data-notification-content]')
|
||||
if (!card) {
|
||||
return
|
||||
}
|
||||
@@ -210,7 +210,7 @@
|
||||
}
|
||||
|
||||
const updateNode = (node: Element, localOffsetMinutes: number): void => {
|
||||
const card = node.closest('.notification-content')
|
||||
const card = node.closest('[data-notification-content]')
|
||||
const nextNode = card ? card.querySelector('[data-next-airing]') : null
|
||||
|
||||
const structured = parseFromStructuredAttrs(node)
|
||||
|
||||
Reference in New Issue
Block a user