Skip to content

Redesign contact section with two-column table layout #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jt14den merged 1 commit into from
Mar 15, 2026
Merged

Redesign contact section with two-column table layout #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 63 additions & 151 deletions _includes/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,159 +1,71 @@
<section class="page-section" id="{{ site.data.sitetext[site.locale].contact.section | default:"contact" }}">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">{{ site.data.sitetext[site.locale].contact.title }}</h2>
</div>
</div>
<div style="margin-bottom: 2.5em;">
<div class="container">
<div class="text-center">
<h3 style="color: #1d4de2; font-weight: 600; margin-bottom: 10px;">Walk-in DataSquad Hours in YRL Collaboration Pods, Room 11630L</h3>
<p style="color: #6c757d; font-size: 0.95em; margin-bottom: 0;">(no appointment needed)</p>
</div>
<div class="row">
<div class="col-lg-12">
<style>
@media (prefers-reduced-motion: reduce) {
.time-slot { transition: none !important; }
}
</style>
<div class="calendar-grid" role="list" aria-label="Walk-in hours schedule" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px;">
{% for entry in site.data.sitetext[site.locale].office-hours.list %}
<div class="calendar-day" role="listitem" aria-label="{{ entry.day }} hours" style="background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
<h4 style="color: #212529; margin-bottom: 20px; font-weight: 600; font-size: 1.1em; text-align: center; letter-spacing: 0.5px;">{{ entry.day }}</h4>
<div class="calendar-timeline" style="position: relative; min-height: 400px; background: #ffffff; border-radius: 6px; padding: 12px; border: 1px solid #e9ecef;">
{% for time in entry.times %}
<div class="time-slot"
data-time="{{ time }}"
style="background: #f1f3f5; border-left: 3px solid #6c757d; border-radius: 5px; padding: 8px 12px; margin: 0; position: relative; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.2s; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box;">
<span class="time-start" style="color: #212529; font-size: 0.8em; font-weight: 600;"></span>
<span class="time-end" style="color: #212529; font-size: 0.8em; font-weight: 600; margin-top: auto;"></span>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>

<script>
(function() {
// Parse time string like "10:00 a.m. - 11:30 a.m." to minutes
function parseTime(timeStr) {
const parts = timeStr.split(' - ');
if (parts.length !== 2) return null;

function toMinutes(time) {
const match = time.match(/(\d+):(\d+)\s*(a\.m\.|p\.m\.)/i);
if (!match) return null;
let hours = parseInt(match[1]);
const minutes = parseInt(match[2]);
const period = match[3].toLowerCase();

if (period === 'p.m.' && hours !== 12) hours += 12;
if (period === 'a.m.' && hours === 12) hours = 0;

return hours * 60 + minutes;
}

const start = toMinutes(parts[0].trim());
const end = toMinutes(parts[1].trim());

if (start === null || end === null) return null;
return { start, end, duration: end - start };
}

// Calculate timeline bounds (9am to 6pm = 540 to 1080 minutes)
const timelineStart = 9 * 60; // 9am
const timelineEnd = 18 * 60; // 6pm
const timelineHeight = 400; // pixels
const pixelsPerMinute = timelineHeight / (timelineEnd - timelineStart);

// Process each time slot
document.querySelectorAll('.time-slot').forEach(function(slot) {
const timeStr = slot.getAttribute('data-time');
const timeData = parseTime(timeStr);
if (!timeData) return;

// Split time string into start and end
const parts = timeStr.split(' - ');
const startTime = parts[0].trim();
const endTime = parts[1].trim();

// Set start and end times
const startEl = slot.querySelector('.time-start');
const endEl = slot.querySelector('.time-end');
if (startEl) startEl.textContent = startTime;
if (endEl) endEl.textContent = endTime;

// Calculate position and height
const top = (timeData.start - timelineStart) * pixelsPerMinute;
const height = timeData.duration * pixelsPerMinute;
const minHeight = 50; // Minimum height for readability

// Apply styles
slot.style.position = 'absolute';
slot.style.top = top + 'px';
slot.style.height = Math.max(height, minHeight) + 'px';
slot.style.width = 'calc(100% - 24px)';
slot.style.left = '12px';

// For shorter slots, center the text; for longer ones, use space-between
if (height < 60) {
slot.style.justifyContent = 'center';
if (startEl) startEl.style.display = 'none';
if (endEl) {
endEl.style.marginTop = '0';
endEl.textContent = timeStr; // Show full time for short slots
}
} else {
slot.style.justifyContent = 'space-between';
if (startEl) startEl.style.display = 'block';
if (endEl) {
endEl.style.marginTop = 'auto';
endEl.textContent = endTime;
}
}
});
})();
</script>
</div>
<section class="page-section" id="{{ site.data.sitetext[site.locale].contact.section | default: 'contact' }}">
<div class="container">

