From 2ac9656203e2f33c6661ec95f0cddb17e62d3133 Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Fri, 23 Oct 2026 23:21:58 -0400
Subject: [PATCH] Fix mobile UI for faculty/admin backend dashboard

The faculty/admin backend (sidebar, top nav, dashboard widgets) had
zero mobile responsiveness, unlike the login page and student portal
which already had proper breakpoints. On a phone the fixed 260px
sidebar plus its unconditional margin-left permanently ate most of
the screen, and the dashboard's KPI/chart/widget rows used fixed
CSS grid columns with no stacking.

- sidebar.xml: sidebar goes off-canvas below 768px with a hamburger
  toggle and tap-to-close backdrop, instead of always being visible
- backend_forms.scss: content margin-left and the forced
  display:flex/overflow:visible on the top menu are now scoped to
  desktop only, restoring Odoo's native d-none d-md-flex mobile hide
  that the override was defeating
- education_dashboard_templates.xml: KPI/chart/widget grids stack to
  2-col/1-col under 768px/420px instead of staying fixed at 5/3 cols

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/xml/education_dashboard_templates.xml | 28 ++++++++++++++----
 .../static/src/scss/backend_forms.scss        | 29 +++++++++++++------
 .../static/src/xml/sidebar.xml                | 27 +++++++++++++++++
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/addons/education_dashboard/static/src/xml/education_dashboard_templates.xml b/addons/education_dashboard/static/src/xml/education_dashboard_templates.xml
index 8d2cd63..47c594b 100644
--- a/addons/education_dashboard/static/src/xml/education_dashboard_templates.xml
+++ b/addons/education_dashboard/static/src/xml/education_dashboard_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates xml:space="preserve">
 <t t-name="education_dashboard.DashboardMain">
