Represent schedules as collections

_config.yml

@@ -37,11 +37,17 @@ footer_content:
 
 # Collections for website data
 collections:
-  - modules
-  - announcements
-  - staffers
+  announcements:
+  modules:
+  schedules:
+  staffers:
 # Default layouts for each collection type
 defaults:
+  - scope:
+      path: ''
+      type: announcements
+    values:
+      layout: announcement
   - scope:
       path: ''
       type: modules
@@ -49,9 +55,9 @@ defaults:
       layout: module
   - scope:
       path: ''
-      type: announcements
+      type: schedules
     values:
-      layout: announcement
+      layout: schedule
   - scope:
       path: ''
       type: staffers

_includes/schedule.html

-{% capture schedule_workspace %}
-  {% comment %}
-    Return the HTML for the schedule corresponding to the given data.
-
-    Parameters:
-      `data` (site data): site data file containing the requested schedule.
-      `interval` (integer): time in minutes between each timeline tick.
-      `row_height` (integer): row height in pixels.
-      `min_day_width` (integer): minimum width reserved for each day in pixels.
-      `header_tag` (string): HTML tag for the schedule-header, default: 'h3'.
-  {% endcomment %}
-
-  {% assign header_tag = include.header_tag | default: 'h3' %}
-  {% assign timeline_first = include.data.timeline | first %}
-  {% capture offset %}{% include minutes.liquid time=timeline_first %}{% endcapture %}
-{% endcapture %}{% assign schedule_workspace = '' %}
-<div class="schedule">
-  <ul class="schedule-timeline" style="margin-top: {{ include.row_height }}px; min-width: {{ include.data.schedule | size | times: include.min_day_width }}px">
-    {% for time in include.data.timeline %}
-    <li class="schedule-time" style="height: {{ include.row_height }}px">
-      {{- time -}}
-    </li>
-    {% endfor %}
-  </ul>
-  <ul class="schedule-group">
-    {% for day in include.data.schedule %}
-    <li class="schedule-day" style="min-width: {{ include.min_day_width }}px">
-      <{{ header_tag }} class="schedule-header" style="height: {{ include.row_height }}px">{{ day.name }}</{{ header_tag }}>
-      {% if day.events %}
-      <ul class="schedule-events" style="height: {{ include.data.timeline | size | times: include.row_height }}px">
-      {% for event in day.events %}
-        {%- capture start -%}{% include minutes.liquid time=event.start %}{%- endcapture -%}
-        {%- capture end -%}{% include minutes.liquid time=event.end %}{%- endcapture -%}
-        {%- assign top = start | minus: offset | times: include.row_height | divided_by: include.interval -%}
-        {%- assign height = end | minus: start | times: include.row_height | divided_by: include.interval -%}
-        <li class="schedule-event {{ event.class }}"
-            style="top: {{ top }}px; height: {{ height }}px;">
-          <div class="name">{{ event.name }}</div>
-          <div class="time">{{ event.start }}–{{ event.end }}</div>
-          <div class="location">{{ event.location }}</div>
-        </li>
-      {% endfor %}
-      </ul>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ul>
-</div>

_layouts/schedule.html

