Skip to content

Commit 25de6d3

Browse files
committed
Merge branch '003-meeting-type-duration-split'
2 parents 14ad0ba + b4c1df0 commit 25de6d3

8 files changed

Lines changed: 278 additions & 89 deletions

File tree

config/meeting-types.yaml

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,18 @@
11
meeting_types:
22
- id: office-hours
33
name: "Office hours"
4-
duration: 15
54
description: "Meet with me about a course you're enrolled in this term."
65

76
- id: chat-check-in
87
name: "Chat or check-in"
9-
duration: 15
108
description: "Chat or check in with me about some aspect of your research or anything else you'd like to talk with me about."
11-
instructions: "Please include advance details via the booking form or email."
9+
instructions: "Please share a Google Doc with your agenda and supporting materials before our meeting."
1210

1311
- id: project-meeting
1412
name: "Project meeting"
15-
duration: 30
1613
description: "Discuss or provide an update on a lab project."
1714
instructions: "Please share a Google Doc with your agenda and supporting materials before our meeting."
1815

19-
- id: other-15
20-
name: "Other (15 minutes)"
21-
duration: 15
16+
- id: other
17+
name: "Other"
2218
description: "For non-standard meetings. Please specify details in the booking form."
23-
24-
- id: other-30
25-
name: "Other (30 minutes)"
26-
duration: 30
27-
description: "Extended meeting option. Please specify details in the booking form."
28-
29-
- id: other-45
30-
name: "Other (45 minutes)"
31-
duration: 45
32-
description: "Extended meeting option. Please specify details in the booking form."
33-
34-
- id: other-60
35-
name: "Other (1 hr)"
36-
duration: 60
37-
description: "Extended meeting option. Please specify details in the booking form."

css/styles.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,72 @@ a:hover {
225225
line-height: 1.6;
226226
}
227227

