buttons in table footer

This commit is contained in:
2025-07-11 20:26:02 +03:00
parent d72cf0a0b3
commit d986fdf232
46 changed files with 1828 additions and 1720 deletions
+36
View File
@@ -0,0 +1,36 @@
document.addEventListener('DOMContentLoaded', function() {
const editBtn = document.getElementById('editBtn');
const deleteBtn = document.getElementById('deleteBtn');
const objectIdInput = document.getElementById('objectIdInput');
const rows = document.querySelectorAll('.selectable-row');
if (editBtn) {
editBtn.setAttribute('disabled', '');
}
if (deleteBtn) {
deleteBtn.setAttribute('disabled', '');
}
rows.forEach(row => {
row.addEventListener('click', function() {
// Remove previous selection
document.querySelector('.selected-row')?.classList.remove('selected-row');
// Select current row
this.classList.add('selected-row');
const objectId = this.dataset.id;
if (editBtn) {
editBtn.removeAttribute('disabled'); // Remove disabled attribute completely
editBtn.href = editBtn.dataset.url.replace('0', objectId);
}
if (deleteBtn) {
deleteBtn.removeAttribute('disabled');
}
// Check the hidden radio button
const radio = this.querySelector('input[type="radio"]');
radio.checked = true;
});
});
});
+59
View File
@@ -0,0 +1,59 @@
body {
display: flex;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #F2E8DB; /* Add this */
margin: 0;
}
.content-area {
flex: 1;
overflow-y: auto;
}
.top-nav {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
.nav-right {
display: flex;
align-items: center;
gap: 1rem;
}
.page-title {
font-size: 1.25rem;
font-weight: 600;
color: #1a202c;
margin: 0;
}
.icon-button {
background: none;
border: none;
cursor: pointer;
color: #718096;
padding: 0.5rem;
transition: color 0.2s;
}
.icon-button:hover {
color: #4a5568;
}
.icon {
width: 1.5rem;
height: 1.5rem;
}
.content {
padding: 1.5rem;
}
+116
View File
@@ -0,0 +1,116 @@
.dashboard-wrapper {
padding: 1.5rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.tables-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1.5rem;
}
.dashboard-card {
/*background-color: #ece1d8;*/
border: 1px solid #a57d52;
border-radius: 0.5rem;
padding: 1.5rem;
}
.card-content {
display: flex;
align-items: center;
}
.icon-circle {
padding: 0.75rem;
border-radius: 50%;
background-color: #ead9cb;
margin-right: 1rem;
}
.dashboard-icon {
width: 2rem;
height: 2rem;
stroke: #a57d52;
}
.stat-info h3 {
font-size: 1.125rem;
font-weight: 600;
/*color: #a57d52;*/
margin: 0;
}
.stat-number {
font-size: 1.875rem;
font-weight: bold;
/*color: #a57d52;*/
margin: 0.25rem 0;
}
.stat-change {
font-size: 0.875rem;
color: #68a357;
margin: 0;
}
.card-header {
padding-bottom: 1rem;
border-bottom: 1px solid #a57d52;
margin-bottom: 1rem;
}
.card-header h3 {
font-size: 1.125rem;
font-weight: 600;
/*color: #a57d52;*/
margin: 0;
}
/*.dashboard-table {*/
/* width: 100%;*/
/* border-collapse: collapse;*/
/*}*/
/*.dashboard-table th {*/
/* text-align: left;*/
/* padding: 0.75rem;*/
/* font-size: 0.75rem;*/
/* text-transform: uppercase;*/
/* !*color: #a57d52;*!*/
/*}*/
/*.dashboard-table td {*/
/* padding: 0.75rem;*/
/* font-size: 0.875rem;*/
/* !*color: #666;*!*/
/*}*/
/*.status-tag {*/
/* display: inline-block;*/
/* padding: 0.25rem 0.75rem;*/
/* border-radius: 9999px;*/
/* font-size: 0.75rem;*/
/* font-weight: 600;*/
/*}*/
/*.status-received {*/
/* background-color: #e8f5e9;*/
/* color: #2e7d32;*/
/*}*/
/*.status-pending {*/
/* background-color: #fff3e0;*/
/* color: #ef6c00;*/
/*}*/
/*.status-overdue {*/
/* background-color: #ffebee;*/
/* color: #c62828;*/
/*}*/
+150 -51
View File
@@ -1,18 +1,35 @@
/* Basic form styling */
:root {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 600; /* Makes all text semi-bold by default */
line-height: 1.5;
}
form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
/*background-color: #ead9cb;; !* Add this line *!*/
border-radius: 8px; /* Optional: for better appearance */
/*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);*/
border: 1px solid #a57d52;
/*border-width: 3px;*/
/*border-color: #00aaff;*/
}
/* Label styling */
label {
display: block;
margin-bottom: 2px;
font-weight: 500;
/*font-weight: 500;*/
color: #a57d52;
}
/* Input field styling */
input[type="text"],
input[type="email"],
@@ -23,10 +40,18 @@ select,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
margin-bottom: 0px;
border: 1px solid #a57d52;
border-radius: 4px;
box-sizing: border-box;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 1.1rem;
font-variation-settings:
"wdth" 100;
}
/* Submit button styling */
@@ -82,68 +107,142 @@ button[type="submit"]:hover {
}
.card-body {
padding: 24px;
padding: 15px;
overflow-x: auto; /* Allow horizontal scroll if table is wide */
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
/*table {*/
/* width: 100%;*/
/* border-collapse: collapse;*/
/*}*/
thead {
background-color: #f9f9f9;
}
/*thead {*/
/* background-color: #f9f9f9;*/
/*}*/
th, td {
padding: 12px 16px;
text-align: left;
font-size: 14px;
}
/*th, td {*/
/* padding: 12px 16px;*/
/* text-align: left;*/
/* font-size: 14px;*/
/*}*/
th {
font-weight: bold;
text-transform: uppercase;
color: #666;
border-bottom: 1px solid #ddd;
}
/*th {*/
/* font-weight: bold;*/
/* text-transform: uppercase;*/
/* color: #666;*/
/* border-bottom: 1px solid #ddd;*/
/*}*/
tbody tr {
border-bottom: 1px solid #eee;
}
/*tbody tr {*/
/* border-bottom: 1px solid #eee;*/
/*}*/
.status {
display: inline-block;
padding: 4px 8px;
font-size: 12px;
font-weight: bold;
border-radius: 12px;
background-color: #e0f0ff;
color: #0066cc;
}
.actions button {
background: none;
border: none;
color: #0066cc;
font-size: 14px;
cursor: pointer;
margin-right: 10px;
}
/* Rename dashboard-table to match exactly with your HTML */
/*.dashboard-table,*/
/*table {*/
/* border-collapse: separate;*/
/* border-spacing: 0;*/
/* margin: 10px auto;*/
/* width: 100%;*/
/* border: 1px solid #E1C6A8; !* Make border more visible *!*/
/* border-radius: 10px;*/
/* overflow: hidden;*/
/* line-height: 1.2;*/
/*}*/
.actions button:hover {
color: #004999;
}
/*!* Keep header and footer styles *!*/
/*thead {*/
/* background-color: #E1C6A8;*/
/*}*/
.actions button:last-child {
color: #cc0000;
margin-right: 0;
}
/*tfoot {*/
/* background-color: #E1C6A8;*/
/*}*/
.actions button:last-child:hover {
color: #990000;
}
/*!* Update cell styles *!*/
/*.dashboard-table th,*/
/*.dashboard-table td,*/
/*table th,*/
/*table td {*/
/* padding: 8px;*/
/* text-align: center;*/
/* border-right: 1px solid #E1C6A8; !* Add vertical borders *!*/
/* border-bottom: 1px solid #E1C6A8; !* Add horizontal borders *!*/
/*}*/
/*!* Remove right border from last cell in each row *!*/
/*.dashboard-table th:last-child,*/
/*.dashboard-table td:last-child,*/
/*table th:last-child,*/
/*table td:last-child {*/
/* border-right: none;*/
/*}*/
/*!* Remove bottom border from last row cells *!*/
/*.dashboard-table tr:last-child td,*/
/*table tr:last-child td {*/
/* border-bottom: none;*/
/*}*/
/*.footer-container {*/
/* display: flex;*/
/* justify-content: space-between;*/
/* align-items: center;*/
/*}*/
/*.footer-left button,*/
/*.footer-right button {*/
/* margin: 0 3px;*/
/* padding: 3px 6px;*/
/* font-size: 12px;*/
/*}*/
/*.page-number {*/
/* margin: 0 10px;*/
/* font-weight: bold;*/
/*}*/
/*.status {*/
/* display: inline-block;*/
/* padding: 4px 8px;*/
/* font-size: 12px;*/
/* font-weight: bold;*/
/* border-radius: 12px;*/
/* background-color: #e0f0ff;*/
/* color: #0066cc;*/
/*}*/
/*.actions button {*/
/* background: none;*/
/* border: none;*/
/* color: #0066cc;*/
/* font-size: 14px;*/
/* cursor: pointer;*/
/* margin-right: 10px;*/
/*}*/
/*.actions button:hover {*/
/* color: #004999;*/
/*}*/
/*.actions button:last-child {*/
/* color: #cc0000;*/
/* margin-right: 0;*/
/*}*/
/*.actions button:last-child:hover {*/
/* color: #990000;*/
/*}*/
/* Update dashboard card styles */
.dashboard-card {
margin: 15px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
overflow: hidden; /* Ensure content doesn't overflow */
}
+107
View File
@@ -0,0 +1,107 @@
.sidebar {
width: 16rem;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
padding: 1.25rem;
border-bottom: 1px solid #a57d52;
}
.header h1 {
font-size: 1.25rem;
font-weight: bold;
/*color: #a57d52;*/
}
.subtitle {
font-size: 0.875rem;
/*color: #a57d52;*/
}
.section-title {
padding: 0.5rem 1rem;
font-size: 0.75rem;
/*color: #a57d52;*/
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-item {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: 0.5rem;
margin: 0 0.5rem;
}
.nav-item:hover {
border: 1px solid #a57d52;
background-color: transparent;
}
.nav-item.active {
background-color: rgba(165, 125, 82, 0.1);
}
.nav-menu {
flex: 1 1 auto; /* Changed from flex-grow: 1 */
padding: 1rem 0;
}
.icon {
height: 1.25rem;
width: 1.25rem;
margin-right: 0.75rem;
stroke: currentColor;
}
.user-profile {
margin-top: auto; /* Added this line */
padding: 1rem;
border-top: 1px solid #a57d52;
display: flex;
align-items: center;
}
.avatar {
width: 2.5rem;
height: 2.5rem;
background-color: #a57d52;
color: #ead9cb;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.user-info {
margin-left: 0.75rem;
}
.username {
font-size: 0.875rem;
font-weight: 500;
/*color: #a57d52;*/
}
.company {
font-size: 0.75rem;
/*color: #a57d52;*/
}
.logout {
margin-left: auto;
color: #a57d52;
padding: 0.5rem;
border-radius: 0.5rem;
/*transition: all 0.2s;*/
}
.logout:hover {
border: 1px solid #a57d52;
}
+1 -1
View File
@@ -1,5 +1,5 @@
body {
background: linear-gradient(135deg, #EDDECB 0%, #E1C6A8 100%);
/*background: linear-gradient(135deg, #EDDECB 0%, #E1C6A8 100%);*/
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
+196
View File
@@ -0,0 +1,196 @@
/*.table {*/
/* width: 100%;*/
/* border-collapse: separate;*/
/* border-spacing: 0;*/
/* margin: 10px auto;*/
/* border: 1px solid #a57d52;*/
/* border-radius: 10px;*/
/* overflow: hidden;*/
/*}*/
/*.table th {*/
/* text-align: left;*/
/* padding: 0.75rem;*/
/* font-size: 0.75rem;*/
/* text-transform: uppercase;*/
/* font-weight: 600;*/
/* border-bottom: 1px solid #a57d52;*/
/* background-color: #F2E8DB;*/
/*}*/
/*.table td {*/
/* padding: 0.75rem;*/
/* font-size: 0.875rem;*/
/* border-bottom: 1px solid #a57d52;*/
/*}*/
/*!* Last row shouldn't have bottom border *!*/
/*.table tr:last-child td {*/
/* border-bottom: none;*/
/*}*/
/*!* Selection styles *!*/
/*.selectable-row {*/
/* cursor: pointer;*/
/*}*/
/*.selected-row {*/
/* background-color: rgba(165, 125, 82, 0.1);*/
/*}*/
/*.status-received {*/
/* background-color: #e8f5e9;*/
/* color: #2e7d32;*/
/*}*/
/*.status-pending {*/
/* background-color: #fff3e0;*/
/* color: #ef6c00;*/
/*}*/
/*.status-overdue {*/
/* background-color: #ffebee;*/
/* color: #c62828;*/
/*}*/
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #f9f9f9;
}
th, td {
padding: 12px 16px;
text-align: left;
font-size: 14px;
}
th {
font-weight: bold;
text-transform: uppercase;
color: #666;
border-bottom: 1px solid #ddd;
}
tbody tr {
border-bottom: 1px solid #eee;
}
/*Rename dashboard-table to match exactly with your HTML */
.dashboard-table,
table {
border-collapse: separate;
border-spacing: 0;
margin: 10px auto;
width: 100%;
border: 1px solid #E1C6A8; /* Make border more visible */
border-radius: 10px;
overflow: hidden;
line-height: 1.2;
}
/* Keep header and footer styles */
thead {
background-color: #E1C6A8;
}
tfoot {
background-color: #E1C6A8;
}
/* Update cell styles */
.dashboard-table th,
.dashboard-table td,
table th,
table td {
padding: 8px;
text-align: center;
border-right: 1px solid #E1C6A8; /* Add vertical borders */
border-bottom: 1px solid #E1C6A8; /* Add horizontal borders */
}
/* Remove right border from last cell in each row */
.dashboard-table th:last-child,
.dashboard-table td:last-child,
table th:last-child,
table td:last-child {
border-right: none;
}
/* Remove bottom border from last row cells */
.dashboard-table tr:last-child td,
table tr:last-child td {
border-bottom: none;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left button,
.footer-right button {
margin: 0 3px;
padding: 3px 6px;
font-size: 12px;
}
.page-number {
margin: 0 10px;
font-weight: bold;
}
.status {
display: inline-block;
padding: 4px 8px;
font-size: 12px;
font-weight: bold;
border-radius: 12px;
background-color: #e0f0ff;
color: #0066cc;
}
.actions button {
background: none;
border: none;
color: #0066cc;
font-size: 14px;
cursor: pointer;
margin-right: 10px;
}
.actions button:hover {
color: #004999;
}
.actions button:last-child {
color: #cc0000;
margin-right: 0;
}
.actions button:last-child:hover {
color: #990000;
}