phc
/
orario
6
2
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fixed grid lines offset

Browse Source
pull/4/head
Antonio De Lucreziis 2 years ago
parent 8f9fbb2bc5
commit 4af3529b6e
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File

4
src/components/view/WorkWeek.jsx
Unescape Escape View File

@ -134,10 +134,10 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
))} ))}
{/* Grid Tracks */} {/* Grid Tracks */}
{[1, 3, 5].map(i => ( {[2, 4, 6].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div> <div class="grid-line-h" style={{ '--track': i }}></div>
))} ))}
{[6, 8, 10].map(i => ( {[7, 9, 11].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div> <div class="grid-line-h" style={{ '--track': i }}></div>
))} ))}
</div> </div>

22
src/styles/main.scss
Unescape Escape View File

@ -737,7 +737,8 @@ body {
overflow: scroll; overflow: scroll;
--event-height: 4.75rem; // --event-height: 4.75rem;
--event-height: 6rem;
.pivot { .pivot {
height: 3rem; height: 3rem;
@ -777,7 +778,7 @@ body {
.blocks { .blocks {
display: grid; display: grid;
grid-template-rows: repeat(12, calc(var(--event-height) + 1rem)); grid-template-rows: repeat(12, calc(var(--event-height)));
.block { .block {
grid-row: var(--start) / span var(--size); grid-row: var(--start) / span var(--size);
@ -796,8 +797,12 @@ body {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
&.skip-border {
transform: translate(0, 1px);
}
&:not(.skip-border) { &:not(.skip-border) {
height: calc(2 * (var(--event-height) + 1rem) + 1px); height: calc(2 * var(--event-height) + 1px);
border-bottom: 1px solid var(--border-500); border-bottom: 1px solid var(--border-500);
} }
} }
@ -843,9 +848,9 @@ body {
grid-template-columns: repeat(var(--size), auto); grid-template-columns: repeat(var(--size), auto);
grid-template-rows: repeat(12, var(--event-height)); grid-template-rows: repeat(12, var(--event-height));
padding: 0.5rem; padding: 0 0.25rem;
gap: 1rem 0.5rem; // gap: 1rem 0.5rem;
.event { .event {
position: relative; position: relative;
@ -868,6 +873,9 @@ body {
gap: 0.25rem; gap: 0.25rem;
padding: 0.5rem 1rem 0.5rem 0.5rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
margin: 0.5rem 0.25rem;
// box-sizing: content-box;
&.selected { &.selected {
background: var(--bg-selected-500); background: var(--bg-selected-500);
@ -900,12 +908,12 @@ body {
.grid-line-h { .grid-line-h {
grid-column: 1 / span var(--size); grid-column: 1 / span var(--size);
grid-row: var(--track) / span 2; grid-row: var(--track) / span 1;
height: 0px; height: 0px;
border-bottom: 1px dashed var(--border-500); border-bottom: 1px dashed var(--border-500);
align-self: center; // align-self: center;
position: relative; position: relative;
top: 0.5px; top: 0.5px;

Write Preview
Loading…
Cancel
Save