style(cms): improve editor ui and implement collapsible item cards

Enhance the CMS administration interface by introducing a more refined design system for content editors. This update replaces generic Bootstrap utility classes with dedicated CMS styling to improve visual hierarchy and usability.
Key changes:
- Introduce `cms-editor-group` and `cms-item-card` classes for consistent grouping and item styling.
- Implement collapsible functionality for item cards to manage long lists of content more effectively.
- Standardize editor buttons, including new styles for drag handles, remove buttons, and add buttons.
- Update the fixed bottom action bar with improved backdrop filters, shadows, and spacing.
- Refactor editor scripts across Accreditation, Admissions, History, Partnerships, and Policies to utilize the new UI components and collapse logic.
- Add comprehensive CSS to `main.ejs` to support the new CMS design tokens and layout behaviors.
This commit is contained in:
Tống Thành Đạt
2026-04-20 20:10:27 +07:00
parent 7df3a6f6bf
commit 5615c494cf
10 changed files with 387 additions and 137 deletions
@@ -140,6 +140,9 @@
renderDirectoryTabs();
renderPartners();
});
node.querySelector("[data-toggle-item]")?.addEventListener("click", function () {
node.classList.toggle("is-collapsed");
});
directoryTabsList.appendChild(node);
});
@@ -204,6 +207,9 @@
state.directory.partners.splice(index, 1);
renderPartners();
});
node.querySelector("[data-toggle-item]")?.addEventListener("click", function () {
node.classList.toggle("is-collapsed");
});
partnersList.appendChild(node);
});
@@ -277,6 +283,9 @@
field.options.push("");
renderInquiryFields();
});
node.querySelector("[data-toggle-item]")?.addEventListener("click", function () {
node.classList.toggle("is-collapsed");
});
function toggleOptions() {
optionsWrap.classList.toggle("d-none", typeSelect.value !== "select");