Update: Home, About fixed btn, UI Dashboard responesive

views/admin/about/index.ejs

@@ -17,7 +17,7 @@
 
     <div class="row">
         <div class="col-12">
-            <form method="POST" id="aboutForm" action="/admin/about/update">
+            <form method="POST" id="aboutForm" action="/admin/about/update" class="content-with-fixed-buttons">
                 <!-- Hidden JSON inputs -->
                 <input type="hidden" name="hero" id="heroJson">
                 <input type="hidden" name="leadership" id="leadershipJson">
@@ -357,12 +357,17 @@
                         </div><!-- /.tab-content -->
                     </div><!-- /.card-body -->
 
-                    <div class="card-footer bg-light d-flex justify-content-end py-3 gap-2">
-                        <button type="button" class="btn btn-outline-secondary px-4" onclick="resetForm()"><i
-                                class="fas fa-undo me-2"></i>Reset</button>
-                        <button type="submit" class="btn btn-outline-primary px-4" id="submitBtn"><i
-                                class="fas fa-save me-2"></i>Save Changes</button>
                 </div>
+
+                <div class="fixed-bottom-buttons">
+                    <button type="button" class="btn btn-secondary" onclick="resetForm()">
+                        <i class="fas fa-undo"></i>
+                        <span>Reset</span>
+                    </button>
+                    <button type="submit" class="btn btn-primary" id="submitBtn">
+                        <i class="fas fa-save"></i>
+                        <span>Save Changes</span>
+                    </button>
                 </div>
             </form>
         </div>
@@ -373,7 +378,7 @@
     let originalFormData = null;
 
     document.addEventListener('DOMContentLoaded', function () {
-        originalFormData = <% - JSON.stringify(data) %>;
+        originalFormData = <%- JSON.stringify(data) %>;
         populateAll(originalFormData);
 
         document.getElementById('aboutForm').addEventListener('submit', function (e) {

views/admin/dashboard.ejs

@@ -7,10 +7,11 @@
       <h5 class="mb-0" style="color: var(--primary-color)">Quick Management</h5>
     </div>
     <div class="card-body p-0">
-      <div class="row g-0">
+      <div class="row g-0 align-items-stretch">
+        
         <!-- Home -->
         <div class="col-md-4 border-end">
-          <div class="p-4">
+          <div class="p-4 d-flex flex-column h-100">
             <div class="d-flex align-items-center mb-3">
               <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);">
@@ -21,7 +22,7 @@
                 <p class="text-muted mb-0 small">Manage homepage</p>
               </div>
             </div>
-            <a href="/admin/home" class="btn btn-sm btn-primary w-100 mt-2">
+            <a href="/admin/home" class="btn btn-sm btn-primary w-100 mt-auto">
               <i class="fas fa-edit me-2"></i>Edit
             </a>
           </div>
@@ -29,7 +30,7 @@
 
         <!-- Header & Menu -->
         <div class="col-md-4 border-end">
-          <div class="p-4">
+          <div class="p-4 d-flex flex-column h-100">
             <div class="d-flex align-items-center mb-3">
               <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);">
@@ -40,7 +41,7 @@
                 <p class="text-muted mb-0 small">Manage header & menu</p>
               </div>
             </div>
-            <a href="/admin/header" class="btn btn-sm btn-primary w-100 mt-2">
+            <a href="/admin/header" class="btn btn-sm btn-primary w-100 mt-auto">
               <i class="fas fa-edit me-2"></i>Edit
             </a>
           </div>
@@ -48,7 +49,7 @@
 
         <!-- Footer -->
         <div class="col-md-4">
-          <div class="p-4">
+          <div class="p-4 d-flex flex-column h-100">
             <div class="d-flex align-items-center mb-3">
               <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);">
@@ -59,7 +60,7 @@
                 <p class="text-muted mb-0 small">Manage footer</p>
               </div>
             </div>
-            <a href="/admin/footer" class="btn btn-sm btn-primary w-100 mt-2">
+            <a href="/admin/footer" class="btn btn-sm btn-primary w-100 mt-auto">
               <i class="fas fa-edit me-2"></i>Edit
             </a>
           </div>
@@ -88,8 +89,7 @@
               <% 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' }, {
+                icon: 'fa-certificate' }, {label: 'Policies' , href: '/admin/policies' , icon: 'fa-file-contract' }, ]; %>
-                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);">
@@ -112,85 +112,9 @@
           </div>
         </div>
 
