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

Centre dot + arrow on rail; chevron arrowhead with rounded caps

Browse Source 
- Bumped the dot's margin-left from -31 to -33 so its centre
  lands on the rail's centre (the border-collapsed 4px border
  effectively leaves 26px between rail centre and content-start;
  half of a 14px dot is 7px, so margin = -(26+7)). margin-right
  bumped to 16 to preserve the gap to the date text.
- Replaced the CSS-triangle arrowhead with an inline SVG chevron
  (stroke-linecap:round, stroke-linejoin:round, stroke-width:3)
  so the cap matches the rounded "v" arrow look the user asked
  for. SVG sits at the bottom of its cell with the same -38
  offset as the dot pile so dot, chevron and rail share a single
  vertical axis.
This commit is contained in:
Alexander Bocken
2026-05-15 13:37:38 +02:00
parent 6f0a55de5c
commit 6bad52e68d
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/email.phtml
+26 -10
View File
@@ -465,12 +465,19 @@ $event_row = static function (
$parts = $date_parts($fact); $parts = $date_parts($fact);
// The rail TD has padding-left:24 + border-left:4. Inline
// content therefore starts 26px right of the rail centre
// (with border-collapse:collapse the 4px border straddles the
// cell boundary, putting half its width into our cell). A
// 14px-wide dot wants margin-left = -(26 + 7) = -33 to land
// its centre on the rail.
$dot_html = $show_dot $dot_html = $show_dot
? '<span style="display:inline-block;width:14px;height:14px;background:' ? '<span style="display:inline-block;width:14px;height:14px;background:'
. $palette['dot'] . $palette['dot']
. ';border-radius:50%;margin-left:-31px;margin-right:14px;vertical-align:middle;' . ';border-radius:50%;margin-left:-33px;margin-right:16px;'
. 'box-shadow:0 0 0 4px ' . $palette['bg'] . ';"></span>' . 'vertical-align:middle;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>'; : '<span style="display:inline-block;width:14px;margin-left:-33px;'
. 'margin-right:16px;vertical-align:middle;"></span>';
if ($show_dot) { if ($show_dot) {
$date_html = $date_html =
@@ -501,18 +508,27 @@ $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>';
// Downward-pointing CSS triangle, coloured to match the rail, used as // Closing arrow that visually caps each section's timeline. Inline
// the closing arrow that visually caps each section's timeline. // SVG chevron with stroke-linecap:round so the line ends are blunted
// — matches the look of UI arrowheads rather than a filled triangle.
// margin-left mirrors the dot's offset so both elements sit on the
// same vertical axis.
$arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"'
. ' viewBox="0 0 24 20" fill="none" stroke="' . $palette['rail'] . '"'
. ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
. '<path d="M5 6 L12 15 L19 6"/>'
. '</svg>';
$timeline_close_row = '<tr>' $timeline_close_row = '<tr>'
. '<td></td>' . '<td></td>'
. '<td></td>' . '<td></td>'
. '<td style="height:18px;padding:0 14px 0 24px;' . '<td style="height:24px;padding:0 14px 0 24px;'
. 'border-left:4px solid ' . $palette['rail'] . ';' . 'border-left:4px solid ' . $palette['rail'] . ';'
. 'font-size:0;line-height:0;vertical-align:bottom;">' . 'font-size:0;line-height:0;vertical-align:bottom;">'
. '<span style="display:inline-block;width:0;height:0;' . '<span style="display:inline-block;margin-left:-38px;margin-bottom:-2px;'
. 'border-left:7px solid transparent;border-right:7px solid transparent;' . 'vertical-align:bottom;">'
. 'border-top:11px solid ' . $palette['rail'] . ';' . $arrow_svg
. 'margin-left:-33px;margin-bottom:-1px;"></span>' . '</span>'
. '</td></tr>'; . '</td></tr>';
?><!doctype html> ?><!doctype html>