From abe77a9b9d97ab64c31c6c8a4aad95d547d688e6 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 15 May 2026 13:26:15 +0200
Subject: [PATCH] Gap between event cards; dotless rows drop day, keep just
 year
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Each event row is now a self-contained card (full border on
  all four sides, rounded all four corners). border-spacing on
  the section table inserts a 10px vertical gap between cards
  so they read as distinct entries. The timeline rail breaks
  along with the cards, which actually reads better — each event
  feels like its own beat on the timeline rather than rungs of a
  ladder.
- When two events share an upcoming day, the second row
  (dotless) used to repeat "17. MAI" — wasted vertical space.
  It now only prints the year, bumped up to 14px so it carries
  on its own. The always-visible year is also slightly larger
  (13px vs 11px) and tonally lifted from #aaa muted to #777
  tertiary so it pairs evenly with the day-month line above it.
---
 resources/views/email.phtml | 84 ++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/resources/views/email.phtml b/resources/views/email.phtml
index 4f764f2..0d936b5 100644
--- a/resources/views/email.phtml
+++ b/resources/views/email.phtml
@@ -431,11 +431,16 @@ $summary_item_style = 'padding:3px 0;';
 //
 // $show_dot suppresses the dot on rows whose upcoming-day matches
 // the previous row, so each calendar day has exactly one dot.
