Alexander/webtrees_email_newsletter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Round rail ends; drop arrowhead lower and shift right

Browse Source 
- Two new stub rows now bookend each section's rail. The top
  cap is a 4px-high TR whose rail TD carries border-top-left/
  -right-radius so the rail's top end visually rounds off.
  The bottom cap is an 18px-high TR with border-bottom-left/
  -right-radius so the rail's tail tapers into a rounded stop
  beneath the last card.
- The chevron arrowhead now lives in its own TR with no rail
  border, sitting 14px below the rounded rail-end and another
  ~18px of cell height below that — visibly separated from the
  rail rather than sitting flush against its tip.
- Chevron's horizontal offset shifted from -38 to -37 (one px
  right) and SVG width bumped to 26 to give the arrow a little
  more visual weight at its new lower position.
This commit is contained in:
Alexander Bocken
2026-05-15 13:43:00 +02:00
parent 6bad52e68d
commit eaad7f844c
1 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/email.phtml
+52 -19
View File
@@ -508,25 +508,52 @@ $card_open = '<table role="presentation" cellpadding="0" cellspacing="0" border
. 'style="width:100%;border-collapse:collapse;">'; . 'style="width:100%;border-collapse:collapse;">';
$card_close = '</table>'; $card_close = '</table>';
// Closing arrow that visually caps each section's timeline. Inline // The rail visual is built from three pieces:
// SVG chevron with stroke-linecap:round so the line ends are blunted //
// — matches the look of UI arrowheads rather than a filled triangle. // 1. $timeline_top_cap — a 4px tall stub at the start of the
// margin-left mirrors the dot's offset so both elements sit on the // section whose border-top-left-radius rounds the top end of
// same vertical axis. // the rail.
$arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"' // 2. Event rows — each carries the rail as a border-left
. ' viewBox="0 0 24 20" fill="none" stroke="' . $palette['rail'] . '"' // on its right-hand TD; with border-collapse:collapse those
// adjacent borders merge into one continuous line.
// 3. $timeline_bottom_cap — a longer stub after the last event
// that extends the rail visually below the cards, with a
// border-bottom-left-radius rounding the bottom end.
//
// Then $timeline_arrow_row sits below the rail with no border (so
// the rail terminates cleanly and the arrow is visually separated)
// and renders the chevron arrowhead in inline SVG.
$timeline_top_cap = '<tr>'
. '<td></td><td></td>'
. '<td style="height:4px;padding:0;'
. 'border-left:4px solid ' . $palette['rail'] . ';'
. 'border-top-left-radius:4px;border-top-right-radius:4px;'
. 'font-size:0;line-height:0;"></td>'
. '</tr>';
$timeline_bottom_cap = '<tr>'
. '<td></td><td></td>'
. '<td style="height:18px;padding:0;'
. 'border-left:4px solid ' . $palette['rail'] . ';'
. 'border-bottom-left-radius:4px;border-bottom-right-radius:4px;'
. 'font-size:0;line-height:0;"></td>'
. '</tr>';
// Chevron arrowhead — inline SVG, stroke-linecap:round +
// stroke-linejoin:round so the strokes have soft ends. Sits below
// the rail's rounded tail in its own row so the rail terminates
// cleanly without the chevron's strokes painting over the round.
$arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="22"'
. ' viewBox="0 0 26 22" fill="none" stroke="' . $palette['rail'] . '"'
. ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round">' . ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
. '<path d="M5 6 L12 15 L19 6"/>' . '<path d="M5 6 L13 16 L21 6"/>'
. '</svg>'; . '</svg>';
$timeline_close_row = '<tr>' $timeline_arrow_row = '<tr>'
. '<td></td>' . '<td></td><td></td>'
. '<td></td>' . '<td style="height:32px;padding:14px 0 0 24px;'
. '<td style="height:24px;padding:0 14px 0 24px;' . 'font-size:0;line-height:0;vertical-align:top;text-align:left;">'
. 'border-left:4px solid ' . $palette['rail'] . ';' . '<span style="display:inline-block;margin-left:-37px;vertical-align:top;">'
. 'font-size:0;line-height:0;vertical-align:bottom;">'
. '<span style="display:inline-block;margin-left:-38px;margin-bottom:-2px;'
. 'vertical-align:bottom;">'
. $arrow_svg . $arrow_svg
. '</span>' . '</span>'
. '</td></tr>'; . '</td></tr>';
@@ -586,6 +613,7 @@ $timeline_close_row = '<tr>'
</p> </p>
<?php if ($detailed !== []) : ?> <?php if ($detailed !== []) : ?>
<?= $card_open ?> <?= $card_open ?>
<?= $timeline_top_cap ?>
<?php $prev_jd = null; ?> <?php $prev_jd = null; ?>
<?php foreach ($detailed as $fact) : ?> <?php foreach ($detailed as $fact) : ?>
<?php <?php
@@ -600,7 +628,8 @@ $timeline_close_row = '<tr>'
echo $event_row($fact, $body, $show_dot); echo $event_row($fact, $body, $show_dot);
?> ?>
<?php endforeach ?> <?php endforeach ?>
<?= $timeline_close_row ?> <?= $timeline_bottom_cap ?>
<?= $timeline_arrow_row ?>
<?= $card_close ?> <?= $card_close ?>
<?php endif ?> <?php endif ?>
<?php if ($summary !== []) : ?> <?php if ($summary !== []) : ?>
@@ -636,6 +665,7 @@ $timeline_close_row = '<tr>'
</p> </p>
<?php if ($detailed !== []) : ?> <?php if ($detailed !== []) : ?>
<?= $card_open ?> <?= $card_open ?>
<?= $timeline_top_cap ?>
<?php $prev_jd = null; ?> <?php $prev_jd = null; ?>
<?php foreach ($detailed as $fact) : ?> <?php foreach ($detailed as $fact) : ?>
<?php <?php
@@ -650,7 +680,8 @@ $timeline_close_row = '<tr>'
echo $event_row($fact, $body, $show_dot); echo $event_row($fact, $body, $show_dot);
?> ?>
<?php endforeach ?> <?php endforeach ?>
<?= $timeline_close_row ?> <?= $timeline_bottom_cap ?>
<?= $timeline_arrow_row ?>
<?= $card_close ?> <?= $card_close ?>
<?php endif ?> <?php endif ?>
<?php if ($summary !== []) : ?> <?php if ($summary !== []) : ?>
@@ -686,6 +717,7 @@ $timeline_close_row = '<tr>'
</p> </p>
<?php if ($detailed !== []) : ?> <?php if ($detailed !== []) : ?>
<?= $card_open ?> <?= $card_open ?>
<?= $timeline_top_cap ?>
<?php $prev_jd = null; ?> <?php $prev_jd = null; ?>
<?php foreach ($detailed as $fact) : ?> <?php foreach ($detailed as $fact) : ?>
<?php <?php
@@ -700,7 +732,8 @@ $timeline_close_row = '<tr>'
echo $event_row($fact, $body, $show_dot); echo $event_row($fact, $body, $show_dot);
?> ?>
<?php endforeach ?> <?php endforeach ?>
<?= $timeline_close_row ?> <?= $timeline_bottom_cap ?>
<?= $timeline_arrow_row ?>
<?= $card_close ?> <?= $card_close ?>
<?php endif ?> <?php endif ?>
<?php if ($summary !== []) : ?> <?php if ($summary !== []) : ?>