228+
/* Duration Cards */
229+
.duration-grid {
230+
display: grid;
231+
grid-template-columns: repeat(4, 1fr);
232+
gap: 16px;
233+
}
234+
235+
.duration-card {
236+
border: 1px solid var(--accent-green);
237+
padding: 24px 16px;
238+
cursor: pointer;
239+
transition: all 0.2s ease;
240+
background: var(--white);
241+
text-align: center;
242+
}
243+
244+
.duration-card:hover {
245+
border-color: var(--primary-green);
246+
background: var(--bg-green-light);
247+
}
248+
249+
.duration-card:focus {
250+
outline: 2px solid var(--primary-green);
251+
outline-offset: 2px;
252+
}
253+
254+
.duration-card .duration-value {
255+
font-family: var(--font-heading);
256+
font-size: 24px;
257+
font-weight: 300;
258+
color: var(--primary-green);
259+
line-height: 1.2;
260+
}
261+
262+
.duration-card .duration-label {
263+
font-family: var(--font-heading);
264+
font-size: 13px;
265+
font-weight: 400;
266+
color: var(--primary-green-light);
267+
text-transform: lowercase;
268+
letter-spacing: 0.4px;
269+
margin-top: 4px;
270+
}
271+
272+
/* Instruction Banner */
273+
.instruction-banner {
274+
display: none;
275+
background: var(--bg-green-light);
276+
border-left: 3px solid var(--primary-green);
277+
padding: 14px 18px;
278+
margin-bottom: 20px;
279+
font-size: 14px;
280+
color: var(--dark-text);
281+
line-height: 1.6;
282+
}
283+
284+
.instruction-banner.visible {
285+
display: block;
286+
}
287+
288+
.instruction-banner .instruction-icon {
289+
font-weight: 600;
290+
color: var(--primary-green);
291+
margin-right: 6px;
292+
}
293+
228294
/* Calendar */
229295
.calendar-container {
230296
margin-top: 20px;
@@ -630,6 +696,10 @@ a:hover {
630696
font-size: 22px;
631697
}
632698

699+
.duration-grid {
700+
grid-template-columns: repeat(2, 1fr);
701+
}
702+
633703
.form-row {
634704
grid-template-columns: 1fr;
635705
gap: 0;

docs/configuration.md

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,29 +63,35 @@ apps_script_url: "https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec"
6363

6464
### config/meeting-types.yaml
6565

66-
Defines the types of meetings visitors can book.
66+
Defines the types of meetings visitors can book. Duration is selected separately by the visitor (15, 30, 45, or 60 minutes) and is not part of the meeting type definition.
6767

6868
```yaml
6969
meeting_types:
7070
- id: office-hours
7171
name: "Office hours"
72-
duration: 15
73-
description: "Short meeting for quick questions."
72+
description: "Meet with me about a course you're enrolled in this term."
73+
74+
- id: chat-check-in
75+
name: "Chat or check-in"
76+
description: "Chat or check in about your research or anything else."
77+
instructions: "Please share a Google Doc with your agenda and supporting materials before our meeting."
7478
7579
- id: project-meeting
7680
name: "Project meeting"
77-
duration: 30
78-
description: "Discuss a project update."
79-
instructions: "Please share an agenda before our meeting."
81+
description: "Discuss or provide an update on a lab project."
82+
instructions: "Please share a Google Doc with your agenda and supporting materials before our meeting."
83+
84+
- id: other
85+
name: "Other"
86+
description: "For non-standard meetings. Please specify details in the booking form."
8087
```
8188

8289
| Field | Required | Description |
8390
|-|-|-|
8491
| `id` | Yes | Unique identifier (lowercase, hyphens) |
8592
| `name` | Yes | Display name shown to visitors |
86-
| `duration` | Yes | Meeting length in minutes (15, 30, 45, or 60) |
8793
| `description` | Yes | Description shown on the meeting type selection page |
88-
| `instructions` | No | Additional instructions shown to visitors when booking |
94+
| `instructions` | No | Instructions displayed prominently on the booking form (Step 4) when this type is selected. Used to request pre-meeting materials such as a Google Doc with agenda. |
8995

9096
### config/locations.yaml
9197

@@ -128,12 +134,11 @@ To add a new meeting type, append an entry to `config/meeting-types.yaml`:
128134
```yaml
129135
- id: my-custom-meeting
130136
name: "Custom Meeting"
131-
duration: 45
132-
description: "A 45-minute custom meeting type."
133-
instructions: "Optional instructions for visitors."
137+
description: "A custom meeting type for specific needs."
138+
instructions: "Optional instructions shown on the booking form."
134139
```
135140

136-
The `id` must be unique across all meeting types. Supported durations are 15, 30, 45, and 60 minutes.
141+
The `id` must be unique across all meeting types. Duration is not specified per type — visitors choose their preferred duration (15, 30, 45, or 60 minutes) in a separate step. If you include an `instructions` field, its text will be displayed prominently on the booking form when a visitor selects this meeting type.
137142

138143
### changing the availability pattern
139144

docs/user-guide.md

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ This guide walks through the process of booking, rescheduling, and cancelling ap
66

77
### step 1: select a meeting type
88

9-
When you visit the scheduler, you will see a list of available meeting types. Each type shows a name, duration, and description.
9+
When you visit the scheduler, you will see a list of available meeting types. Each type shows a name and description.
10+
11+
The available meeting types are:
12+
13+
- **Office hours** — for students enrolled in a course this term
14+
- **Chat or check-in** — for research discussions or general conversation
15+
- **Project meeting** — for lab project updates and discussions
16+
- **Other** — for non-standard meetings
1017

1118
Click on a meeting type to proceed.
1219

@@ -17,9 +24,20 @@ Click on a meeting type to proceed.
1724
:class: screenshot
1825
```
1926

20-
### step 2: choose a date and time
27+
### step 2: choose a duration
28+
29+
After selecting a meeting type, you will see four duration options:
30+
31+
- **15 min**
32+
- **30 min**
33+
- **45 min**
34+
- **1 hr**
35+
36+
All durations are available for every meeting type. Click on a duration to proceed.
2137

22-
After selecting a meeting type, a calendar view appears showing available time slots. Available slots are highlighted in green.
38+
### step 3: choose a date and time
39+
40+
After selecting a duration, a calendar view appears showing available time slots. Available slots are highlighted in green and sized to match your chosen duration.
2341

2442
- Use the **arrow buttons** to navigate between weeks
2543
- Click on an **available slot** to select it
@@ -32,7 +50,7 @@ After selecting a meeting type, a calendar view appears showing available time s
3250
:class: screenshot
3351
```
3452

35-
### step 3: fill out the booking form
53+
### step 4: fill out the booking form
3654

3755
After clicking a slot, the booking form appears. Fill in:
3856

@@ -42,6 +60,10 @@ After clicking a slot, the booking form appears. Fill in:
4260
- **Purpose** — briefly describe why you are booking
4361
- **Notes** — (optional) any additional details
4462

63+
```{note}
64+
If you selected **Chat or check-in** or **Project meeting**, an instruction banner will appear at the top of this step asking you to share a Google Doc with your agenda and supporting materials before the meeting.
65+
```
66+
4567
<!-- screenshot placeholder: booking form -->
4668
```{image} _static/screenshots/03-booking-form.png
4769
:alt: Booking form with fields for name, email, format, purpose, and notes
@@ -51,12 +73,12 @@ After clicking a slot, the booking form appears. Fill in:
5173

5274
Click **Submit** to complete your booking.
5375

54-
### step 4: confirmation
76+
### step 5: confirmation
5577

5678
After submitting, you will see a confirmation page with:
5779

58-
- The meeting date, time, and duration
59-
- The meeting location (virtual link or physical address)
80+
- The meeting type and duration
81+
- The meeting date, time, and location (virtual link or physical address)
6082
- Links to **reschedule** or **cancel** your booking
6183

6284
```{image} _static/screenshots/04-confirmation.png
@@ -78,7 +100,7 @@ If you need to change the time of your booking:
78100
3. Click on a new available slot
79101
4. Confirm the reschedule
80102

81-
<!-- Reschedule page looks similar to the calendar view in step 2 -->
103+
<!-- Reschedule page looks similar to the calendar view in step 3 -->
82104

83105
After rescheduling:
84106
- The original calendar event is removed
@@ -111,7 +133,7 @@ CDL Scheduler sends automatic email notifications at each stage:
111133

112134
### confirmation email
113135
- Sent to both the visitor and the calendar owner
114-
- Contains the meeting date, time, duration, location, and purpose
136+
- Contains the meeting type, duration, date, time, location, and purpose
115137
- Includes an **iCal attachment** (.ics file) that can be added to your calendar app
116138
- Contains links to reschedule or cancel the booking
117139

index.html

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ <h1>Schedule a Meeting</h1>
2121
<div class="steps">
2222
<div class="step-indicator" id="step-indicator">
2323
<span class="step active" data-step="1">1. Meeting Type</span>
24-
<span class="step" data-step="2">2. Date &amp; Time</span>
25-
<span class="step" data-step="3">3. Your Details</span>
26-
<span class="step" data-step="4">4. Confirmation</span>
24+
<span class="step" data-step="2">2. Duration</span>
25+
<span class="step" data-step="3">3. Date &amp; Time</span>
26+
<span class="step" data-step="4">4. Your Details</span>
27+
<span class="step" data-step="5">5. Confirmation</span>
2728
</div>
2829
</div>
2930

@@ -33,19 +34,28 @@ <h2>Select a Meeting Type</h2>
3334
<div id="meeting-types" class="meeting-types-grid"></div>
3435
</section>
3536

36-
<!-- Step 2: Calendar / Slot Selection -->
37-
<section id="step-2" class="step-content" aria-label="Select date and time">
38-
<h2>Choose a Time</h2>
37+
<!-- Step 2: Duration Selection -->
38+
<section id="step-2" class="step-content" aria-label="Select meeting duration">
39+
<h2>Choose a Duration</h2>
3940
<p id="selected-type-info" class="selected-info"></p>
4041
<button class="btn btn-back" id="back-to-step-1" aria-label="Go back to meeting type selection">&larr; Back</button>
42+
<div id="duration-options" class="duration-grid"></div>
43+
</section>
44+
45+
<!-- Step 3: Calendar / Slot Selection -->
46+
<section id="step-3" class="step-content" aria-label="Select date and time">
47+
<h2>Choose a Time</h2>
48+
<p id="selected-duration-info" class="selected-info"></p>
49+
<button class="btn btn-back" id="back-to-step-2" aria-label="Go back to duration selection">&larr; Back</button>
4150
<div id="calendar-container" class="calendar-container"></div>
4251
</section>
4352

44-
<!-- Step 3: Booking Form -->
45-
<section id="step-3" class="step-content" aria-label="Enter your details">
53+
<!-- Step 4: Booking Form -->
54+
<section id="step-4" class="step-content" aria-label="Enter your details">
4655
<h2>Your Details</h2>
4756
<p id="selected-slot-info" class="selected-info"></p>
48-
<button class="btn btn-back" id="back-to-step-2" aria-label="Go back to time selection">&larr; Back</button>
57+
<div id="instruction-banner" class="instruction-banner"></div>
58+
<button class="btn btn-back" id="back-to-step-3" aria-label="Go back to time selection">&larr; Back</button>
4959
<form id="booking-form" novalidate>
5060
<div class="form-row">
5161
<div class="form-group">
@@ -83,8 +93,8 @@ <h2>Your Details</h2>
8393
</form>
8494
</section>
8595

86-
<!-- Step 4: Confirmation -->
87-
<section id="step-4" class="step-content" aria-label="Booking confirmation">
96+
<!-- Step 5: Confirmation -->
97+
<section id="step-5" class="step-content" aria-label="Booking confirmation">
8898
<div id="confirmation-content"></div>
8999
</section>
90100

0 commit comments

Comments
 (0)