+// Every row is now a self-contained mini-card (full border on all
+// sides, rounded corners). Vertical gaps between rows come from the
+// outer table's border-spacing — the rail naturally breaks between
+// rows along with the cards.
+//
+// $show_dot suppresses the dot AND the day+month line on rows whose
+// upcoming-day matches the previous (only the year is then shown).
 $event_row = static function (
     Fact $fact,
     string $body_html,
-    bool $is_first,
-    bool $is_last,
     bool $show_dot,
 )
     use (
@@ -448,25 +453,15 @@ $event_row = static function (
         $card_corner_radius,
         $palette,
     ): string {
-        $avatar_extra  = '';
-        $content_extra = '';
+        $avatar_extra = 'border-top:1px solid ' . $palette['border'] . ';'
+            . 'border-bottom:1px solid ' . $palette['border'] . ';'
+            . 'border-top-left-radius:' . $card_corner_radius . 'px;'
+            . 'border-bottom-left-radius:' . $card_corner_radius . 'px;';
 
-        if ($is_first) {
-            $avatar_extra  .= 'border-top:1px solid ' . $palette['border'] . ';'
-                . 'border-top-left-radius:' . $card_corner_radius . 'px;';
-            $content_extra .= 'border-top:1px solid ' . $palette['border'] . ';'
-                . 'border-top-right-radius:' . $card_corner_radius . 'px;';
-        }
-
-        if ($is_last) {
-            $avatar_extra  .= 'border-bottom:1px solid ' . $palette['border'] . ';'
-                . 'border-bottom-left-radius:' . $card_corner_radius . 'px;';
-            $content_extra .= 'border-bottom:1px solid ' . $palette['border'] . ';'
-                . 'border-bottom-right-radius:' . $card_corner_radius . 'px;';
-        } else {
-            $avatar_extra  .= 'border-bottom:1px solid ' . $palette['border'] . ';';
-            $content_extra .= 'border-bottom:1px solid ' . $palette['border'] . ';';
-        }
+        $content_extra = 'border-top:1px solid ' . $palette['border'] . ';'
+            . 'border-bottom:1px solid ' . $palette['border'] . ';'
+            . 'border-top-right-radius:' . $card_corner_radius . 'px;'
+            . 'border-bottom-right-radius:' . $card_corner_radius . 'px;';
 
         $parts = $date_parts($fact);
 
@@ -477,13 +472,24 @@ $event_row = static function (
                 . 'box-shadow:0 0 0 4px ' . $palette['bg'] . ';"></span>'
             : '<span style="display:inline-block;width:14px;margin-left:-31px;margin-right:14px;vertical-align:middle;"></span>';
 
-        $date_html =
-            '<span style="display:inline-block;vertical-align:middle;">'
-            . '<div style="font-weight:600;font-size:13px;letter-spacing:0.12em;color:'
-            . $palette['ink'] . ';">' . e($parts['day_month']) . '</div>'
-            . '<div style="font-weight:300;font-size:11px;color:'
-            . $palette['mute'] . ';margin-top:1px;">' . e($parts['year']) . '</div>'
-            . '</span>';
+        // When the dot is suppressed, also drop the day+month (it's
+        // the same as the row above) and show only the year — a touch
+        // larger than the always-visible year so it reads on its own.
+        if ($show_dot) {
+            $date_html =
+                '<span style="display:inline-block;vertical-align:middle;">'
+                . '<div style="font-weight:600;font-size:13px;letter-spacing:0.12em;color:'
+                . $palette['ink'] . ';">' . e($parts['day_month']) . '</div>'
+                . '<div style="font-weight:400;font-size:13px;color:'
+                . $palette['ink3'] . ';margin-top:2px;">' . e($parts['year']) . '</div>'
+                . '</span>';
+        } else {
+            $date_html =
+                '<span style="display:inline-block;vertical-align:middle;'
+                . 'font-weight:400;font-size:14px;color:' . $palette['ink2'] . ';">'
+                . e($parts['year'])
+                . '</span>';
+        }
 
         return '<tr>'
             . '<td style="' . $avatar_cell_base . $avatar_extra . '">' . $record_avatars($fact) . '</td>'
@@ -493,10 +499,10 @@ $event_row = static function (
             . '</tr>';
     };
 
-// Outer section table is transparent. Each event row contributes its
-// own card-surfaced avatar+content TDs plus the timeline TD.
+// Outer section table is transparent. border-spacing puts a 10px
+// vertical gap between rows so each card stands on its own.
 $card_open  = '<table role="presentation" cellpadding="0" cellspacing="0" border="0" '
-    . 'style="width:100%;border-collapse:separate;border-spacing:0;">';
+    . 'style="width:100%;border-collapse:separate;border-spacing:0 10px;">';
 $card_close = '</table>';
 
 ?><!doctype html>
@@ -554,8 +560,8 @@ $card_close = '</table>';
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
-                                <?php $prev_jd = null; $total = count($detailed); ?>
-                                <?php foreach ($detailed as $i => $fact) : ?>
+                                <?php $prev_jd = null; ?>
+                                <?php foreach ($detailed as $fact) : ?>
                                     <?php
                                         $age      = $upcoming_age($fact);
                                         $body     = '<span style="display:inline-block;vertical-align:middle;margin-right:12px;">' . $event_icon('BIRT') . '</span>'
@@ -565,7 +571,7 @@ $card_close = '</table>';
                                             . '</span>';
                                         $show_dot = ($fact->jd ?? 0) !== $prev_jd;
                                         $prev_jd  = $fact->jd ?? 0;
-                                        echo $event_row($fact, $body, $i === 0, $i === $total - 1, $show_dot);
+                                        echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
                             <?= $card_close ?>
@@ -603,8 +609,8 @@ $card_close = '</table>';
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
-                                <?php $prev_jd = null; $total = count($detailed); ?>
-                                <?php foreach ($detailed as $i => $fact) : ?>
+                                <?php $prev_jd = null; ?>
+                                <?php foreach ($detailed as $fact) : ?>
                                     <?php
                                         $age      = $upcoming_age($fact);
                                         $body     = '<span style="display:inline-block;vertical-align:middle;margin-right:12px;">' . $event_icon('MARR') . '</span>'
@@ -614,7 +620,7 @@ $card_close = '</table>';
                                             . '</span>';
                                         $show_dot = ($fact->jd ?? 0) !== $prev_jd;
                                         $prev_jd  = $fact->jd ?? 0;
-                                        echo $event_row($fact, $body, $i === 0, $i === $total - 1, $show_dot);
+                                        echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
                             <?= $card_close ?>
@@ -652,8 +658,8 @@ $card_close = '</table>';
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
-                                <?php $prev_jd = null; $total = count($detailed); ?>
-                                <?php foreach ($detailed as $i => $fact) : ?>
+                                <?php $prev_jd = null; ?>
+                                <?php foreach ($detailed as $fact) : ?>
                                     <?php
                                         $kind     = $event_kind($fact);
                                         $body     = '<span style="display:inline-block;vertical-align:middle;margin-right:12px;">' . $event_icon($kind) . '</span>'
@@ -663,7 +669,7 @@ $card_close = '</table>';
                                             . '</span>';
                                         $show_dot = ($fact->jd ?? 0) !== $prev_jd;
                                         $prev_jd  = $fact->jd ?? 0;
-                                        echo $event_row($fact, $body, $i === 0, $i === $total - 1, $show_dot);
+                                        echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
                             <?= $card_close ?>