Fix & minor code improvement on Timeline chart (#5372)

* Fix timeline events not aligned with person's color when more than 6

* Timeline chart: move chart's height setting from JS to inline HTML template

1 files changed, 2 insertions, 5 deletions

diff --git a/resources/views/modules/timeline-chart/chart.phtml b/resources/views/modules/timeline-chart/chart.phtml
index 65fffc0645..e742ce7920 100644
--- a/resources/views/modules/timeline-chart/chart.phtml
+++ b/resources/views/modules/timeline-chart/chart.phtml
@@ -38,9 +38,6 @@ use Fisharebest\Webtrees\Individual;
     let bheight = <?= json_encode($bheight, JSON_THROW_ON_ERROR) ?>;
     let scale = <?= json_encode($scale, JSON_THROW_ON_ERROR) ?>;
 
-    timeline_chart_div = document.getElementById("timeline_chart");
-    timeline_chart_div.style.height = '<?= json_encode(0 + ($topyear - $baseyear) * $scale * 1.1, JSON_THROW_ON_ERROR) ?>px';
-
     /**
      * Find the position of an event, relative to an element.
      *
@@ -252,7 +249,7 @@ use Fisharebest\Webtrees\Individual;
     }
 </script>
 
-<div id="timeline_chart">
+<div id="timeline_chart" style="height:<?= 0 + ($topyear - $baseyear) * $scale * 1.1 ?>px">
     <!-- print the timeline line image -->
     <div id="line" style="position:absolute; <?= I18N::direction() === 'ltr' ? 'left:22px;' : 'right:22px;' ?> top:0;">
         <img src="<?= e(asset('css/images/vline.png')) ?>" width="3"
@@ -337,7 +334,7 @@ use Fisharebest\Webtrees\Individual;
         } else {
             $col = array_search($event->record(), $individuals, true);
         }
-        $col %= 6;
+        $col %= 8;
         echo '</td><td class="person' . $col . '">';
         if (count($individuals) > 6) {
             // We only have six colours, so show names if more than this number