sortion
/
BirdNET-stream
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

www: Add .active on nav menu, fix homepage stats

This commit is contained in:
Samuel Ortion 2022-08-18 09:30:17 +02:00
parent 3ac15ba849
commit 6d89918c6b
6 changed files with 94 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
www/assets/styles/app.css
View File

@ -157,8 +157,9 @@ body {
header { header {
padding: 1em; padding: 1em;
/** Align text and center of image */ /** Align text and center of image */
justify-content: center; /* justify-content: center; */
align-items: baseline; width: fit-content;
margin: auto;
} }
header h1 { header h1 {

29
www/assets/styles/menu.css
View File

@ -116,34 +116,37 @@ nav {
font-size: var(--font-size); font-size: var(--font-size);
} }
.menu>ul>li>a:hover, .menu>ul>li>a.active {
color: orange;
}
.toggler~.fill { .toggler~.fill {
display: none; visibility: hidden;
width: 0;
} }
.toggler:checked~.fill { .toggler:checked~.fill {
background: var(--nav-bg); background-color: var(--nav-bg);
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: var(--burger-size); height: var(--burger-size);
width: var(--nav-width); width: var(--nav-width);
display: block;
z-index: 10; z-index: 10;
} transition: visibility .5s, width .5s;
.toggler:checked~.menu>ul {
width: 20em;
transition: fit-content .5s ease;
opacity: 1;
transition: opacity .5s, visibility .5s, height .5s, width .5s;
visibility: visible; visibility: visible;
} }
.toggler:checked~.menu>ul>li>a:hover { .toggler:checked~.menu>ul {
color: orange; width: var(--nav-width);
opacity: 1;
transition: visibility .5s, width .5s;
visibility: visible;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
nav { nav {
--burger-size: 4em; --burger-size: 4em;

6
www/src/Controller/HomeController.php
View File

@ -50,7 +50,8 @@ class HomeController extends AbstractController
ORDER BY `contact_count` DESC LIMIT 1"; ORDER BY `contact_count` DESC LIMIT 1";
$stmt = $this->connection->prepare($sql); $stmt = $this->connection->prepare($sql);
$result = $stmt->executeQuery(); $result = $stmt->executeQuery();
return $result->fetchAllAssociative()[0]; $species = $result->fetchAllAssociative();
return $species[0];
} }
private function get_last_recorded_species() private function get_last_recorded_species()
@ -62,7 +63,8 @@ class HomeController extends AbstractController
ORDER BY `date` DESC LIMIT 1"; ORDER BY `date` DESC LIMIT 1";
$stmt = $this->connection->prepare($sql); $stmt = $this->connection->prepare($sql);
$result = $stmt->executeQuery(); $result = $stmt->executeQuery();
return $result->fetchAllAssociative(); $species = $result->fetchAllAssociative();
return $species[0];
} }
private function last_chart_generated() { private function last_chart_generated() {

113
www/templates/menu.html.twig
View File

@ -1,51 +1,66 @@
<nav class="navbar"> <nav class="navbar">
<input type="checkbox" class="toggler"> <input type="checkbox" class="toggler" />
<div class="hamburger"> <div class="hamburger">
<div></div> <div></div>
</div> </div>
<div class="fill"></div> <div class="fill"></div>
<div class="menu overlay"> <div class="menu overlay">
<ul> <ul>
<li> {% include 'utils/nav-item.html.twig' with {
<a href="/">{{ "Home" | trans }}</a> route: 'home',
</li> url: '/',
<li> name: 'Home'|trans
<a href="/about">{{ "About" | trans }}</a> } %}
</li> {% include 'utils/nav-item.html.twig' with {
<li> route: 'about',
<a href="/today">{{ "Today's Detections" | trans }}</a> url: '/about',
</li> name: 'About'|trans
<li> } %}
<a href="/spectro">{{ "Spectrogram" | trans }}</a> {% include 'utils/nav-item.html.twig' with {
</li> route: 'today',
<li> url: '/today',
<a href="/stats">{{ "Species Stats" | trans }}</a> name: "Today's Detections"|trans
</li> } %}
<li class="dropdown"> {% include 'utils/nav-item.html.twig' with {
<a href="/records" class="dropdown-button">{{ "Recordings" | trans }}</a> route: 'spectro',
<ul class="dropdown-content"> url: '/spectro',
<li> name: 'Live Spectrogram'|trans
<a href="/records/bests"> } %}
{{ "Best Recordings" | trans }} {% include 'utils/nav-item.html.twig' with {
</a> route: 'stats',
</li> url: '/stats',
</ul> name: 'Statistics'|trans
</li> } %}
<li> <li class="dropdown">
<a href="/charts">{{ "Daily Charts" | trans }}</a> {% include 'utils/nav-item.html.twig' with {
</li> route: 'records',
<li> url: '/records',
<a href="/logs">{{ "View Logs" | trans }}</a> name: 'Recordings'|trans
</li> } %}
<li> <ul class="dropdown-content">
<a href="/services/status">{{ "Status" | trans }}</a> {% include 'utils/nav-item.html.twig' with {
</li> route: 'bests',
<li> url: '/records/best',
<a href="/tools"> name: 'Best Recordings'|trans
{{ "Tools" | trans }} } %}
</a> </ul>
</li> </li>
</ul> {% include 'utils/nav-item.html.twig' with {
</div> route: 'bests',
{% include "title.html.twig" %} url: '/records/best',
name: 'Best Recordings'|trans
} %}
{% include 'utils/nav-item.html.twig' with {
route: 'logs',
url: '/logs',
name: 'View Logs'|trans
} %}
{% include 'utils/nav-item.html.twig' with {
route: 'status',
url: '/services/status',
name: 'Status'|trans
} %}
</ul>
</div>
</nav> </nav>

2
www/templates/stats.html.twig
View File

@ -19,7 +19,7 @@
</li> </li>
<li class="last-recorded-species"> <li class="last-recorded-species">
{{ "Last detected species" | trans }}: {{ "Last detected species" | trans }}:
{% if stats["last-recorded-species"] is defined %} {% if stats["last-detected-species"] is defined %}
<span class="scientific-name"> <span class="scientific-name">
{{ stats["last-detected-species"]["scientific_name"] }} {{ stats["last-detected-species"]["scientific_name"] }}
</span> </span>

6
www/templates/utils/nav-item.html.twig Normal file
View File

@ -0,0 +1,6 @@
<li>
<a class="{{ app.request.get('_route') matches '{' ~ route ~ '_*}' ? 'active' }}"
href="{{ url }}">
{{ name }}
</a>
</li>