popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to make sticky table headers (wip)

Browse Source
This commit is contained in:
Dobromir Popov
2024-11-16 23:36:28 +02:00
parent 3236286a2a
commit e67fb399cd
2 changed files with 18 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/cart/reports/coverMe.tsx
View File

@ -142,14 +142,14 @@ export default function EventLogList() {
))}
</div>
<div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
<table className="w-full table-auto border-collapse">
<thead className="bg-gray-100">
<tr>
<th className="px-4 py-2 text-left">На</th>
<th className="px-4 py-2 text-left">От</th>
<th className="px-4 py-2 text-left">Дата</th>
<th className="px-4 py-2 text-left">Смяна</th>
<th className="px-4 py-2 text-left">Събитие</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">На</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">От</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Дата</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Смяна</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Събитие</th>
</tr>
</thead>
<tbody>

28
styles/styles.css
View File

@ -2,7 +2,9 @@
box-sizing: border-box;
} */
body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
padding: 0 1rem 1rem 1rem;
max-width: 768px;
margin: 0 auto;
@ -52,7 +54,7 @@ iframe {
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1051; /* High z-index */
}
@ -119,7 +121,6 @@ iframe {
/* Add any additional styles you need */
}
.disabled {
opacity: 0.6;
pointer-events: none;
@ -162,11 +163,11 @@ iframe {
overflow-y: auto; /* Vertical scroll only when needed */
}
/* CALENDAR */
.icon-large {
/* CALENDAR */
.icon-large {
font-size: 16px; /* Example size, adjust as needed */
}
.rbc-calendar {
.rbc-calendar {
font-family: sans-serif;
font-size: 18px;
}
@ -179,13 +180,12 @@ iframe {
margin: 0 10px; /* Adding margin for spacing */
border-radius: 4px; /* Optional: rounding the corners for a softer look */
background-color: #ecf0f1; /* Light background color to make it stand out */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adding a subtle shadow for depth */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adding a subtle shadow for depth */
display: inline-block; /* To apply padding and background color correctly */
/* Adding glow to the text */
/* Adding glow to the text */
/* text-shadow: 0 0 2px rgba(252, 252, 252, 0.8); Adjust color and glow size as needed */
}
.mobile-calendar .rbc-btn-group button {
padding: 4px 6px; /* Smaller buttons */
font-size: 16px; /* Smaller button text */
@ -232,8 +232,7 @@ iframe {
cursor: pointer;
transition: all 0.3s;
} */
.rbc-calendar .rbc-month-view .rbc-event
{
.rbc-calendar .rbc-month-view .rbc-event {
padding: 2;
margin: 2;
background-color: transparent;
@ -246,14 +245,10 @@ iframe {
/* min-height:150px !important; * /
} */
.react-responsive-carousel .control-arrow {
width: 25%;
width: 25%;
}
/* Custom CSS for responsive table */
@media (max-width: 768px) {
/* Hide table headers on small screens */
@ -291,4 +286,3 @@ iframe {
align-items: center;
justify-content: center; /* Optional: center buttons in the group */
}