From 01c642e6a83fe83feac19d5e46b04287ca80e352 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 12 May 2025 15:29:33 -0500
Subject: [PATCH] Restructure day containers

---
 app/assets/stylesheets/events.css     | 103 +++++++++++++++++---------
 app/views/events/_day.html.erb        |   4 +-
 app/views/events/_empty_days.html.erb |   6 +-
 app/views/events/index.html.erb       |  10 +--
 4 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 7770a1bd8..8eff63030 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -1,15 +1,72 @@
 @layer components {
   .events {
-    background-color: var(--color-ink-lighter);
-    border-block-start: var(--grid-lines) solid var(--color-ink-lighter);
-    border-inline-start: var(--grid-lines) solid var(--color-ink-lighter);
-    display: grid;
-    gap: 0 var(--grid-lines);
-    grid-template-columns: repeat(3, 1fr);
-    position: relative;
-    z-index: 0;
+    --events-gap: 1ch;
+    --events-border: 1px solid var(--color-ink-lighter)
   }
 
+  /* Day
+  /* ------------------------------------------------------------------------ */
+
+  .events__day {
+    align-items: end;
+    column-gap: var(--events-gap);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    margin-block-end: var(--events-gap);
+    position: relative;
+  }
+
+  .events__day-header {
+    background-color: gold;
+    grid-column: 1 / -1;
+    inset-block-start: 0;
+    padding-block-start: 0.5ch;
+    position: sticky;
+
+    &:before {
+      content: "";
+      border-block-start: var(--events-border);
+      position: absolute;
+      inset: 50% 0 auto 0;
+      translate: 0 -50%;
+      z-index: -1;
+    }
+  }
+
+  .events__day-header-content {
+    background-color: var(--color-ink-lighter);
+    border-radius: 0.2em;
+    display: block;
+    font-size: var(--text-small);
+    inline-size: fit-content;
+    line-height: 1.5;
+    margin-inline: auto;
+    padding: 0.2em 1.3em;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .events__none {
+    background-color: var(--color-canvas);
+    border-block-start: var(--events-border);
+    grid-column: 1 / -1;
+    padding-block: 3em;
+    text-align: center;
+  }
+
+  /* Column
+  /* ------------------------------------------------------------------------ */
+
+
+
+
+
+
+
+
+
+
+
   .events__container {
     --column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
     --grid-lines: 1px;
@@ -18,27 +75,6 @@
     max-inline-size: min(105ch, 100%);
   }
 
-  .events__day-header {
-    background-color: var(--color-canvas);
-    block-size: var(--grid-lines);
-    display: block;
-    position: relative;
-    z-index: 1;
-  }
-
-  .events__day-header-content {
-    background-color: var(--color-ink-lighter);
-    border-radius: 0.2em;
-    display: inline-flex;
-    font-size: 0.8em;
-    inset: calc(var(--grid-lines) - 1em) auto -1em;
-    line-height: 1.5;
-    padding: 0.2em 1.3em;
-    position: absolute;
-    text-transform: uppercase;
-    transform: translateX(calc(-50% - var(--grid-lines) / 2));
-    z-index: 2;
-  }
 
   .events__filter-btn {
     font-weight: 500;
@@ -56,13 +92,6 @@
     }
   }
 
-  .events--none {
-    background-color: var(--color-canvas);
-    border-block-start: var(--grid-lines) solid var(--color-ink-lightest);
-    padding-block: 3em;
-    margin: auto;
-  }
-
   .events__popup {
     margin-block-start: var(--block-space-double);
   }
@@ -119,7 +148,7 @@
 
   .event__title {
     --lines: 4;
-  
+
     font-size: 1.1em;
     line-height: 1.2;
   }
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index 91058f79f..3b97d3cda 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,7 +1,7 @@
-<div class="events--day" data-controller="related-element"
+<div class="events__day" data-controller="related-element"
   data-related-element-highlight-class="event--related">
   <% if day_timeline.has_activity? %>
-    <h2 class="txt-medium events__day-header center">
+    <h2 class="events__day-header">
       <span class="events__day-header-content">
         <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
       </span>
diff --git a/app/views/events/_empty_days.html.erb b/app/views/events/_empty_days.html.erb
index 93be21058..98b8bd8a4 100644
--- a/app/views/events/_empty_days.html.erb
+++ b/app/views/events/_empty_days.html.erb
@@ -2,18 +2,18 @@
 
 <% if earliest.present? %>
   <% if earliest == latest %>
-    <div class="events--none txt-align-center">
+    <div class="events__none">
       <h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
       <p class="margin-none">No activity</p>
     </div>
   <% elsif earliest < latest %>
-    <div class="events--none txt-align-center">
+    <div class="events__none">
       <h2 class="txt-medium margin-none"><%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %> – <%= local_datetime_tag latest, style: :agoorweekday, class: "txt-ink txt-capitalize" %></h2>
       <p class="margin-none">No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days</p>
     </div>
   <% end %>
 <% else %>
-  <div class="events--none txt-align-center">
+  <div class="events__none">
     <p class="margin-none">No more activity.</p>
   </div>
 <% end %>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 2c4678fde..b97006b65 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -16,11 +16,7 @@
   </nav>
 <% end %>
 
-<div class="events__container align-start gap">
-  <div class="flex flex-column">
-    <div id="activity" class="events__index flex flex-column">
-      <%= render "events/day", day_timeline: @day_timeline %>
-    </div>
-    <%= event_next_page_link(@day_timeline.next_day) %>
-  </div>
+<div class="events" id="activity">
+  <%= render "events/day", day_timeline: @day_timeline %>
+  <%= event_next_page_link(@day_timeline.next_day) %>
 </div>