+{% assign start_time = page.timeline | first %}
+{% capture offset %}{% include minutes.liquid time=start_time %}{% endcapture %}
+<div class="schedule">
+  <ul class="schedule-timeline" style="min-width: {{ page.schedule | size | times: 130 }}px">
+    {% for time in page.timeline %}
+    <li class="schedule-time">{{ time }} </li>
+    {% endfor %}
+  </ul>
+  <ul class="schedule-group">
+    {% for day in page.schedule %}
+    <li class="schedule-day">
+      <h2 class="schedule-header">{{ day.name }}</h2>
+      {% if day.events %}
+      <ul class="schedule-events" style="height: {{ page.timeline | size | times: 40 }}px">
+      {% for event in day.events %}
+        {% capture start %}{% include minutes.liquid time=event.start %}{% endcapture %}
+        {% capture end %}{% include minutes.liquid time=event.end %}{% endcapture %}
+        {% assign top = start | minus: offset | times: 40 | divided_by: 30 %}
+        {% assign height = end | minus: start | times: 40 | divided_by: 30 %}
+        <li class="schedule-event {% if event.class %}{{ event.class }}{% else %}{{ event.name | slugify }}{% endif %}"
+            style="top: {{ top }}px; height: {{ height }}px;">
+          <div class="name">{{ event.name }}</div>
+          <div class="time">{{ event.start }}–{{ event.end }}</div>
+          <div class="location">{{ event.location }}</div>
+        </li>
+      {% endfor %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</div>

_sass/custom/schedule.scss

@@ -15,7 +15,7 @@
 }
 
 .schedule-timeline {
-  margin-bottom: 0;
+  margin: 40px auto 0;
   position: absolute;
   width: 100%;
 }
@@ -23,6 +23,7 @@
 .schedule-time {
   @extend .fs-2;
   color: $grey-dk-000;
+  height: 40px;
   margin: 0;
   padding: $sp-2;
   position: relative;
@@ -48,6 +49,7 @@
   border-left: $border $border-color;
   flex: 1 0 0;
   margin: 0;
+  min-width: 130px;
 
   &:first-of-type {
     border-left: 0;
@@ -58,6 +60,8 @@
   @extend .fw-700;
   align-items: center;
   display: flex;
+  font-size: 18px !important;
+  height: 40px;
   justify-content: center;
   margin: 0;
 }

_data/schedule/weekly.yml → _schedules/weekly.md

-timeline: [
-  '9:00 AM', '9:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM',
-  '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM',
-  '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', '5:30 PM',
-]
+---
+timeline:
+  - '9:00 AM'
+  - '9:30 AM'
+  - '10:00 AM'
+  - '10:30 AM'
+  - '11:00 AM'
+  - '11:30 AM'
+  - '12:00 PM'
+  - '12:30 PM'
+  - '1:00 PM'
+  - '1:30 PM'
+  - '2:00 PM'
+  - '2:30 PM'
+  - '3:00 PM'
+  - '3:30 PM'
+  - '4:00 PM'
+  - '4:30 PM'
+  - '5:00 PM'
+  - '5:30 PM'
 schedule:
   - name: Monday
     events:
       - name: Lecture
-        class: lecture
         start: 9:30 AM
         end: 10:30 AM
         location: 150 Wheeler
       - name: Section
-        class: section
         start: 11:30 AM
         end: 12:30 PM
         location: 310 Soda
       - name: Office Hours
-        class: office-hours
         start: 12:30 PM
         end: 2:00 PM
         location: 271 Soda
@@ -25,17 +37,14 @@ schedule:
   - name: Wednesday
     events:
       - name: Lecture
-        class: lecture
         start: 9:30 AM
         end: 10:30 AM
         location: 150 Wheeler
       - name: Section
-        class: section
         start: 11:30 AM
         end: 12:30 PM
         location: 310 Soda
       - name: Office Hours
-        class: office-hours
         start: 12:30 PM
         end: 2:00 PM
         location: 271 Soda
@@ -43,17 +52,15 @@ schedule:
   - name: Friday
     events:
       - name: Lecture
-        class: lecture
         start: 9:30 AM
         end: 10:30 AM
         location: 150 Wheeler
       - name: Section
-        class: section
         start: 11:30 AM
         end: 12:30 PM
         location: 310 Soda
       - name: Office Hours
-        class: office-hours
         start: 12:30 PM
         end: 2:00 PM
         location: 271 Soda
+---

schedule.md

@@ -7,4 +7,6 @@ description: The weekly event schedule.
 
 # Weekly Schedule
 
-{% include schedule.html data=site.data.schedule.weekly interval=30 row_height=40 min_day_width=130 %}
+{% for schedule in site.schedules %}
+{{ schedule }}
+{% endfor %}