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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user