<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">{{ site.data.sitetext[site.locale].contact.title }}</h2>
<p class="text-muted mb-5" style="font-size: 0.95rem;">Two ways to get help from the DataSquad team</p>
</div>
</div>

<div class="row mt-4">
<div class="col-lg-12 text-center">
<h3>Schedule a Consultation</h3>
<p class="text-muted mb-2">Book an in-person or online consultation with the DataSquad team.</p>
</div>
<div class="row justify-content-center">

<!-- Left: Walk-in hours -->
<div class="col-lg-6 col-md-6 mb-5">
<h3 class="mb-1" style="font-size: 1.1rem; font-weight: 700; color: #212529;">Walk-in Hours</h3>
<p class="text-muted mb-1" style="font-size: 0.85rem;">YRL Collaboration Pods, Room 11630L</p>
<p class="mb-3" style="font-size: 0.85rem; color: #212529;">No appointment needed</p>

<table class="table table-bordered table-hover table-sm" aria-label="Walk-in DataSquad hours by day">
<thead class="thead-dark">
<tr>
<th scope="col" style="width: 40%;">Day</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
{% for entry in site.data.sitetext[site.locale].office-hours.list %}
{% for time in entry.times %}
<tr>
{% if forloop.first %}
<td rowspan="{{ entry.times.size }}" style="font-weight: 600; vertical-align: middle;">{{ entry.day }}</td>
{% endif %}
<td>{{ time | replace: ' - ', ' &ndash; ' }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
<br>
<div class="row">
<div class="col-md-6 text-center mb-4">
<!-- <h4 class="mb-3">In鈥慞erson (YRL Collaboration Pods)</h4> -->
<a
href="https://calendar.library.ucla.edu/widget/appointments?u=0&lid=6691&gid=27076&t=Schedule+an+In-Person+Consultation"
target="_blank"
rel="noopener noreferrer"
class="btn btn-outline-primary btn-lg"
style="padding: 10px 28px; font-size: 16px;"
>
Schedule an In鈥慞erson Appointment

<!-- Right: Schedule a consultation -->
<div class="col-lg-5 col-md-6 mb-5 offset-lg-1">
<h3 class="mb-1" style="font-size: 1.1rem; font-weight: 700; color: #212529;">Schedule a Consultation</h3>
<p class="text-muted mb-4" style="font-size: 0.85rem;">Book an in-person or online consultation with the DataSquad team.</p>

<div class="d-flex flex-column" style="gap: 12px; max-width: 320px;">
<a href="https://calendar.library.ucla.edu/widget/appointments?u=0&lid=6691&gid=27076&t=Schedule+an+In-Person+Consultation"
target="_blank"
rel="noopener noreferrer"
class="btn btn-primary btn-lg text-left"
style="white-space: normal;">
<i class="fas fa-map-marker-alt mr-2" aria-hidden="true"></i>Schedule an In-Person Appointment
</a>
</div>
<div class="col-md-6 text-center mb-4">
<!-- <h4 class="mb-3">Online (Zoom)</h4> -->
<a
href="https://calendar.library.ucla.edu/widget/appointments?u=0&lid=1060&gid=26562&t=Schedule+an+Online+Consultation"
target="_blank"
rel="noopener noreferrer"
class="btn btn-outline-primary btn-lg"
style="padding: 10px 28px; font-size: 16px;"
>
Schedule an Online Appointment
<a href="https://calendar.library.ucla.edu/widget/appointments?u=0&lid=1060&gid=26562&t=Schedule+an+Online+Consultation"
target="_blank"
rel="noopener noreferrer"
class="btn btn-primary btn-lg text-left"
style="white-space: normal;">
<i class="fas fa-video mr-2" aria-hidden="true"></i>Schedule an Online Appointment
</a>
</div>
</div>

<p class="mt-4 text-muted" style="font-size: 0.8rem;">
Appointments available in-person at YRL or online via Zoom.
</p>
</div>

</div>

</div>
</section>
Loading