-        <!-- Contact -->
-        <div class="col-md-4 border-end border-top">
-          <div class="p-4">
-            <div class="d-flex align-items-center mb-3">
-              <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-envelope fa-lg" style="color: var(--primary-color);"></i>
-              </div>
-              <div>
-                <h5 class="mb-0">Contact</h5>
-                <p class="text-muted mb-0 small">Manage contact</p>
-              </div>
-            </div>
-            <a href="/admin/contact" class="btn btn-sm btn-primary w-100 mt-2">
-              <i class="fas fa-edit me-2"></i>Edit
-            </a>
-          </div>
-        </div>
-
-        <!-- Student Support -->
-        <div class="col-md-4 border-end border-top">
-          <div class="p-4">
-            <div class="d-flex align-items-center mb-3">
-              <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-life-ring fa-lg" style="color: var(--primary-color);"></i>
-              </div>
-              <div>
-                <h5 class="mb-0">Student Support</h5>
-                <p class="text-muted mb-0 small">LAMS student support page</p>
-              </div>
-            </div>
-            <a href="/admin/student-support" class="btn btn-sm btn-primary w-100 mt-2">
-              <i class="fas fa-edit me-2"></i>Edit
-            </a>
-          </div>
-        </div>
-
-        <!-- Request Info -->
-        <div class="col-md-4 border-end border-top">
-          <div class="p-4">
-            <div class="d-flex align-items-center mb-3">
-              <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-file-alt fa-lg" style="color: var(--primary-color);"></i>
-              </div>
-              <div>
-                <h5 class="mb-0">Request Info</h5>
-                <p class="text-muted mb-0 small">LAMS request information page</p>
-              </div>
-            </div>
-            <a href="/admin/request-info" class="btn btn-sm btn-primary w-100 mt-2">
-              <i class="fas fa-edit me-2"></i>Edit
-            </a>
-          </div>
-        </div>
-
-        <!-- Blog -->
-        <div class="col-md-4 border-end border-top">
-          <div class="p-4">
-            <div class="d-flex align-items-center mb-3">
-              <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-blog fa-lg" style="color: var(--primary-color);"></i>
-              </div>
-              <div>
-                <h5 class="mb-0">Blog</h5>
-                <p class="text-muted mb-0 small">Manage blog posts</p>
-              </div>
-            </div>
-            <a href="/admin/blog" class="btn btn-sm btn-primary w-100 mt-2">
-              <i class="fas fa-edit me-2"></i>Edit
-            </a>
-          </div>
-        </div>
-
         <!-- Programme -->
         <div class="col-md-4 border-end border-top">
-          <div class="p-4">
+          <div class="p-4 d-flex flex-column h-100">
             <div class="d-flex align-items-center mb-3">
               <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);">
@@ -201,7 +125,102 @@
                 <p class="text-muted mb-0 small">Manage academic programmes</p>
               </div>
             </div>
