From 32cfba82d9b68b5a9e45664dde7152b40b7884de Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 13 May 2025 14:32:51 -0500
Subject: [PATCH] Finish desktop styles

---
 app/assets/stylesheets/events.css             | 73 +++++++++++--------
 app/helpers/events_helper.rb                  | 32 ++++++++
 app/views/events/_day.html.erb                | 30 ++------
 .../events/_day_timeline_column.html.erb      | 11 +++
 4 files changed, 93 insertions(+), 53 deletions(-)
 create mode 100644 app/views/events/_day_timeline_column.html.erb

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index cf6756887..ed8b7c6f0 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -1,49 +1,61 @@
 @layer components {
   .events {
     --events-gap: 1ch;
-    --events-border: 1px solid var(--color-ink-lighter)
+    --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: "";
+    /* Don't put borders around empty days */
+    &:has(*) {
       border-block-start: var(--events-border);
-      position: absolute;
-      inset: 50% 0 auto 0;
-      translate: 0 -50%;
-      z-index: -1;
+      border-inline: var(--events-border);
     }
   }
 
-  .events__day-header-content {
+  .events__day-header,
+  .events__column-header {
+    font-size: var(--text-small);
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .events__day-header {
     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;
+    padding: 0.5ch 1.3em;
+    position: absolute;
+    inset: 0 auto auto 50%;
+    translate: -50% -50%;
+    z-index: 3;
+  }
+
+  .events__columns {
+    align-items: end;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    position: relative;
+
+    /* Pseudo column borders since .events__column is display: contents */
+    &:before,
+    &:after {
+      border-inline-start: var(--events-border);
+      content: "";
+      inset-block: 0;
+      position: absolute;
+      z-index: 3;
+    }
+
+    &:before { inset-inline-start: calc(100% / 3); }
+    &:after { inset-inline-end: calc(100% / 3); }
   }
 
   .events__column {
@@ -51,10 +63,12 @@
   }
 
   .events__column-header {
-    background: tomato;
+    background-color: var(--color-canvas);
     grid-row-start: 2;
+    inset-block-start: calc(var(--events-gap) * -2);
+    padding-block: calc(var(--events-gap) * 3) var(--events-gap);
     position: sticky;
-    inset-block-start: 1lh;
+    z-index: 2;
   }
 
   .events__time-block {
@@ -62,10 +76,9 @@
     display: grid;
     gap: var(--events-gap);
     justify-items: center;
-    padding: 0;
     margin: 0;
-    /* margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines);
-    padding: var(--block-space) var(--inline-space-double); */
+    padding-block-end: calc(var(--events-gap) * 3);
+    padding-inline: calc(var(--events-gap) * 2);
 
     .event {
       grid-column-start: unset !important;
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 31979cf54..820d94f6e 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -1,4 +1,36 @@
 module EventsHelper
+
+  def event_column_info(event_type, day_timeline)
+    case event_type
+    when "added"
+      events = day_timeline.events.where(action: "card_published")
+      {
+        title: events.count > 0 ? "Added (#{events.count})" : "Added",
+        index: 1,
+        events: events
+      }
+    when "closed"
+      events = day_timeline.events.where(action: "card_closed")
+      {
+        title: events.count > 0 ? "Closed (#{events.count})" : "Closed",
+        index: 3,
+        events: events
+      }
+    else
+      {
+        title: "Updated",
+        index: 2,
+        events: day_timeline.events.where.not(action: ["card_published", "card_closed"])
+      }
+    end
+  end
+
+
+
+
+
+
+
   def event_column(event)
     case event.action
     when "card_closed"
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index 921941107..b4d7c520f 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,34 +1,18 @@
-<div class="events__day" data-controller="related-element"
+<section class="events__day" data-controller="related-element"
   data-related-element-highlight-class="event--related">
   <% if day_timeline.has_activity? %>
     <h2 class="events__day-header">
-      <span class="events__day-header-content">
-        <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
-      </span>
+      <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
     </h2>
 
-
-    <%= render "events/day_timeline_columns", day_timeline: day_timeline %>
-
-
-
-
-
-
-
-
-
-
-
-
-    <div class="center events" hidden>
-      <%= render_column_headers(day_timeline) %>
-      <%= render_event_grid_cells %>
-      <%= render "events/day_timeline", day_timeline: day_timeline  %>
+    <div class="events__columns">
+      <%= render "events/day_timeline_column", event_type: "added", day_timeline: day_timeline %>
+      <%= render "events/day_timeline_column", event_type: "updated", day_timeline: day_timeline %>
+      <%= render "events/day_timeline_column", event_type: "closed", day_timeline: day_timeline %>
     </div>
 
     <%= render "events/empty_days", day_timeline: day_timeline %>
   <% else %>
     <%= render "events/empty_days", day_timeline: day_timeline %>
   <% end %>
-</div>
+</section>
diff --git a/app/views/events/_day_timeline_column.html.erb b/app/views/events/_day_timeline_column.html.erb
new file mode 100644
index 000000000..e52079dd1
--- /dev/null
+++ b/app/views/events/_day_timeline_column.html.erb
@@ -0,0 +1,11 @@
+<% column = event_column_info(event_type, day_timeline) %>
+
+<div class="events__column">
+  <h3 class="events__column-header"><%= column[:title] %></h3>
+  <% column[:events].group_by { it.created_at.hour }.each do |hour, events| %>
+    <%= event_cluster_tag(hour, column[:index]) do %>
+      <%= render partial: "events/event", collection: events %>
+      <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
+    <% end %>
+  <% end %>
+</div>