Fix messy nav and main
This commit is contained in:
parent
acc51fdfc4
commit
c0728d2969
@ -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())
|
||||
);
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
27
www/assets/utils/date.js
Normal file
27
www/assets/utils/date.js
Normal file
@ -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);
|
||||
@ -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');
|
||||
|
||||
7
www/templates/today/calendar.html.twig
Normal file
7
www/templates/today/calendar.html.twig
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="date-selector container row">
|
||||
<label for="date ">{{ "Date" | trans }}</label>
|
||||
<button class="previous-date-button button"><</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">></button>
|
||||
<a href="/today/{{ date ? date : " now" | date(" y-m-d") }}/species" class="button main">{{ "Go" | trans }}</a>
|
||||
</div>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user