www: Add .active on nav menu, fix homepage stats
This commit is contained in:
parent
3ac15ba849
commit
6d89918c6b
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -1,51 +1,66 @@
|
||||
<nav class="navbar">
|
||||
<input type="checkbox" class="toggler">
|
||||
<input type="checkbox" class="toggler" />
|
||||
<div class="hamburger">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="fill"></div>
|
||||
<div class="menu overlay">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">{{ "Home" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">{{ "About" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/today">{{ "Today's Detections" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spectro">{{ "Spectrogram" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/stats">{{ "Species Stats" | trans }}</a>
|
||||
</li>
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'home',
|
||||
url: '/',
|
||||
name: 'Home'|trans
|
||||
} %}
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'about',
|
||||
url: '/about',
|
||||
name: 'About'|trans
|
||||
} %}
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'today',
|
||||
url: '/today',
|
||||
name: "Today's Detections"|trans
|
||||
} %}
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'spectro',
|
||||
url: '/spectro',
|
||||
name: 'Live Spectrogram'|trans
|
||||
} %}
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'stats',
|
||||
url: '/stats',
|
||||
name: 'Statistics'|trans
|
||||
} %}
|
||||
<li class="dropdown">
|
||||
<a href="/records" class="dropdown-button">{{ "Recordings" | trans }}</a>
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'records',
|
||||
url: '/records',
|
||||
name: 'Recordings'|trans
|
||||
} %}
|
||||
<ul class="dropdown-content">
|
||||
<li>
|
||||
<a href="/records/bests">
|
||||
{{ "Best Recordings" | trans }}
|
||||
</a>
|
||||
</li>
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'bests',
|
||||
url: '/records/best',
|
||||
name: 'Best Recordings'|trans
|
||||
} %}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/charts">{{ "Daily Charts" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/logs">{{ "View Logs" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/services/status">{{ "Status" | trans }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/tools">
|
||||
{{ "Tools" | trans }}
|
||||
</a>
|
||||
</li>
|
||||
{% include 'utils/nav-item.html.twig' with {
|
||||
route: 'bests',
|
||||
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>
|
||||
{% include "title.html.twig" %}
|
||||
</nav>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</li>
|
||||
<li class="last-recorded-species">
|
||||
{{ "Last detected species" | trans }}:
|
||||
{% if stats["last-recorded-species"] is defined %}
|
||||
{% if stats["last-detected-species"] is defined %}
|
||||
<span class="scientific-name">
|
||||
{{ stats["last-detected-species"]["scientific_name"] }}
|
||||
</span>
|
||||
|
||||
6
www/templates/utils/nav-item.html.twig
Normal file
6
www/templates/utils/nav-item.html.twig
Normal file
@ -0,0 +1,6 @@
|
||||
<li>
|
||||
<a class="{{ app.request.get('_route') matches '{' ~ route ~ '_*}' ? 'active' }}"
|
||||
href="{{ url }}">
|
||||
{{ name }}
|
||||
</a>
|
||||
</li>
|
||||
Loading…
Reference in New Issue
Block a user