From c0728d2969a8d186ae5c713b2a1fbb7c2c83a8e3 Mon Sep 17 00:00:00 2001 From: Samuel ORTION Date: Tue, 16 Aug 2022 07:05:49 +0200 Subject: [PATCH] Fix messy nav and main --- www/assets/app.js | 7 +- www/assets/styles/app.css | 111 ++++++++++++++++++++++--- www/assets/styles/menu.css | 86 +++++++++++-------- www/assets/utils/date.js | 27 ++++++ www/assets/utils/spectro.js | 18 ++-- www/templates/today/calendar.html.twig | 7 ++ www/templates/today/index.html.twig | 1 + 7 files changed, 205 insertions(+), 52 deletions(-) create mode 100644 www/assets/utils/date.js create mode 100644 www/templates/today/calendar.html.twig 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 @@ +
+ + + + + {{ "Go" | trans }} +
\ 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 %}