table responsive

public/css/theme.css

@@ -11783,3 +11783,48 @@ tr.border-bottom td {
   color: #2d69eb;
   text-align: end;
 }
+
+/*-768px width*/
+@media (max-width: 768px) {
+  #card table, #card tbody, #card tr, #card td {
+    display: block !important;
+    width: 100%;
+  }
+
+  th {
+    display: none;
+  }
+
+  tr {
+    border-bottom: 1px solid gray !important;
+  }
+  tr td {
+    padding-right: 20% !important;
+    position: relative;
+    border-bottom: 1px solid silver !important;
+  }
+  tr td img {
+    width: 80%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+  tr td:before {
+    content: attr(data-before);
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 18%;
+    background: rgba(0, 0, 0, 0.1333333333);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  tr:last-child td {
+    padding: 3px !important;
+  }
+  tr:last-child td:before {
+    display: none;
+  }
+}

resources/theme/js/theme.js

@@ -466,6 +466,50 @@ jQuery(function ($) {
     } catch (e) {
         // console.log(e.message);
     }
+
+    setTimeout(function () {
+        $(".x-side-menu #searching").attr('id','sub-search');
+        $("#sub-search").keyup(function () {
+            let q = $(this).val();
+            if  (q.length < 3){
+                $(".x-side-menu .list-group-item").remove();
+                return false;
+            }
+            axios.get($(this).data('ajax') + '?q=' + q).then(function (e) {
+                if (!e.data.OK) {
+                    window.alertify.error(e.data.err);
+                } else {
+                    $(".x-side-menu .list-group-item").remove();
+                    // text += '<ul class="list-group">';
+                    let text = '';
+                    for (const p of e.data.data) {
+                        text += '<li class="list-group-item">';
+                        text += `<a href="${p.link}">`;
+                        text += `<img src="${p.image}" alt="product image">`
+                        text += `<span>${p.name}</span> <hr>`
+                        text += `<b>${p.price}</b>`
+                        text += '</a>';
+                        text += '</li>';
+                    }
+                    text += '<li class="list-group-item">';
+                    text += '<a href="' + $(self).data('url') + '?q=' + q + '">';
+                    text += 'جستجو موارد بیشتر :';
+                    text += q;
+                    text += '</a>';
+                    text += '</li>';
+                    // text += '</ul>';
+                    $(".x-side-menu").append(text);
+
+                }
+            });
+        });
+    },1000);
+
+    $("#card table th").each(function (k,e) {
+        $("#card td:nth-child("+(k+1)+")").attr('data-before',$(e).text().trim());
+    })
+
+
 });
 
 

resources/theme/theme.scss

@@ -509,3 +509,49 @@ $is-dark: 'false';
     color: #2d69eb;
     text-align: end;
 }
+
+/*-768px width*/
+@media (max-width: 768px) {
+    #card {
+        table,tbody,tr,td{
+            display: block !important;
+            width: 100%;
+        }
+    }
+    th{
+        display: none;
+    }
+    tr{
+        border-bottom: 1px solid gray !important;
+        td{
+            padding-right: 20% !important;
+            position: relative;
+            border-bottom: 1px solid silver !important;
+            img{
+                width: 80%;
+                object-fit: cover;
+            }
+        }
+        td:before{
+            content: attr(data-before);
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 18%;
+            background: #00000022;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    tr:last-child{
+        td{
+            padding: 3px !important;
+        }
+        td:before{
+            display: none;
+        }
+    }
+
+}

resources/views/website/card.blade.php

@@ -18,7 +18,7 @@
                     <form action="{{route('invoice.create')}}" method="post">
                         @csrf
                         <div class="text-center" id="card">
-                            <table class="table table-bordered table-striped table-hover table-responsive-lg"
+                            <table class="table table-bordered table-striped table-hover"
                                    id="card-table">
                                 <tr>
                                     <th>