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

Fixed grid lines offset

Browse Source
This commit is contained in:
aziis98
2022-09-25 17:54:56 +02:00
parent 8f9fbb2bc5
commit 4af3529b6e
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/view/WorkWeek.jsx
+2 -2
View File
@@ -134,10 +134,10 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
))}
{/* Grid Tracks */}
{[1, 3, 5].map(i => (
{[2, 4, 6].map(i => (
<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>
src/styles/main.scss
+15 -7
View File
@@ -737,7 +737,8 @@ body {
overflow: scroll;
--event-height: 4.75rem;
// --event-height: 4.75rem;
--event-height: 6rem;
.pivot {
height: 3rem;
@@ -777,7 +778,7 @@ body {
.blocks {
display: grid;
grid-template-rows: repeat(12, calc(var(--event-height) + 1rem));
grid-template-rows: repeat(12, calc(var(--event-height)));
.block {
grid-row: var(--start) / span var(--size);
@@ -796,8 +797,12 @@ body {
writing-mode: vertical-lr;
}
&.skip-border {
transform: translate(0, 1px);
}
&: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);
}
}
@@ -843,9 +848,9 @@ body {
grid-template-columns: repeat(var(--size), auto);
grid-template-rows: repeat(12, var(--event-height));
padding: 0.5rem;
padding: 0 0.25rem;
gap: 1rem 0.5rem;
// gap: 1rem 0.5rem;
.event {
position: relative;
@@ -868,6 +873,9 @@ body {
gap: 0.25rem;
padding: 0.5rem 1rem 0.5rem 0.5rem;
margin: 0.5rem 0.25rem;
// box-sizing: content-box;
&.selected {
background: var(--bg-selected-500);
@@ -900,12 +908,12 @@ body {
.grid-line-h {
grid-column: 1 / span var(--size);
grid-row: var(--track) / span 2;
grid-row: var(--track) / span 1;
height: 0px;
border-bottom: 1px dashed var(--border-500);
align-self: center;
// align-self: center;
position: relative;
top: 0.5px;