WIP new sorting

app/assets/stylesheets/events.css

@@ -46,6 +46,33 @@
     text-transform: uppercase;
   }
 
+  .events__column {
+    display: contents;
+  }
+
+  .events__column-header {
+    background: tomato;
+    grid-row-start: 2;
+    position: sticky;
+    inset-block-start: 1lh;
+  }
+
+  .events__time-block {
+    align-content: end;
+    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); */
+
+    .event {
+      grid-column-start: unset !important;
+      grid-row-start: unset !important;
+    }
+  }
+
   .events__none {
     background-color: var(--color-canvas);
     border-block-start: var(--events-border);
@@ -153,20 +180,6 @@
     line-height: 1.2;
   }
 
-  .event__wrapper {
-    align-content: end;
-    display: grid;
-    gap: var(--block-space-half);
-    justify-items: center;
-    margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines);
-    padding: var(--block-space) var(--inline-space-double);
-
-    .event {
-      grid-column-start: unset !important;
-      grid-row-start: unset !important;
-    }
-  }
-
   .event__icon {
     aspect-ratio: 1;
     background-color: var(--card-color);

app/helpers/events_helper.rb

@@ -12,7 +12,7 @@ module EventsHelper
 
   def event_cluster_tag(hour, col, &)
     row = 25 - hour
-    tag.div class: "event__wrapper", style: "grid-area: #{row}/#{col}", &
+    tag.ul class: "events__time-block", style: "grid-area: #{row}/#{col}", &
   end
 
   def event_next_page_link(next_day)

app/views/events/_day.html.erb

@@ -7,7 +7,21 @@
       </span>
     </h2>
 
-    <div class="center events">
+
+    <%= render "events/day_timeline_column", title: "Added", 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  %>

app/views/events/_day_timeline.html.erb

@@ -2,7 +2,6 @@
   <% events_grouped_by_hour.group_by { event_column(it) }.each do |column, events| %>
     <%= event_cluster_tag(hour, column) do %>
       <%= render partial: "events/event", collection: events %>
-
       <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
     <% end %>
   <% end %>

app/views/events/_day_timeline_column.html.erb

@@ -0,0 +1,11 @@
+<% day_timeline.events.group_by { event_column(it) }.each do |column, events_grouped_by_column| %>
+  <div class="events__column">
+    <h2 class="events__column-header"><%= column %></h2>
+    <% events_grouped_by_column.group_by { it.created_at.hour }.each do |hour, events| %>
+      <%= event_cluster_tag(hour, column) do %>
+        <%= render partial: "events/event", collection: events %>
+        <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

test/controllers/events_controller_test.rb

@@ -11,7 +11,7 @@ class EventsControllerTest < ActionDispatch::IntegrationTest
   test "index" do
     get events_path
 
-    assert_select "div.event__wrapper[style='grid-area: 17/2']" do
+    assert_select "ul.event__time-block[style='grid-area: 17/2']" do
       assert_select "strong", text: "David assigned JZ to Layout is broken"
     end
   end
@@ -21,7 +21,7 @@ class EventsControllerTest < ActionDispatch::IntegrationTest
 
     get events_path
 
-    assert_select "div.event__wrapper[style='grid-area: 22/2']" do
+    assert_select "ul.event__time-block[style='grid-area: 22/2']" do
       assert_select "strong", text: "David assigned JZ to Layout is broken"
     end
   end