diff --git a/_includes/schedule.html b/_includes/schedule.html index 35065559c7565bb59a3adea8a92e99ac3b8d2dc2..103a9fea48611d7ff3d37ab1abc8a2681e8663ca 100644 --- a/_includes/schedule.html +++ b/_includes/schedule.html @@ -6,13 +6,16 @@ `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.html time=timeline_first %}{% endcapture %} {% endcapture %}{% assign schedule_workspace = '' %} <div class="schedule"> - <ul class="schedule-timeline" style="margin-top: {{ include.row_height }}px"> + <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 -}} @@ -21,10 +24,8 @@ </ul> <ul class="schedule-group"> {% for day in include.data.schedule %} - <li class="schedule-day"> - <h3 class="schedule-header" style="height: {{ include.row_height }}px"> - {{- day.name -}} - </h3> + <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 %} @@ -34,7 +35,7 @@ {%- 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;"> - {{- event.name -}} + <div class="name">{{ event.name }}</div> <div class="time">{{ event.start }}–{{ event.end }}</div> <div class="location">{{ event.location }}</div> </li> diff --git a/_sass/custom/schedule.scss b/_sass/custom/schedule.scss index 80cd409c0d1b889920be844a76f54628a0ec5aaf..158d011e66de0d23071baad61682f8816da22d74 100644 --- a/_sass/custom/schedule.scss +++ b/_sass/custom/schedule.scss @@ -16,7 +16,6 @@ .schedule-timeline { margin-bottom: 0; - min-width: $schedule-day-min-width; position: absolute; width: 100%; } @@ -47,7 +46,6 @@ .schedule-day { border-left: $border $border-color; flex: 1 0 0; - min-width: $schedule-day-min-width; margin: 0; &:first-of-type { @@ -70,7 +68,6 @@ } .schedule-event { - @extend .fw-700; background-color: $grey-dk-000; border-radius: $border-radius; box-shadow: 0 10px 20px rgba(0, 0, 0, .1), inset 0 -3px 0 rgba(0, 0, 0, .2); @@ -82,8 +79,13 @@ position: absolute; width: 100%; - div { - @extend .fs-2, .fw-700; + .name { + @extend .fw-700; + } + + .time, + .location { + @extend .fs-2; } &.lecture { diff --git a/_sass/custom/variables.scss b/_sass/custom/variables.scss index 489daed065c756d71c388a29c70d43e080cc66c7..2869584712403e0a54f299b2c31a62834e5df2d6 100644 --- a/_sass/custom/variables.scss +++ b/_sass/custom/variables.scss @@ -21,5 +21,4 @@ $media-queries: ( // Components $box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); $module-date-color: $link-color; -$schedule-day-min-width: 9rem; $staffer-image-size: 80px; diff --git a/schedule.md b/schedule.md index 77d15874ffdd216d8ea3bc77d4928539f18c4eae..a8377cb2f4107856cf5a25e6a12fdc70a88ec072 100644 --- a/schedule.md +++ b/schedule.md @@ -13,8 +13,8 @@ Multiple schedules can be rendered on a page, each with their own events and hou ## Weekly Schedule -{% include schedule.html data=site.data.schedule.weekly interval=30 row_height=40 %} +{% include schedule.html data=site.data.schedule.weekly interval=30 row_height=40 min_day_width=125 %} ## Office Hours Schedule -{% include schedule.html data=site.data.schedule.office-hours interval=30 row_height=40 %} +{% include schedule.html data=site.data.schedule.office-hours interval=30 row_height=40 min_day_width=125 %}