Round rail ends; drop arrowhead lower and shift right
- 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:
+52
-19
@@ -508,25 +508,52 @@ $card_open = '<table role="presentation" cellpadding="0" cellspacing="0" border
|
||||
. 'style="width:100%;border-collapse:collapse;">';
|
||||
$card_close = '</table>';
|
||||
|
||||
// Closing arrow that visually caps each section's timeline. Inline
|
||||
// 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'] . '"'
|
||||
// The rail visual is built from three pieces:
|
||||
//
|
||||
// 1. $timeline_top_cap — a 4px tall stub at the start of the
|
||||
// section whose border-top-left-radius rounds the top end of
|
||||
// the rail.
|
||||
// 2. Event rows — each carries the rail as a border-left
|
||||
// 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">'
|
||||
. '<path d="M5 6 L12 15 L19 6"/>'
|
||||
. '<path d="M5 6 L13 16 L21 6"/>'
|
||||
. '</svg>';
|
||||
|
||||
$timeline_close_row = '<tr>'
|
||||
. '<td></td>'
|
||||
. '<td></td>'
|
||||
. '<td style="height:24px;padding:0 14px 0 24px;'
|
||||
. 'border-left:4px solid ' . $palette['rail'] . ';'
|
||||
. 'font-size:0;line-height:0;vertical-align:bottom;">'
|
||||
. '<span style="display:inline-block;margin-left:-38px;margin-bottom:-2px;'
|
||||
. 'vertical-align:bottom;">'
|
||||
$timeline_arrow_row = '<tr>'
|
||||
. '<td></td><td></td>'
|
||||
. '<td style="height:32px;padding:14px 0 0 24px;'
|
||||
. 'font-size:0;line-height:0;vertical-align:top;text-align:left;">'
|
||||
. '<span style="display:inline-block;margin-left:-37px;vertical-align:top;">'
|
||||
. $arrow_svg
|
||||
. '</span>'
|
||||
. '</td></tr>';
|
||||
@@ -586,6 +613,7 @@ $timeline_close_row = '<tr>'
|
||||
</p>
|
||||
<?php if ($detailed !== []) : ?>
|
||||
<?= $card_open ?>
|
||||
<?= $timeline_top_cap ?>
|
||||
<?php $prev_jd = null; ?>
|
||||
<?php foreach ($detailed as $fact) : ?>
|
||||
<?php
|
||||
@@ -600,7 +628,8 @@ $timeline_close_row = '<tr>'
|
||||
echo $event_row($fact, $body, $show_dot);
|
||||
?>
|
||||
<?php endforeach ?>
|
||||
<?= $timeline_close_row ?>
|
||||
<?= $timeline_bottom_cap ?>
|
||||
<?= $timeline_arrow_row ?>
|
||||
<?= $card_close ?>
|
||||
<?php endif ?>
|
||||
<?php if ($summary !== []) : ?>
|
||||
@@ -636,6 +665,7 @@ $timeline_close_row = '<tr>'
|
||||
</p>
|
||||
<?php if ($detailed !== []) : ?>
|
||||
<?= $card_open ?>
|
||||
<?= $timeline_top_cap ?>
|
||||
<?php $prev_jd = null; ?>
|
||||
<?php foreach ($detailed as $fact) : ?>
|
||||
<?php
|
||||
@@ -650,7 +680,8 @@ $timeline_close_row = '<tr>'
|
||||
echo $event_row($fact, $body, $show_dot);
|
||||
?>
|
||||
<?php endforeach ?>
|
||||
<?= $timeline_close_row ?>
|
||||
<?= $timeline_bottom_cap ?>
|
||||
<?= $timeline_arrow_row ?>
|
||||
<?= $card_close ?>
|
||||
<?php endif ?>
|
||||
<?php if ($summary !== []) : ?>
|
||||
@@ -686,6 +717,7 @@ $timeline_close_row = '<tr>'
|
||||
</p>
|
||||
<?php if ($detailed !== []) : ?>
|
||||
<?= $card_open ?>
|
||||
<?= $timeline_top_cap ?>
|
||||
<?php $prev_jd = null; ?>
|
||||
<?php foreach ($detailed as $fact) : ?>
|
||||
<?php
|
||||
@@ -700,7 +732,8 @@ $timeline_close_row = '<tr>'
|
||||
echo $event_row($fact, $body, $show_dot);
|
||||
?>
|
||||
<?php endforeach ?>
|
||||
<?= $timeline_close_row ?>
|
||||
<?= $timeline_bottom_cap ?>
|
||||
<?= $timeline_arrow_row ?>
|
||||
<?= $card_close ?>
|
||||
<?php endif ?>
|
||||
<?php if ($summary !== []) : ?>
|
||||
|
||||
Reference in New Issue
Block a user