diff --git a/ux.symfony.com/assets/styles/app/_html.scss b/ux.symfony.com/assets/styles/app/_html.scss index a30d06bfadd..f114a3aaed0 100644 --- a/ux.symfony.com/assets/styles/app/_html.scss +++ b/ux.symfony.com/assets/styles/app/_html.scss @@ -10,7 +10,7 @@ body { a, a.page-link, a.page-link:hover { text-decoration: none; - color: var(--color-primary); + color: inherit; } ::selection { @@ -27,6 +27,7 @@ a, a.page-link, a.page-link:hover { min-width: 320px; overflow-x: clip; } + main { flex-grow: 1; } @@ -35,3 +36,28 @@ main, footer { flex-shrink: 0; } + +a.link { + --color: #d9438e; + color: var(--color); + position: relative; + &:after { + position: absolute; + content:""; + bottom: -2px; + left: 0; + right: 0; + height: 1px; + display: block; + transition: all .2s ease-in-out; + background: var(--color); + transform: scaleX(0); + transform-origin: center left; + } + &:hover { + &:after { + transform: scaleX(1); + transition: transform .15s ease-in-out revert; + } + } +} diff --git a/ux.symfony.com/src/Service/DinoStatsService.php b/ux.symfony.com/src/Service/DinoStatsService.php index 4fc3e5239f0..617d95b2841 100644 --- a/ux.symfony.com/src/Service/DinoStatsService.php +++ b/ux.symfony.com/src/Service/DinoStatsService.php @@ -17,6 +17,21 @@ class DinoStatsService private const ALL_DINOS = 'all'; + private const COLORS = [ + 'de3232', + 'de6732', + 'dede32', + '67de32', + '32de32', + '32de67', + '32dede', + '3267de', + '3232de', + '6732de', + 'de32de', + 'de3267', + ]; + public static function getAllTypes(): array { return [ @@ -48,8 +63,11 @@ public function fetchData(int $start, int $end, array $types): array $datasets = []; + $colors = self::COLORS; + shuffle($colors); + foreach ($types as $type) { - $color = sprintf('rgb(%d, %d, %d, .4)', mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); + $color = '#'.(next($colors) ?: reset($colors)); $datasets[] = [ 'label' => ucwords($type), diff --git a/ux.symfony.com/src/Twig/DinoChart.php b/ux.symfony.com/src/Twig/DinoChart.php index cdf126eb597..8d7fd5d44ae 100644 --- a/ux.symfony.com/src/Twig/DinoChart.php +++ b/ux.symfony.com/src/Twig/DinoChart.php @@ -29,6 +29,7 @@ class DinoChart #[LiveProp(writable: true)] public int $fromYear = -200; + #[LiveProp(writable: true)] public int $toYear = -65; @@ -59,6 +60,24 @@ public function getChart(): Chart abs($this->toYear) ), ], + 'legend' => [ + 'labels' => [ + 'boxHeight' => 20, + 'boxWidth' => 50, + 'padding' => 20, + 'font' => [ + 'size' => 14, + ], + ], + ], + ], + 'elements' => [ + 'line' => [ + 'borderWidth' => 5, + 'tension' => 0.25, + 'borderCapStyle' => 'round', + 'borderJoinStyle' => 'round', + ], ], 'maintainAspectRatio' => false, ]); diff --git a/ux.symfony.com/templates/components/DinoChart.html.twig b/ux.symfony.com/templates/components/DinoChart.html.twig index 282e5365bdd..5f1da6852b4 100644 --- a/ux.symfony.com/templates/components/DinoChart.html.twig +++ b/ux.symfony.com/templates/components/DinoChart.html.twig @@ -45,9 +45,13 @@
-
+
{{ render_chart(chart) }}
- Source: National History Museum courtesy of https://github.com/kjanjua26/jurassic-park + Source: + National History Museum courtesy of + https://github.com/kjanjua26/jurassic-park + +