From 6d89918c6bd8cc1c4d481a8a8bd5cf615111a5b9 Mon Sep 17 00:00:00 2001 From: Samuel ORTION Date: Thu, 18 Aug 2022 09:30:17 +0200 Subject: [PATCH] www: Add .active on nav menu, fix homepage stats --- www/assets/styles/app.css | 5 +- www/assets/styles/menu.css | 29 ++++--- www/src/Controller/HomeController.php | 6 +- www/templates/menu.html.twig | 113 ++++++++++++++----------- www/templates/stats.html.twig | 2 +- www/templates/utils/nav-item.html.twig | 6 ++ 6 files changed, 94 insertions(+), 67 deletions(-) create mode 100644 www/templates/utils/nav-item.html.twig diff --git a/www/assets/styles/app.css b/www/assets/styles/app.css index 216b77b..9008bd3 100644 --- a/www/assets/styles/app.css +++ b/www/assets/styles/app.css @@ -157,8 +157,9 @@ body { header { padding: 1em; /** Align text and center of image */ - justify-content: center; - align-items: baseline; + /* justify-content: center; */ + width: fit-content; + margin: auto; } header h1 { diff --git a/www/assets/styles/menu.css b/www/assets/styles/menu.css index d433632..acbfb83 100644 --- a/www/assets/styles/menu.css +++ b/www/assets/styles/menu.css @@ -116,34 +116,37 @@ nav { font-size: var(--font-size); } +.menu>ul>li>a:hover, .menu>ul>li>a.active { + color: orange; +} + + .toggler~.fill { - display: none; + visibility: hidden; + width: 0; } .toggler:checked~.fill { - background: var(--nav-bg); - position: absolute; + background-color: var(--nav-bg); + position: fixed; top: 0; left: 0; height: var(--burger-size); width: var(--nav-width); - display: block; z-index: 10; -} - -.toggler:checked~.menu>ul { - width: 20em; - transition: fit-content .5s ease; - opacity: 1; - transition: opacity .5s, visibility .5s, height .5s, width .5s; + transition: visibility .5s, width .5s; visibility: visible; } -.toggler:checked~.menu>ul>li>a:hover { - color: orange; +.toggler:checked~.menu>ul { + width: var(--nav-width); + opacity: 1; + transition: visibility .5s, width .5s; + visibility: visible; } + @media screen and (max-width: 700px) { nav { --burger-size: 4em; diff --git a/www/src/Controller/HomeController.php b/www/src/Controller/HomeController.php index 38f77f4..7ececa9 100644 --- a/www/src/Controller/HomeController.php +++ b/www/src/Controller/HomeController.php @@ -50,7 +50,8 @@ class HomeController extends AbstractController ORDER BY `contact_count` DESC LIMIT 1"; $stmt = $this->connection->prepare($sql); $result = $stmt->executeQuery(); - return $result->fetchAllAssociative()[0]; + $species = $result->fetchAllAssociative(); + return $species[0]; } private function get_last_recorded_species() @@ -62,7 +63,8 @@ class HomeController extends AbstractController ORDER BY `date` DESC LIMIT 1"; $stmt = $this->connection->prepare($sql); $result = $stmt->executeQuery(); - return $result->fetchAllAssociative(); + $species = $result->fetchAllAssociative(); + return $species[0]; } private function last_chart_generated() { diff --git a/www/templates/menu.html.twig b/www/templates/menu.html.twig index 2a7f3b3..39e2398 100644 --- a/www/templates/menu.html.twig +++ b/www/templates/menu.html.twig @@ -1,51 +1,66 @@ diff --git a/www/templates/stats.html.twig b/www/templates/stats.html.twig index db9a265..93ce68a 100644 --- a/www/templates/stats.html.twig +++ b/www/templates/stats.html.twig @@ -19,7 +19,7 @@
  • {{ "Last detected species" | trans }}: - {% if stats["last-recorded-species"] is defined %} + {% if stats["last-detected-species"] is defined %} {{ stats["last-detected-species"]["scientific_name"] }} diff --git a/www/templates/utils/nav-item.html.twig b/www/templates/utils/nav-item.html.twig new file mode 100644 index 0000000..1b0f8e7 --- /dev/null +++ b/www/templates/utils/nav-item.html.twig @@ -0,0 +1,6 @@ +
  • + + {{ name }} + +