1
0
Fork 0

table responsive

main
A1Gard 2 years ago
parent f8743f68d7
commit 29eafbf98f

@ -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;
}
}

File diff suppressed because one or more lines are too long

@ -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());
})
});

@ -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;
}
}
}

@ -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>

Loading…
Cancel
Save