forked from UKSOURCE/cms.lams
Tống Thành Đạt
5615c494cf
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.
53 lines
2.1 KiB
Plaintext
53 lines
2.1 KiB
Plaintext
<div class="tab-pane fade <%= activeTab === 'directory' ? 'show active' : '' %>" id="directory" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0"><i class="fas fa-handshake me-2"></i>Partner Directory</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-8">
|
|
<label class="form-label fw-semibold">Section heading</label>
|
|
<input class="form-control" id="directoryHeading" maxlength="70" value="<%= data.directory?.heading || '' %>">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Load more button label</label>
|
|
<input class="form-control" id="directoryLoadMoreLabel" maxlength="40" value="<%= data.directory?.loadMoreLabel || '' %>">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">Section description</label>
|
|
<textarea class="form-control" id="directoryDescription" rows="3" maxlength="180"><%= data.directory?.description || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</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="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>
|
|
</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>
|
|
</div>
|
|
|
|
|
|
|