Update: Dashboard-Quick Management, check loading for icon-picker

This commit is contained in:
2026-04-23 14:18:38 +07:00
parent 3daef1ada5
commit 8ce6cf3c7e
2 changed files with 55 additions and 10 deletions
+49 -10
View File
@@ -65,22 +65,51 @@
</div>
</div>
<!-- About -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<!-- About Section - Accordion -->
<div class="col-12 border-top">
<div class="accordion-header d-flex align-items-center justify-content-between p-4" onclick="toggleAbout()"
style="cursor: pointer;">
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">About Us</h5>
<p class="text-muted mb-0 small">Manage about us</p>
<h5 class="mb-0">About Section</h5>
<p class="text-muted mb-0 small">Manage about pages</p>
</div>
</div>
<a href="/admin/about" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
<i class="fas fa-chevron-down" id="about-chevron"
style="color: var(--primary-color); transition: transform 0.2s;"></i>
</div>
<div id="about-body" style="display: none;" class="px-4 pb-4">
<div class="row g-3">
<% const aboutPages=[ { label: 'About Us' , href: '/admin/about' , icon: 'fa-users' }, {
label: 'Partnerships' , href: '/admin/partnerships' , icon: 'fa-handshake' }, { label: 'History' ,
href: '/admin/history' , icon: 'fa-history' }, { label: 'Accreditation' ,
href: '/admin/accreditation' , icon: 'fa-certificate' }, { label: 'Admissions' ,
href: '/admin/admissions' , icon: 'fa-door-open' }, { label: 'Policies' ,
href: '/admin/policies' , icon: 'fa-file-contract' }, ]; %>
<% aboutPages.forEach(page=> { %>
<div class="col-md-4">
<div class="border rounded p-3" style="background-color: var(--bs-light);">
<div class="d-flex align-items-center mb-2">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas <%= page.icon %>" style="color: var(--primary-color);"></i>
</div>
<span class="fw-500">
<%= page.label %>
</span>
</div>
<a href="<%= page.href %>" class="btn btn-sm btn-primary w-100">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<% }) %>
</div>
</div>
</div>
@@ -510,4 +539,14 @@
background-color: var(--primary-color) !important;
color: white;
}
</style>
</style>
<script>
function toggleAbout() {
const body = document.getElementById('about-body');
const chevron = document.getElementById('about-chevron');
const isOpen = body.style.display === 'block';
body.style.display = isOpen ? 'none' : 'block';
chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
}
</script>