-            <a href="/admin/programme" class="btn btn-sm btn-primary w-100 mt-2">
+            <a href="/admin/programme" class="btn btn-sm btn-primary w-100 mt-auto">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <!-- Student Support -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4 d-flex flex-column h-100">
+            <div class="d-flex align-items-center mb-3">
+              <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-life-ring fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Student Support</h5>
+                <p class="text-muted mb-0 small">LAMS student support page</p>
+              </div>
+            </div>
+            <a href="/admin/student-support" class="btn btn-sm btn-primary w-100 mt-auto">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <!-- Admissioin -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4 d-flex flex-column h-100">
+            <div class="d-flex align-items-center mb-3">
+              <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-door-open fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Admisions</h5>
+                <p class="text-muted mb-0 small">LAMS admission page</p>
+              </div>
+            </div>
+            <a href="/admin/admissions" class="btn btn-sm btn-primary w-100 mt-auto">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <!-- Blog -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4 d-flex flex-column h-100">
+            <div class="d-flex align-items-center mb-3">
+              <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-blog fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Blog</h5>
+                <p class="text-muted mb-0 small">Manage blog posts</p>
+              </div>
+            </div>
+            <a href="/admin/blog" class="btn btn-sm btn-primary w-100 mt-auto">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <!-- Contact -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4 d-flex flex-column h-100">
+            <div class="d-flex align-items-center mb-3">
+              <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-envelope fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Contact</h5>
+                <p class="text-muted mb-0 small">Manage contact</p>
+              </div>
+            </div>
+            <a href="/admin/contact" class="btn btn-sm btn-primary w-100 mt-auto">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
+
+        <!-- Request Info -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4 d-flex flex-column h-100">
+            <div class="d-flex align-items-center mb-3">
+              <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-file-alt fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Request Info</h5>
+                <p class="text-muted mb-0 small">LAMS request information page</p>
+              </div>
+            </div>
+            <a href="/admin/request-info" class="btn btn-sm btn-primary w-100 mt-auto">
               <i class="fas fa-edit me-2"></i>Edit
             </a>
           </div>

views/admin/home/index.ejs

@@ -17,7 +17,7 @@
 
   <div class="row">
     <div class="col-12">
-      <form method="POST" id="homeForm" action="/admin/home/update">
+      <form method="POST" id="homeForm" action="/admin/home/update" class="content-with-fixed-buttons">
         <!-- Hidden JSON inputs -->
         <input type="hidden" name="hero" id="heroJson">
         <input type="hidden" name="quickLinks" id="quickLinksJson">
@@ -270,12 +270,17 @@
             </div><!-- /.tab-content -->
           </div><!-- /.card-body -->
 
-          <div class="card-footer bg-light d-flex justify-content-end py-3 gap-2">
-            <button type="button" class="btn btn-outline-secondary px-4" onclick="resetForm()"><i
-                class="fas fa-undo me-2"></i>Reset</button>
-            <button type="submit" class="btn btn-outline-primary px-4" id="submitBtn"><i
-                class="fas fa-save me-2"></i>Save Changes</button>
         </div>
+
+        <div class="fixed-bottom-buttons">
+          <button type="button" class="btn btn-secondary" onclick="resetForm()">
+            <i class="fas fa-undo"></i>
+            <span>Reset</span>
+          </button>
+          <button type="submit" class="btn btn-primary" id="submitBtn">
+            <i class="fas fa-save"></i>
+            <span>Save Changes</span>
+          </button>
         </div>
       </form>
     </div>
@@ -286,7 +291,7 @@
   let originalFormData = null;
 
   document.addEventListener('DOMContentLoaded', function () {
-    originalFormData = <% - JSON.stringify(data) %>;
+    originalFormData = <%- JSON.stringify(data) %>;
     populateAll(originalFormData);
 
     document.getElementById('homeForm').addEventListener('submit', function (e) {

views/layouts/main.ejs

@@ -1102,11 +1102,17 @@
           <li class="nav-item">
             <a class="nav-link <%= currentPath === '/admin/blog' ? 'active' : '' %>" href="/admin/blog">Blog</a>
           </li>
+
           <li class="nav-item">
             <a class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>" href="/admin/contact">Contact
               Us</a>
           </li>
           
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/audit-logs' ? 'active' : '' %>"
+              href="/admin/request-info">Request Info
+            </a>
+          </li>
           
           <li class="nav-item">
             <a class="nav-link <%= currentPath === '/admin/audit-logs' ? 'active' : '' %>"