From b3c7f553b4335e66f04f25870dc84b60c7cc296e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 28 Jan 2025 18:07:04 -0600
Subject: [PATCH] Clean up, be more BEM-like

---
 app/assets/stylesheets/events.css | 76 +++++++++++++++----------------
 app/helpers/events_helper.rb      |  4 +-
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 517eb79a0..f8f8d2d73 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -8,6 +8,44 @@
   padding-block-start: var(--block-space);
 }
 
+.events__index {
+  --row-gap: calc(4 * var(--block-space));
+}
+
+.events--none {
+  .events + & {
+    padding-block-start: calc(4 * var(--block-space));
+  }
+}
+
+.event {
+  --column-gap: 0.7ch;
+  --panel-border-radius: 0.5em;
+  --panel-padding: 0.6em 1.2em 0.6em 0.6em;
+  --panel-size: auto; 
+
+  margin: var(--inline-space);
+}
+
+.event--related {
+  box-shadow: 0 0 0.3em 0.3em var(--bubble-color) !important;
+}
+
+.event__grid-item {
+  background-color: var(--color-selected);
+  block-size: 100%;
+  border-radius: 0;
+  display: flex;
+  inline-size: 100%;
+}
+
+.event__grid-column-title {
+  background-color: var(--color-bg);
+  inset-block-start: 0;
+  padding-block: var(--grid-lines);
+  z-index: 1;
+}
+
 .event__wrapper {
   align-content: end;
   display: grid;
@@ -26,41 +64,3 @@
     align-self: start;
   }
 }
-
-.event {
-  --column-gap: 0.7ch;
-  --panel-border-radius: 0.5em;
-  --panel-padding: 0.6em 1.2em 0.6em 0.6em;
-  --panel-size: auto; 
-
-  margin: var(--inline-space);
-}
-
-.events--none {
-  .events + & {
-    padding-block-start: calc(4 * var(--block-space));
-  }
-}
-
-.event-grid-item {
-  background-color: var(--color-selected);
-  block-size: 100%;
-  border-radius: 0;
-  display: flex;
-  inline-size: 100%;
-}
-
-.events__index {
-  --row-gap: calc(4 * var(--block-space));
-}
-
-.event-grid-column-title {
-  background-color: var(--color-bg);
-  inset-block-start: 0;
-  padding-block: var(--grid-lines);
-  z-index: 1;
-}
-
-.event--related {
-  box-shadow: 0 0 0.3em 0.3em var(--bubble-color) !important;
-}
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 919900fd5..064a57605 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -38,14 +38,14 @@ module EventsHelper
   def render_event_grid_cells(day, columns: 4, rows: 24)
     safe_join((2..rows + 1).map do |row|
       (1..columns).map do |col|
-        tag.div class: class_names("event-grid-item"), style: "grid-area: #{row}/#{col};"
+        tag.div class: class_names("event__grid-item"), style: "grid-area: #{row}/#{col};"
       end
     end.flatten)
   end
 
   def render_column_headers
     [ "Touched", "Discussed", "Added", "Popped" ].map do |header|
-      content_tag(:h3, header, class: "event-grid-column-title margin-block-end-half position-sticky")
+      content_tag(:h3, header, class: "event__grid-column-title margin-block-end-half position-sticky")
     end.join.html_safe
   end
 end