refactor: migrate templates to tailwind utilities

This commit is contained in:
2026-04-15 00:07:56 +02:00
parent 01c738588f
commit 0a5f64c604
23 changed files with 374 additions and 1614 deletions

View File

@@ -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");
}
}
});
})();

View File

@@ -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')
}
}
})
})()

View File

@@ -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;

View File

@@ -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 => {

View File

@@ -86,7 +86,7 @@
if (!(target instanceof Element)) {
return;
}
if (!target.closest(".header-search-wrapper")) {
if (!target.closest("[data-search-root]")) {
searchDropdown.replaceChildren();
}
});

View File

@@ -107,7 +107,7 @@
return
}
if (!target.closest('.header-search-wrapper')) {
if (!target.closest('[data-search-root]')) {
searchDropdown.replaceChildren()
}
})

View File

@@ -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");

View File

@@ -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)