Fixed half-hour lessons for work-week-v

src/components/view/WorkWeek.jsx

@@ -57,8 +57,8 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                     <div
                         class="block skip-border"
                         style={{
-                            '--start': 9 - 7,
-                            '--size': 2,
+                            '--start': 2 * (9 - 7),
+                            '--size': 4,
                         }}
                     >
                         9:00 &ndash; 11:00
@@ -66,8 +66,8 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                     <div
                         class="block"
                         style={{
-                            '--start': 11 - 7,
-                            '--size': 2,
+                            '--start': 2 * (11 - 7),
+                            '--size': 4,
                         }}
                     >
                         11:00 &ndash; 13:00
@@ -75,8 +75,8 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                     <div
                         class="block skip-border"
                         style={{
-                            '--start': 14 - 7,
-                            '--size': 2,
+                            '--start': 2 * (14 - 7),
+                            '--size': 4,
                         }}
                     >
                         14:00 &ndash; 16:00
@@ -84,8 +84,8 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                     <div
                         class="block"
                         style={{
-                            '--start': 16 - 7,
-                            '--size': 2,
+                            '--start': 2 * (16 - 7),
+                            '--size': 4,
                         }}
                     >
                         16:00 &ndash; 18:00
@@ -109,9 +109,9 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                                         }
                                         data-event-id={event.data.id}
                                         style={{
-                                            '--start': event.start / 60 - 7,
+                                            '--start': event.start / 30 - 14,
                                             '--stack': stackIndex + 1,
-                                            '--size': (event.end - event.start) / 60,
+                                            '--size': (event.end - event.start) / 30,
                                             '--hue':
                                                 (Math.abs(hashString('seed3' + event.data.id)) %
                                                     360) +
@@ -134,10 +134,10 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                         ))}
 
                         {/* Grid Tracks */}
-                        {[2, 4, 6].map(i => (
+                        {[4, 8, 12].map(i => (
                             <div class="grid-line-h" style={{ '--track': i }}></div>
                         ))}
-                        {[7, 9, 11].map(i => (
+                        {[14, 18, 22].map(i => (
                             <div class="grid-line-h" style={{ '--track': i }}></div>
                         ))}
                     </div>

src/styles/main.scss

@@ -778,7 +778,7 @@ body {
             .blocks {
                 display: grid;
 
-                grid-template-rows: repeat(12, calc(var(--event-height)));
+                grid-template-rows: repeat(24, calc(var(--event-height) / 2));
 
                 .block {
                     grid-row: var(--start) / span var(--size);
@@ -842,7 +842,7 @@ body {
 
                 display: grid;
                 grid-template-columns: repeat(var(--size), auto);
-                grid-template-rows: repeat(12, var(--event-height));
+                grid-template-rows: repeat(24, calc(var(--event-height) / 2));
 
                 padding: 0 0.25rem;