-<div style="background:#eef9f9; padding:20px 24px 40px 24px; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;">
+<div class="edu-dashboard-root" style="background:#eef9f9; padding:20px 24px 40px 24px; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;">
 
 <style>
 .edu-card { background:#fff; border-radius:14px; border:1px solid #e2e8f0; box-shadow:0 2px 12px rgba(15,23,42,0.06); }
@@ -17,10 +17,28 @@
 .edu-ann-row { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #f1f5f9; align-items:flex-start; }
 .edu-ann-row:last-child { border-bottom:none; }
 .edu-pill { padding:3px 9px; border-radius:20px; font-size:0.68rem; font-weight:700; flex-shrink:0; }
+
+/* ── Responsive overrides (!important needed to beat inline styles) ── */
+@media (max-width: 1100px) {
+  .edu-charts-grid { grid-template-columns: 1fr 1fr !important; }
+  .edu-charts-grid > :last-child { grid-column: 1 / -1 !important; }
+}
+@media (max-width: 768px) {
+  .edu-dashboard-root { padding: 14px 14px 32px 14px !important; }
+  .edu-welcome-banner { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 20px !important; }
+  .edu-welcome-banner > :last-child { text-align: left !important; flex-direction: row !important; flex-wrap: wrap !important; }
+  .edu-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
+  .edu-charts-grid { grid-template-columns: 1fr !important; }
+  .edu-charts-grid > :last-child { grid-column: auto !important; }
+  .edu-bottom-grid { grid-template-columns: 1fr !important; }
+}
+@media (max-width: 420px) {
+  .edu-kpi-grid { grid-template-columns: 1fr !important; }
+}
 </style>
 
 <!-- ── WELCOME BANNER ─────────────────────────────────────── -->
-<div style="background:linear-gradient(135deg,rgba(31,143,143,0.65) 0%,rgba(20,77,77,0.70) 55%,rgba(13,53,53,0.75) 100%), url('/education_dashboard/static/src/img/dashboard-bg.png'); background-size:cover; background-position:center 60%; border-radius:16px; padding:26px 32px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden;">
+<div class="edu-welcome-banner" style="background:linear-gradient(135deg,rgba(31,143,143,0.65) 0%,rgba(20,77,77,0.70) 55%,rgba(13,53,53,0.75) 100%), url('/education_dashboard/static/src/img/dashboard-bg.png'); background-size:cover; background-position:center 60%; border-radius:16px; padding:26px 32px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden;">
   <div style="position:absolute;top:-30px;right:200px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none;"></div>
   <div style="position:absolute;bottom:-40px;right:60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none;"></div>
   <div style="position:relative;z-index:1;">
@@ -39,7 +57,7 @@
 </div>
 
 <!-- ── KPI CARDS ──────────────────────────────────────────── -->
-<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;">
+<div class="edu-kpi-grid" style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;">
   <div class="edu-kpi" t-on-click="() => this.openStudents('')">
     <div class="edu-icon" style="background:#e0f7f7;color:#1f8f8f;"><i class="fa fa-users"/></div>
     <div>
@@ -78,7 +96,7 @@
 </div>
 
 <!-- ── CHARTS + QUICK ACTIONS ─────────────────────────────── -->
-<div style="display:grid;grid-template-columns:5fr 4fr 3fr;gap:14px;margin-bottom:20px;">
+<div class="edu-charts-grid" style="display:grid;grid-template-columns:5fr 4fr 3fr;gap:14px;margin-bottom:20px;">
 
   <!-- Enrollment Trend -->
   <div class="edu-card" style="padding:20px;">
@@ -156,7 +174,7 @@
 </div>
 
 <!-- ── BOTTOM ROW ─────────────────────────────────────────── -->
-<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px;">
+<div class="edu-bottom-grid" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px;">
 
   <!-- Upcoming Examinations -->
   <div class="edu-card" style="padding:20px;">
diff --git a/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss b/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
index 74dc62c..9dc73de 100644
--- a/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
+++ b/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
@@ -28,9 +28,13 @@ body.o_web_client {
     height: 100% !important;       // fill the available viewport height
 }
 
-// Only push content when our custom sidebar is present
-body.o_web_client:has(.o_sidebar_custom) .o_action_manager {
-    margin-left: 260px;
+// Only push content when our custom sidebar is present (desktop only —
+// below 768px the sidebar goes off-canvas, see sidebar.xml, so content
+// must stay full-width instead of leaving a permanent 260px gap)
+@media (min-width: 769px) {
+    body.o_web_client:has(.o_sidebar_custom) .o_action_manager {
+        margin-left: 260px;
+    }
 }
 
 // Inner content containers — let them grow freely
@@ -60,12 +64,19 @@ body.o_web_client:has(.o_sidebar_custom) .o_action_manager {
         background-color: transparent !important;
     }
     
-    // Ensure horizontal menus are always visible in the header
-    .o_menu_sections {
-        display: flex !important;
-        flex-grow: 1 !important;
-        align-items: center !important;
-        overflow: visible !important;
+    // Ensure horizontal menus are always visible in the header — desktop only.
+    // Odoo's own navbar.xml marks .o_menu_sections/.o_menu_brand "d-none d-md-flex"
+    // (hidden under 768px) and relies on that for mobile; forcing display:flex
+    // unconditionally here defeated that native hide and the overflow "more"
+    // dropdown. Below 768px the custom sidebar (see sidebar.xml) is the nav
+    // instead, so let the top menu fall back to Odoo's native hidden state.
+    @media (min-width: 769px) {
+        .o_menu_sections {
+            display: flex !important;
+            flex-grow: 1 !important;
+            align-items: center !important;
+            overflow: visible !important;
+        }
     }
     
     // Explicitly override Odoo's internal enterprise variables
diff --git a/addons/theme_student_erp_custom/static/src/xml/sidebar.xml b/addons/theme_student_erp_custom/static/src/xml/sidebar.xml
index 2f6720d..fbe26f0 100644
--- a/addons/theme_student_erp_custom/static/src/xml/sidebar.xml
+++ b/addons/theme_student_erp_custom/static/src/xml/sidebar.xml
@@ -5,10 +5,37 @@
         <xpath expr="//nav" position="inside">
 
             <t t-if="currentApp and currentApp.name === 'Education'">
+                <!-- Mobile hamburger toggle: hidden by default, shown only below 768px (Odoo's own "md" breakpoint) -->
+                <!-- Centered: Odoo's own app-switcher icon (left) and systray (right)
+                     stay visible on mobile natively, so the center is the open slot
+                     once the brand name / section menu hide below 768px. -->
+                <div id="eduSidebarToggle"
+                     onclick="document.querySelector('.o_sidebar_custom').classList.add('o_sidebar_open'); document.querySelector('.o_sidebar_backdrop').classList.add('o_sidebar_open');"
+                     style="display:none; position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:111; width:42px; height:42px; border-radius:10px; background:rgba(0,0,0,0.25); color:#fff; align-items:center; justify-content:center; cursor:pointer;">
+                    <i class="fa fa-bars" style="font-size:1.1rem;"/>
+                </div>
+
+                <!-- Backdrop: closes sidebar on outside tap, mobile only -->
+                <div class="o_sidebar_backdrop"
+                     onclick="document.querySelector('.o_sidebar_custom').classList.remove('o_sidebar_open'); this.classList.remove('o_sidebar_open');"
+                     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:89;"/>
+
                 <div class="o_sidebar_custom d-flex flex-column position-fixed"
                      style="top: 70px; bottom: 0; left: 0; width: 260px; background: linear-gradient(135deg, #1f8f8f 0%, #144d4d 55%, #0d3d3d 100%); border-right: 1px solid rgba(255,255,255,0.1); z-index: 90; padding-top: 10px; overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.1); color: white;">
 
                     <style>
+                        /* ── Mobile: off-canvas sidebar + visible hamburger/backdrop ── */
+                        @media (max-width: 768px) {
+                            #eduSidebarToggle { display: flex !important; }
+                            .o_sidebar_custom {
+                                transform: translateX(-100%);
+                                transition: transform 0.25s ease;
+                                width: 80vw !important;
+                                max-width: 300px;
+                            }
+                            .o_sidebar_custom.o_sidebar_open { transform: translateX(0); }
+                            .o_sidebar_backdrop.o_sidebar_open { display: block !important; }
+                        }
                         .o_sidebar_custom .sidebar-link {
                             display: flex; align-items: center; padding: 8px 16px;
                             margin: 2px 8px; border-radius: 8px; color: rgba(255,255,255,0.9);