From b384ff016a6c07ed51c8b6ef1cb063ada59387e0 Mon Sep 17 00:00:00 2001
From: jt14den <tdennis@library.ucla.edu>
Date: Sat, 14 Mar 2026 18:52:01 -0700
Subject: [PATCH] Redesign contact section with two-column table layout

Replace JS-based timeline with a clean Bootstrap table for walk-in
hours. Move schedule consultation buttons into a side-by-side column
layout so both pathways (walk-in and appointment) are presented as
equal options. Fix button stacking caused by Bootstrap 4 gap utility
incompatibility.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _includes/contact.html | 214 ++++++++++++-----------------------------
 1 file changed, 63 insertions(+), 151 deletions(-)

diff --git a/_includes/contact.html b/_includes/contact.html
index f37b586..28a1714 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -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‑Person (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‑Person 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>