diff --git a/www/assets/app.js b/www/assets/app.js
index 7ccbda1..ef1cc96 100644
--- a/www/assets/app.js
+++ b/www/assets/app.js
@@ -12,4 +12,9 @@ import './styles/menu.css';
// start the Stimulus application
import './bootstrap';
-import './utils/spectro';
\ No newline at end of file
+import './utils/spectro';
+import './utils/date';
+
+document.getElementsByClassName('prevent').map(
+ (e) => e.addEventListener('click', (e) => e.preventDefault())
+);
\ No newline at end of file
diff --git a/www/assets/styles/app.css b/www/assets/styles/app.css
index 1b3de9a..332d54b 100644
--- a/www/assets/styles/app.css
+++ b/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 {
@@ -117,7 +205,7 @@ canvas {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-
+
gap: 0.1em;
}
@@ -144,12 +232,6 @@ canvas {
background-color: #900;
}
-@media screen and (max-width: 700px) {
- main {
- padding: 1em;
- }
-}
-
.overlay {
z-index: 10;
opacity: 100%;
@@ -164,4 +246,11 @@ canvas {
padding: 1em;
overflow-y: scroll;
height: 100%;
-}
\ No newline at end of file
+}
+
+
+@media screen and (max-width: 700px) {
+ main {
+ padding: 1em;
+ }
+}
diff --git a/www/assets/styles/menu.css b/www/assets/styles/menu.css
index 896882f..d934207 100644
--- a/www/assets/styles/menu.css
+++ b/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{
- z-index:2;
- height: 50px;
- width: 50px;
- position: absolute;
+.toggler {
+ z-index: 21;
+ height: var(--burger-size);
+ width: var(--burger-size);
+ align-items: center;
+ justify-content: center;
+ padding: 0.6rem;
+ position: fixed;
cursor: pointer;
opacity: 0;
}
-.hamburger{
- position: absolute;
+.hamburger {
+ position: fixed;
top: 0;
left: 0;
- height: 40px;
- width: 40px;
- padding: 0.6rem;
+ height: var(--burger-size);
+ 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::after{
+.hamburger>div::before,
+.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{
- background: rgba(0,0,0,0);
+.toggler:checked+.hamburger>div {
+ 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;
+ }
}
\ No newline at end of file
diff --git a/www/assets/utils/date.js b/www/assets/utils/date.js
new file mode 100644
index 0000000..bbef40f
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/www/assets/utils/spectro.js b/www/assets/utils/spectro.js
index b7f56f4..9f19f6e 100644
--- a/www/assets/utils/spectro.js
+++ b/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');
-spectro_button.addEventListener('click', () => {
- if (started) return;
- started = true;
- console.log("starting spectro");
- initialize();
-})
+try {
+ var spectro_button = document.getElementById('spectro-button');
+ spectro_button.addEventListener('click', () => {
+ if (started) return;
+ started = true;
+ console.log("starting spectro");
+ initialize();
+ })
+} catch {
+ console.log("spectro not found");
+}
function initialize() {
const CVS = document.getElementById('spectro-canvas');
diff --git a/www/templates/today/calendar.html.twig b/www/templates/today/calendar.html.twig
new file mode 100644
index 0000000..4f6a831
--- /dev/null
+++ b/www/templates/today/calendar.html.twig
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/www/templates/today/index.html.twig b/www/templates/today/index.html.twig
index 7da98f6..8475a43 100644
--- a/www/templates/today/index.html.twig
+++ b/www/templates/today/index.html.twig
@@ -10,6 +10,7 @@
{{ date | format_datetime("full", "none") }}
{% endif %}
+ {% include "today/calendar.html.twig" %}
{# Display a list of records if any, else, print message #}
{% if results is defined and results | length > 0 %}