forked from UKSOURCE/cms.lams
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
@@ -19,30 +19,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-3 bg-light-subtle p-3 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="cms-editor-group mb-4">
|
||||
<div class="mb-3">
|
||||
<div>
|
||||
<label class="form-label fw-semibold mb-1">Category tabs</label>
|
||||
<div class="form-text mt-0">The frontend shows up to 3 direct tabs. Additional tabs move into a More dropdown.</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="addDirectoryTabBtn">
|
||||
<i class="fas fa-plus me-1"></i>Add Tab
|
||||
</button>
|
||||
</div>
|
||||
<div id="directoryTabsList"></div>
|
||||
<button type="button" class="cms-add-button mt-3" id="addDirectoryTabBtn">
|
||||
<i class="fas fa-plus me-2"></i>Add Tab
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-3 bg-light-subtle p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="cms-editor-group">
|
||||
<div class="mb-3">
|
||||
<div>
|
||||
<label class="form-label fw-semibold mb-1">Partners</label>
|
||||
<div class="form-text mt-0">Use a short unique partner key so card state stays stable.</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="addPartnerBtn">
|
||||
<i class="fas fa-plus me-1"></i>Add Partner
|
||||
</button>
|
||||
</div>
|
||||
<div id="partnersList"></div>
|
||||
<button type="button" class="cms-add-button mt-3" id="addPartnerBtn">
|
||||
<i class="fas fa-plus me-2"></i>Add Partner
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -15,17 +15,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-3 bg-light-subtle p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="cms-editor-group">
|
||||
<div class="mb-3">
|
||||
<div>
|
||||
<label class="form-label fw-semibold mb-1">Form fields</label>
|
||||
<div class="form-text mt-0">Manage labels, placeholders, type, width, and dropdown options.</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="addInquiryFieldBtn">
|
||||
<i class="fas fa-plus me-1"></i>Add Field
|
||||
</button>
|
||||
</div>
|
||||
<div id="inquiryFieldsList"></div>
|
||||
<button type="button" class="cms-add-button mt-3" id="addInquiryFieldBtn">
|
||||
<i class="fas fa-plus me-2"></i>Add Field
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
<template id="directoryTabTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="directory-tab">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="card cms-item-card mb-3" data-item="directory-tab">
|
||||
<div class="card-header d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<button type="button" class="drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div class="fw-semibold">Category Tab</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="form-label fw-semibold">Tab label</label>
|
||||
@@ -19,10 +24,10 @@
|
||||
</template>
|
||||
|
||||
<template id="partnerTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="partner">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="card cms-item-card mb-3" data-item="partner">
|
||||
<div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<button type="button" class="drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div>
|
||||
@@ -30,9 +35,14 @@
|
||||
<div class="small text-muted" data-subtitle></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
@@ -87,10 +97,10 @@
|
||||
</template>
|
||||
|
||||
<template id="inquiryFieldTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="inquiry-field">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="card cms-item-card mb-3" data-item="inquiry-field">
|
||||
<div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<button type="button" class="drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div>
|
||||
@@ -98,9 +108,14 @@
|
||||
<div class="small text-muted" data-subtitle></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
@@ -138,15 +153,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" data-options-wrap>
|
||||
<div class="border rounded-3 p-3 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="cms-editor-group">
|
||||
<div class="mb-2">
|
||||
<label class="form-label fw-semibold mb-0">Dropdown options</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-add-option>
|
||||
<i class="fas fa-plus me-1"></i>Add Option
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text mb-2">Only used when the field type is Dropdown.</div>
|
||||
<div data-options-list></div>
|
||||
<button type="button" class="cms-add-button mt-3" data-add-option>
|
||||
<i class="fas fa-plus me-2"></i>Add Option
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,11 +171,11 @@
|
||||
|
||||
<template id="inquiryOptionTemplate">
|
||||
<div class="input-group mb-2" data-item="inquiry-option">
|
||||
<button type="button" class="btn btn-light border drag-handle" title="Drag to reorder">
|
||||
<button type="button" class="drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<input class="form-control" data-option-value maxlength="50" placeholder="Option label">
|
||||
<button type="button" class="btn btn-outline-danger" data-remove-item>
|
||||
<button type="button" class="cms-remove-button" data-remove-item title="Remove option">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user