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.
183 lines
7.8 KiB
Plaintext
183 lines
7.8 KiB
Plaintext
<template id="directoryTabTemplate">
|
|
<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="drag-handle" title="Drag to reorder">
|
|
<i class="fas fa-grip-vertical"></i>
|
|
</button>
|
|
<div class="fw-semibold">Category Tab</div>
|
|
</div>
|
|
<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>
|
|
<input class="form-control" data-field="label" maxlength="30" placeholder="Industry">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="partnerTemplate">
|
|
<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="drag-handle" title="Drag to reorder">
|
|
<i class="fas fa-grip-vertical"></i>
|
|
</button>
|
|
<div>
|
|
<div class="fw-semibold" data-title>Partner</div>
|
|
<div class="small text-muted" data-subtitle></div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Partner key</label>
|
|
<input class="form-control" data-field="id" maxlength="50">
|
|
<div class="form-text">Use a short unique key.</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Partner name</label>
|
|
<input class="form-control" data-field="name" maxlength="90">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Category</label>
|
|
<input class="form-control" data-field="category" list="">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">Card summary</label>
|
|
<textarea class="form-control" data-field="summary" rows="3" maxlength="130"></textarea>
|
|
<div class="form-text">The card preview is capped at 130 characters.</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">Partner logo</label>
|
|
<div class="input-group">
|
|
<input class="form-control" data-field="logo">
|
|
<button class="btn btn-outline-primary" type="button" data-upload-button>
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
<div class="form-text">Recommended 105x80 px minimum visible ratio</div>
|
|
<img class="img-thumbnail mt-2 d-none" data-preview style="max-height: 180px;">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">Logo alt text</label>
|
|
<input class="form-control" data-field="logoAlt" maxlength="120">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">Collaboration type</label>
|
|
<input class="form-control" data-field="collabType" maxlength="40">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">About text</label>
|
|
<textarea class="form-control" data-field="about" rows="5" maxlength="600"></textarea>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">Benefits</label>
|
|
<textarea class="form-control" data-field="benefits" rows="4" maxlength="240"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="inquiryFieldTemplate">
|
|
<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="drag-handle" title="Drag to reorder">
|
|
<i class="fas fa-grip-vertical"></i>
|
|
</button>
|
|
<div>
|
|
<div class="fw-semibold" data-title>Field</div>
|
|
<div class="small text-muted" data-subtitle></div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Field key</label>
|
|
<input class="form-control" data-field="id" maxlength="40">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Field label</label>
|
|
<input class="form-control" data-field="label" maxlength="40">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Placeholder text</label>
|
|
<input class="form-control" data-field="placeholder" maxlength="80">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Field type</label>
|
|
<select class="form-select" data-field="type">
|
|
<option value="text">Single line text</option>
|
|
<option value="textarea">Paragraph</option>
|
|
<option value="select">Dropdown</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Field width</label>
|
|
<select class="form-select" data-field="width">
|
|
<option value="half">Half width</option>
|
|
<option value="full">Full width</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" data-field="required">
|
|
<label class="form-check-label fw-semibold">Required field</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12" data-options-wrap>
|
|
<div class="cms-editor-group">
|
|
<div class="mb-2">
|
|
<label class="form-label fw-semibold mb-0">Dropdown options</label>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="inquiryOptionTemplate">
|
|
<div class="input-group mb-2" data-item="inquiry-option">
|
|
<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="cms-remove-button" data-remove-item title="Remove option">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|