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>
<div className="mt-4 w-full overflow-x-auto"> <div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto"> <table className="w-full table-auto border-collapse">
<thead> <thead className="bg-gray-100">
<tr> <tr>
<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">От</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">Дата</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">Смяна</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">Събитие</th> <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Събитие</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

28
styles/styles.css
View File

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