optimized panel responsive to show better in mobile

Author: A1Gard

app/Helpers/Helper.php

@@ -323,7 +323,7 @@ function lastCrump()
         echo '<li >
         <a>
             <i class="ri-folder-chart-line" ></i>
-            ' . __(ucfirst($routes[count($routes) - 1])) . '
+            <span>' . __(ucfirst($routes[count($routes) - 1])) . '</span>
         </a>
     </li>';
         return;
@@ -337,7 +337,7 @@ function lastCrump()
         echo '<li >
         <a>
             <i class="ri-list-check" ></i>
-            ' . __(Str::plural(ucfirst($routes[count($routes) - 2]))) . '
+            <span>' . __(Str::plural(ucfirst($routes[count($routes) - 2]))) . '</span>
         </a>
     </li>';
     } else {
@@ -349,7 +349,7 @@ function lastCrump()
         echo '<li>
         <a href="' . $link . '">
             <i class="ri-list-check" ></i>
-            ' . __(ucfirst(Str::plural($routes[count($routes) - 2]))) . '
+            <span>' . __(ucfirst(Str::plural($routes[count($routes) - 2]))) . '</span>
         </a>
     </li>';
         switch ($route) {
@@ -386,7 +386,7 @@ function lastCrump()
         echo '<li>
             <a>
                 <i class="' . $icon . '" ></i>
-                ' . $title . '
+               <span> ' . $title . ' </span>
             </a>
         </li>';
     }

resources/js/app.js

@@ -30,6 +30,7 @@ import './panel/setting-section-controller.js';
 import './panel/sotable-controller.js';
 import './panel/prototypes.js';
 import './panel/panel-window-loader.js';
+import './panel/responsive-control.js';
 
 // chartjs.defaults.defaultFontFamily = "Vazir";
 // chartjs.defaults.defaultFontSize = 18;

resources/js/panel/responsive-control.js

@@ -0,0 +1,39 @@
+const responsiveControl = function () {
+    let vpw = document.querySelector('body').clientWidth; // view port width
+
+    if (document.querySelectorAll('.table-list').length > 0) {
+        if (vpw  > 620) {
+            document.querySelectorAll('.table-list span.th')?.forEach(function (el) {
+                el.remove();
+            })
+        } else {
+            if (document.querySelectorAll('.table-list span.th')?.length === 0) {
+
+                document.querySelectorAll('.table-list')?.forEach(function (table) {
+
+                    console.log(table);
+                    // Get all the header cells
+                    const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent.trim());
+
+                    // Get all the rows in the table, excluding the header row
+                    const rows = table.querySelectorAll('tr');
+
+                    rows.forEach(function (row) {
+                        const cells = row.querySelectorAll('td');
+
+                        cells.forEach(function (cell, index) {
+                            const headerText = headers[index]; // Get the corresponding header for this cell
+                            if (headerText.trim() != ''){
+                                cell.innerHTML = `<span class="th float-start"> ${headerText}: </span> ${cell.innerHTML}`; // Update the cell content
+                            }
+                        });
+                    });
+                });
+
+
+            }
+        }
+    }
+};
+window.addEventListener('resize', responsiveControl);
+window.addEventListener('load', responsiveControl)

resources/sass/panel/_breadcrumbs.scss

@@ -61,3 +61,28 @@ $pnl-brc-height: 50px;
     }
 
 }
+
+/*-500px width*/
+@media (max-width: 600px) {
+    #panel-breadcrumb{
+        display: block;
+        li{
+            text-align: end;
+        }
+
+        span{
+            display: none !important;
+        }
+        i{
+            margin: 0;
+            display: inline-block;
+        }
+        a{
+            justify-content: end !important;
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+        }
+    }
+
+
+}

resources/sass/panel/_common.scss

@@ -338,3 +338,41 @@ a.btn,a.action-btn,a.circle-btn{
 .btn-light,a.btn-light{
     color: black !important;
 }
+/* -620px width */
+@media (max-width: 620px) {
+    .table-list {
+        position: relative; /* Ensure this is the direct container */
+        overflow: auto; /* Allow scrolling */
+    }
+
+    tr, td, th {
+        display: block;
+        width: 100% !important;
+        text-align: end;
+    }
+    td{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    td:last-child{
+        justify-content: center;
+    }
+
+    div.float-start, div.float-end {
+        float: none !important;
+    }
+
+    .dropdown{
+        min-width: 75%;
+        .btn{
+            width: 100%;
+        }
+    }
+
+    thead {
+        display: none;
+    }
+
+
+}

resources/views/admin/templates/panel-list-template.blade.php

@@ -133,7 +133,6 @@ class="form-check form-switch mt-1 mx-2">
                             @endforeach
                             {{--                            @yield('table-head')--}}
                             <th>
-
                             </th>
                         </tr>
                         </thead>

resources/views/components/panel-breadcrumb.blade.php

@@ -3,13 +3,17 @@
         <li>
             <a href="{{url('/')}}" target="_blank">
                 <i class="ri-home-3-line"></i>
-                {{config('app.name')}}
+                <span>
+                    {{config('app.name')}}
+                </span>
             </a>
         </li>
         <li>
             <a href="{{route('admin.home')}}">
                 <i class="ri-dashboard-3-line"></i>
-                {{__("Dashboard")}}
+                <span>
+                    {{__("Dashboard")}}
+                </span>
             </a>
         </li>
         {{lastCrump()}}