Fix messy nav and main

www/assets/app.js

@@ -13,3 +13,8 @@ import './styles/menu.css';
 import './bootstrap';
 
 import './utils/spectro';
+import './utils/date';
+
+document.getElementsByClassName('prevent').map(
+    (e) => e.addEventListener('click', (e) => e.preventDefault())
+);

www/assets/styles/app.css

@@ -1,3 +1,7 @@
+:root {
+    --bg: lightgray;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -20,7 +24,7 @@
     display: grid;
 }
 
-.grid > * {
+.grid>* {
     padding-left: 0.1em;
 }
 
@@ -34,11 +38,93 @@
     z-index: 1;
 }
 
+.button, input {
+    background-color: #f1f1f1;
+    color: black;
+    border-radius: 5px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em;
+    cursor: pointer;
+    appearance: none;
+    background-color: #FAFBFC;
+    border: 1px solid rgba(27, 31, 35, 0.15);
+    border-radius: 6px;
+    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+    color: #24292E;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    line-height: 20px;
+    list-style: none;
+    padding: 6px 16px;
+    position: relative;
+    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    white-space: nowrap;
+    word-wrap: break-word;
+}
+
+.button:hover, input:hover {
+    background-color: #F3F4F6;
+    text-decoration: none;
+    transition-duration: 0.1s;
+}
+
+.button:disabled {
+    background-color: #FAFBFC;
+    border-color: rgba(27, 31, 35, 0.15);
+    color: #959DA5;
+    cursor: default;
+}
+
+.button-main:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.button-main:hover {
+  background-color: #2c974b;
+  padding: 6px 16px;
+}
+
+.button-main:focus {
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
+.button-main:disabled {
+  background-color: #94d3a2;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, .8);
+  cursor: default;
+}
+
+.button-main:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
+
+.button-main:active {
+    background-color: #EDEFF2;
+    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
+    transition: none 0s;
+}
+
+.button:focus, input:focus {
+    outline: 1px transparent;
+    border: solid blue 1px;
+}
+
 body {
-    background-color: lightgray;
+    background-color: var(--bg);
     margin: 0;
     padding: 0;
-    z-index: -10;
 }
 
 header {
@@ -58,6 +144,8 @@ header img.logo {
 main {
     min-height: 100vh;
     padding: 5em;
+    z-index: 0;
+    position: relative;
 }
 
 footer {
@@ -144,12 +232,6 @@ canvas {
     background-color: #900;
 }
 
-@media screen and (max-width: 700px) {
-    main {
-        padding: 1em;
-    }
-}
-
 .overlay {
     z-index: 10;
     opacity: 100%;
@@ -165,3 +247,10 @@ canvas {
     overflow-y: scroll;
     height: 100%;
 }
+
+
+@media screen and (max-width: 700px) {
+    main {
+        padding: 1em;
+    }
+}

www/assets/styles/menu.css

@@ -1,89 +1,96 @@
 nav {
+    --nav-width: 20em;
+    --nav-bg: white;
+    --burger-size: 2em;
     position: fixed;
     top: 0;
     left: 0;
-    --nav-width: 20em;
+    width: 0;
     z-index: 10;
 }
 
-.toggler{
+.toggler {
-    z-index:2;
+    z-index: 21;
-    height: 50px;
+    height: var(--burger-size);
-    width: 50px;
+    width: var(--burger-size);
-    position: absolute;
+    align-items: center;
+    justify-content: center;
+    padding: 0.6rem;
+    position: fixed;
     cursor: pointer;
     opacity: 0;
 }
 
-.hamburger{
+.hamburger {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
-    height: 40px;
+    height: var(--burger-size);
-    width: 40px;
+    width: var(--burger-size);
     padding: 0.6rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 20;
+    opacity: 1;
 }
 
-.hamburger > div{
+.hamburger>div {
     position: relative;
     top: 0;
     left: 0;
     background: black;
     height: 2px;
     width: 75%;
-    transition: all  0.4s ease;
+    transition: all 0.4s ease;
     color: #000;
 
 }
 
-.hamburger > div::before,
+.hamburger>div::before,
-.hamburger > div::after{
+.hamburger>div::after {
     content: '';
     position: absolute;
     top: -7px;
     background: black;
     width: 100%;
     height: 2px;
-    transition: all  0.4s ease;
+    transition: all 0.4s ease;
 }
 
-.hamburger > div::after{
+.hamburger>div::after {
     top: 7px;
 }
 
-.toggler:checked + .hamburger > div{
+.toggler:checked+.hamburger>div {
-    background: rgba(0,0,0,0);
+    background: rgba(0, 0, 0, 0);
 }
 
-.toggler:checked + .hamburger > div::before{
+.toggler:checked+.hamburger>div::before {
     top: 0;
     transform: rotate(45deg);
     background: black;
 }
 
-.toggler:checked + .hamburger > div::after{
+.toggler:checked+.hamburger>div::after {
     top: 0;
     transform: rotate(135deg);
     background: black;
 }
 
-.menu{
+.menu {
     height: 100vh;
     width: 0;
     visibility: hidden;
 }
 
-.toggler:checked ~ .menu{
+.toggler:checked~.menu {
     width: fit-content;
     height: fit-content;
-    background-color: rgba(255, 255, 255, 1)!important;
+    background-color: rgba(255, 255, 255, 1) !important;
 }
 
-.menu > ul{
+.menu>ul {
     display: flex;
     flex-direction: column;
     position: fixed;
@@ -91,33 +98,39 @@ nav {
     height: 100vmax;
     padding-left: 1em;
     padding-right: 1em;
-    margin-top: 2em;
+    margin-top: var(--burger-size);
     visibility: hidden;
     background-color: white;
-    z-index: 1;
+    z-index: 10;
 }
 
-.menu > ul > li{
+.menu>ul>li {
     list-style: none;
     padding: 0.5rem;
 }
 
-.menu > ul > li > a{
+.menu>ul>li>a {
     color: black;
     text-decoration: none;
     font-size: 2rem;
 }
 
-.toggler:checked ~ .fill  {
+.toggler~.fill {
+    display: none;
+}
+
+.toggler:checked~.fill {
     background: white;
     position: absolute;
     top: 0;
     left: 0;
     height: 100vh;
     width: var(--nav-width);
+    display: block;
+    z-index: 10;
 }
 
-.toggler:checked ~ .menu > ul{
+.toggler:checked~.menu>ul {
     width: 20em;
     transition: fit-content .5s ease;
     opacity: 1;
@@ -125,6 +138,13 @@ nav {
     visibility: visible;
 }
 
-.toggler:checked ~ .menu > ul > li > a:hover{
+.toggler:checked~.menu>ul>li>a:hover {
     color: orange;
 }
+
+
+@media screen and (max-width: 700px) {
+    nav {
+        --burger-size: 4em;
+    }
+}

www/assets/utils/date.js

@@ -0,0 +1,27 @@
+
+let date_input = document.querySelector("input[type='date']");
+let next_date_button = document.getElementsByClassName("next-date-button")[0];
+let previous_date_button = document.getElementsByClassName("previous-date-button")[0];
+
+function next_date() {
+    let date = new Date(date_input.value);
+    date.setDate(date.getDate() + 1);
+    date_input.value = date.toISOString().split('T')[0];
+    update_date_link();
+}
+
+function previous_date() {
+    let date = new Date(date_input.value);
+    date.setDate(date.getDate() - 1);
+    date_input.value = date.toISOString().split('T')[0];
+    update_date_link();
+}
+
+function update_date_link() {
+    let date = new Date(date_input.value);
+    let date_link = document.querySelector(".date-selector a");
+    date_link.href = `/today/${date.toISOString().split('T')[0]}/species`;
+}
+
+next_date_button.addEventListener("click", next_date);
+previous_date_button.addEventListener("click", previous_date);

www/assets/utils/spectro.js

@@ -6,13 +6,17 @@
 // UPDATE: there is a problem in chrome with starting audio context
 //  before a user gesture. This fixes it.
 var started = false;
-var spectro_button = document.getElementById('spectro-button');
+try {
-spectro_button.addEventListener('click', () => {
+  var spectro_button = document.getElementById('spectro-button');
-  if (started) return;
+  spectro_button.addEventListener('click', () => {
-  started = true;
+    if (started) return;
-  console.log("starting spectro");
+    started = true;
-  initialize();
+    console.log("starting spectro");
-})
+    initialize();
+  })  
+} catch {
+  console.log("spectro not found");
+}
 
 function initialize() {
   const CVS = document.getElementById('spectro-canvas');

www/templates/today/calendar.html.twig

@@ -0,0 +1,7 @@
+<div class="date-selector container row">
+	<label for="date ">{{ "Date" | trans }}</label>
+	<button class="previous-date-button button">&lt;</button>
+	<input type="date" id="date" name="date" value="{{ date ? date : "now" | date("Y-m-d") }}" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="{{ "Enter a date in this format YYYY-MM-DD" | trans }}"/>
+	<button class="next-date-button button prevent">&gt;</button>
+	<a href="/today/{{ date ? date : " now" | date(" y-m-d") }}/species" class="button main">{{ "Go" | trans }}</a>
+</div>

www/templates/today/index.html.twig

@@ -10,6 +10,7 @@
 			{{ date | format_datetime("full", "none") }}
 		{% endif %}
 	</h2>
+	{% include "today/calendar.html.twig" %}
 	{# Display a list of records if any, else, print message #}
 	{% if results is defined and results | length > 0 %}
 		<ul>