bartool/fastapi-vue-odoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor list styling and enhance DayRow component for improved time entry management

Browse Source
This commit is contained in:
bartool
2025-10-28 18:34:31 +01:00
parent fb63414d69
commit 037790a497
4 changed files with 135 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/assets/main.css
View File

@@ -196,14 +196,14 @@ body {
height: 200px;
}
.list-header {
/*
.list-header {
position: sticky;
top: 0;
z-index: 10;
display: grid;
padding: 10px;
background-color: var(--background-body);
/* grid-template-columns: repeat(8, 1fr); */
grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
grid-template-areas: 'dayOfMonth dayOfWeek gap enter rem-x exit alert holiday sickday worked overtime hours balance';
text-align: center;
@@ -218,7 +218,6 @@ body {
display: grid;
padding: 10px;
height: 40px;
/* grid-template-columns: repeat(8, 1fr); */
grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
grid-template-areas: 'dayOfMonth dayOfWeek gap enter rem-x exit alert holiday sickday worked overtime hours balance';
justify-items: center;
@@ -230,6 +229,37 @@ body {
margin-bottom: 5px;
font-size: 18px;
}
*/
.list,
.list-header,
.list-item {
display: grid;
grid-template-columns: 1fr 1fr 30px 50px [start-enter] 1fr 30px 1fr[end-exit] 50px 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
grid-template-areas: 'dayOfMonth dayOfWeek gap left-pag enter rem-x exit right-pag alert holiday sickday worked overtime hours balance';
justify-items: center;
align-items: center;
border-radius: 5px;
padding: 10px;
margin-bottom: 5px;
}
/* nagłówek listy */
.list-header {
position: sticky;
top: 0;
z-index: 10;
background-color: var(--background-body);
text-align: center;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
}
/* pojedynczy element listy */
.list-item {
height: 40px;
background-color: var(--background-card);
font-size: 18px;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
}
.list-grid-dayOfMonth {
grid-area: dayOfMonth;
@@ -237,6 +267,14 @@ body {
.list-grid-dayOfWeek {
grid-area: dayOfWeek;
}
.list-grid-left {
grid-area: left-pag;
justify-self: end;
}
.list-grid-right {
grid-area: right-pag;
justify-self: start;
}
.list-grid-enter {
grid-area: enter;
}