Plan prep frontend

static/cal.css

@@ -1,7 +1,9 @@
 :root {
   --numDays: 5;
-  --numHours: 10;
+  --numHours: 13;
+  --numHalfHours: 23;
   --timeHeight: 60px;
+  --halfTimeHeight: 30px;
   --calBgColor: #fff1f8;
   --eventBorderColor: #f2d3d8;
   --eventColor1: #ffd6d1;
@@ -17,9 +19,27 @@
   margin: 2rem;
 }
 
+select {
+  width: 300px;
+  height: 40px;
+  border-radius: 5px;
+  border-color: transparent;
+  background-color: var(--eventColor4);
+  text-align: center;
+}
+
+form {
+  margin-top: 5px;
+}
+
+option {
+  width: 300px;
+  font-size: 1rem;
+}
+
 .timeline {
   display: grid;
-  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
+  grid-template-rows: repeat(12, 58px);
 }
 
 .days {
@@ -31,50 +51,22 @@
 
 .events {
   display: grid;
-  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
+  grid-template-rows: repeat(var(--numHalfHours), var(--halfTimeHeight));
   border-radius: 5px;
   background: var(--calBgColor);
 }
 
-.start-1000 {
-  grid-row-start: 2;
-}
-
-.start-1200 {
-  grid-row-start: 4;
-}
-
-.start-1300 {
-  grid-row-start: 5;
-}
-
-.start-1400 {
-  grid-row-start: 6;
-}
-
-.end-1200 {
-  grid-row-end: 4;
-}
-
-.end-1300 {
-  grid-row-end: 5;
-}
-
-.end-1500 {
-  grid-row-end: 7;
-}
-
-.end-1600 {
-  grid-row-end: 8;
-}
-
-.end-1700 {
-  grid-row-end: 9;
-}
-
 .title {
   font-weight: 600;
-  margin-bottom: 0.25rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.room,
+.time {
+  display: block;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 
 .event {
@@ -87,7 +79,7 @@
 
 .space,
 .date {
-  height: 60px;
+  height: 100px;
 }
 
 body {
@@ -111,7 +103,7 @@ body {
 }
 
 .date {
-  display: flex;
+  margin-bottom: 1em;
   gap: 1em;
 }
 
@@ -127,4 +119,180 @@ body {
   font-weight: 100;
 }
 
+.start-0730 {
+  grid-row-start: 2;
+}
+
+.start-0830 {
+  grid-row-start: 2;
+}
+
+.start-0900 {
+  grid-row-start: 3;
+}
+
+.start-0930 {
+  grid-row-start: 4;
+}
+
+.start-1000 {
+  grid-row-start: 5;
+}
+
+.start-1030 {
+  grid-row-start: 6;
+}
+
+.start-1100 {
+  grid-row-start: 7;
+}
+
+.start-1130 {
+  grid-row-start: 8;
+}
+
+.start-1200 {
+  grid-row-start: 9;
+}
+
+.start-1230 {
+  grid-row-start: 10;
+}
+
+.start-1300 {
+  grid-row-start: 11;
+}
+
+.start-1330 {
+  grid-row-start: 12;
+}
+
+.start-1400 {
+  grid-row-start: 13;
+}
+
+.start-1430 {
+  grid-row-start: 14;
+}
+
+.start-1500 {
+  grid-row-start: 15;
+}
+
+.start-1530 {
+  grid-row-start: 16;
+}
+
+.start-1600 {
+  grid-row-start: 17;
+}
+
+.start-1630 {
+  grid-row-start: 18;
+}
+
+.start-1700 {
+  grid-row-start: 19;
+}
+
+.start-1730 {
+  grid-row-start: 20;
+}
+
+.start-1800 {
+  grid-row-start: 21;
+}
+
+.start-1830 {
+  grid-row-start: 22;
+}
+
+.end-0830 {
+  grid-row-end: 2;
+}
+
+.end-0900 {
+  grid-row-end: 3;
+}
+
+.end-0930 {
+  grid-row-end: 4;
+}
+
+.end-1000 {
+  grid-row-end: 5;
+}
+
+.end-1030 {
+  grid-row-end: 6;
+}
+
+.end-1100 {
+  grid-row-end: 7;
+}
+
+.end-1130 {
+  grid-row-end: 8;
+}
+
+.end-1200 {
+  grid-row-end: 9;
+}
+
+.end-1230 {
+  grid-row-end: 10;
+}
+
+.end-1300 {
+  grid-row-end: 11;
+}
+
+.end-1330 {
+  grid-row-end: 12;
+}
+
+.end-1400 {
+  grid-row-end: 13;
+}
+
+.end-1430 {
+  grid-row-end: 14;
+}
+
+.end-1500 {
+  grid-row-end: 15;
+}
+
+.end-1530 {
+  grid-row-end: 16;
+}
+
+.end-1600 {
+  grid-row-end: 17;
+}
+
+.end-1630 {
+  grid-row-end: 18;
+}
+
+.end-1700 {
+  grid-row-end: 19;
+}
+
+.end-1730 {
+  grid-row-end: 20;
+}
+
+.end-1800 {
+  grid-row-end: 21;
+}
+
+.end-1830 {
+  grid-row-end: 22;
+}
+
+.end-1900 {
+  grid-row-end: 23;
+}
+
 /*# sourceMappingURL=cal.css.map */

static/cal.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["cal.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"cal.css"}
+{"version":3,"sourceRoot":"","sources":["cal.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAMF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"cal.css"}

static/cal.scss

@@ -1,7 +1,9 @@
 :root {
   --numDays: 5;
-  --numHours: 10;
+  --numHours: 13;
+  --numHalfHours: 23;
   --timeHeight: 60px;
+  --halfTimeHeight: 30px;
   --calBgColor: #fff1f8;
   --eventBorderColor: #f2d3d8;
   --eventColor1: #ffd6d1;
@@ -17,9 +19,27 @@
   margin: 2rem;
 }
 
+select {
+  width: 300px;
+  height: 40px;
+  border-radius: 5px;
+  border-color: transparent;
+  background-color: var(--eventColor4);
+  text-align: center;
+}
+
+form {
+  margin-top: 5px;
+}
+
+option {
+  width: 300px;
+  font-size: 1rem;
+}
+
 .timeline {
   display: grid;
-  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
+  grid-template-rows: repeat(12, 58px);
 }
 
 .days {
@@ -28,56 +48,27 @@
   gap: 5px;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
-
 .events {
   display: grid;
-  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
+  grid-template-rows: repeat(var(--numHalfHours), var(--halfTimeHeight));
   border-radius: 5px;
   background: var(--calBgColor);
 }
 
-// Place on Timeline
-.start-1000 {
-  grid-row-start: 2;
-}
-
-.start-1200 {
-  grid-row-start: 4;
-}
-
-.start-1300 {
-  grid-row-start: 5;
-}
-
-.start-1400 {
-  grid-row-start: 6;
-}
-
-.end-1200 {
-  grid-row-end: 4;
-}
-
-.end-1300 {
-  grid-row-end: 5;
-}
-
-.end-1500 {
-  grid-row-end: 7;
-}
-
-.end-1600 {
-  grid-row-end: 8;
-}
-
-.end-1700 {
-  grid-row-end: 9;
-}
 
 // Events
 
 .title {
   font-weight: 600;
-  margin-bottom: 0.25rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.room,
+.time {
+  display: block;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 
 .event {
@@ -90,7 +81,7 @@
 
 .space,
 .date {
-  height: 60px
+  height: 100px
 }
 
 // Global / Etc
@@ -116,7 +107,7 @@ body {
 }
 
 .date {
-  display: flex;
+  margin-bottom: 1em;
   gap: 1em;
 }
 
@@ -131,3 +122,182 @@ body {
   font-size: 3rem;
   font-weight: 100;
 }
+
+// Place on Timeline
+// STARTS
+
+.start-0730 {
+  grid-row-start: 2;
+}
+
+.start-0830 {
+  grid-row-start: 2;
+}
+.start-0900 {
+  grid-row-start: 3;
+}
+.start-0930 {
+  grid-row-start: 4;
+}
+.start-1000 {
+  grid-row-start: 5;
+}
+
+.start-1030 {
+  grid-row-start: 6;
+}
+
+.start-1100 {
+  grid-row-start: 7;
+}
+
+.start-1130 {
+  grid-row-start: 8;
+}
+
+.start-1200 {
+  grid-row-start: 9;
+}
+
+.start-1230 {
+  grid-row-start: 10;
+}
+
+.start-1300 {
+  grid-row-start: 11;
+}
+
+.start-1330 {
+  grid-row-start: 12;
+}
+
+.start-1400 {
+  grid-row-start: 13;
+}
+
+.start-1430 {
+  grid-row-start: 14;
+}
+
+.start-1500 {
+  grid-row-start: 15;
+}
+
+.start-1530 {
+  grid-row-start: 16;
+}
+
+.start-1600 {
+  grid-row-start: 17;
+}
+
+.start-1630 {
+  grid-row-start: 18;
+}
+
+.start-1700 {
+  grid-row-start: 19;
+}
+
+.start-1730 {
+  grid-row-start: 20;
+}
+
+.start-1800 {
+  grid-row-start: 21;
+}
+
+.start-1830 {
+  grid-row-start: 22;
+}
+
+
+// ENDS
+
+.end-0830 {
+  grid-row-end: 2;
+}
+
+.end-0900 {
+  grid-row-end: 3;
+}
+
+.end-0930 {
+  grid-row-end: 4;
+}
+
+.end-1000 {
+  grid-row-end: 5;
+}
+
+.end-1030 {
+  grid-row-end: 6;
+}
+
+.end-1100 {
+  grid-row-end: 7;
+}
+
+.end-1130 {
+  grid-row-end: 8;
+}
+
+.end-1200 {
+  grid-row-end: 9;
+}
+
+.end-1230 {
+  grid-row-end: 10;
+}
+
+.end-1300 {
+  grid-row-end: 11;
+}
+
+.end-1330 {
+  grid-row-end: 12;
+}
+
+.end-1400 {
+  grid-row-end: 13;
+}
+
+.end-1430 {
+  grid-row-end: 14;
+}
+
+.end-1500 {
+  grid-row-end: 15;
+}
+
+.end-1530 {
+  grid-row-end: 16;
+}
+
+.end-1600 {
+  grid-row-end: 17;
+}
+
+.end-1630 {
+  grid-row-end: 18;
+}
+
+.end-1700 {
+  grid-row-end: 19;
+}
+
+.end-1730 {
+  grid-row-end: 20;
+}
+
+.end-1800 {
+  grid-row-end: 21;
+}
+
+.end-1830 {
+  grid-row-end: 22;
+}
+
+.end-1900 {
+  grid-row-end: 23;
+}