diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 0db98b1..cf0accd 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -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; } diff --git a/frontend/src/components/DayRow.vue b/frontend/src/components/DayRow.vue index c806e8c..0a76d1c 100644 --- a/frontend/src/components/DayRow.vue +++ b/frontend/src/components/DayRow.vue @@ -1,26 +1,52 @@