cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: enhance modal for esc to close if js is enabled

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-04 16:04:18 -07:00
parent b7e2eef988
commit d11d7bed15
No known key found for this signature in database
5 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.3.6", "version": "21.3.7",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.3.6", "version": "21.3.7",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.3.6", "version": "21.3.7",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"scripts": { "scripts": {

8
src/assets/scripts/modal.js Normal file
View file

@ -0,0 +1,8 @@
window.addEventListener('load', () => {
const modalInputs = document.querySelectorAll('.modal-input')
document.addEventListener('keydown', e => {
if (e.key === 'Escape') modalInputs.forEach(modalInput => {
if (modalInput.checked) modalInput.checked = false
})
})
})

26
src/assets/styles/components/modal.css
View file

@ -25,7 +25,7 @@
&:focus svg, &:focus svg,
&:focus-within svg { &:focus-within svg {
outline: var(--outline) outline: var(--outline);
} }
& svg { & svg {
@ -34,7 +34,7 @@
transition: transform var(--transition-duration-default) var(--transition-ease-in-out); transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:focus { &:focus {
outline: var(--outline) outline: var(--outline);
} }
&:hover, &:hover,
@ -46,6 +46,15 @@
} }
} }
} }
@media screen and (min-width: 768px) {
.modal-body {
max-height: 75%;
max-width: 75%;
inset: 12.5%;
border: 1px solid var(--gray-light);
}
}
} }
.modal-input { .modal-input {
@ -67,7 +76,7 @@
&:focus svg, &:focus svg,
&:focus-within svg { &:focus-within svg {
outline: var(--outline) outline: var(--outline);
} }
& svg { & svg {
@ -77,7 +86,7 @@
transition: transform var(--transition-duration-default) var(--transition-ease-in-out); transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:focus { &:focus {
outline: var(--outline) outline: var(--outline);
} }
&:hover, &:hover,
@ -87,13 +96,4 @@
transform: rotate(8deg); transform: rotate(8deg);
} }
} }
}
@media screen and (min-width: 768px) {
.modal-wrapper .modal-body {
max-height: 75%;
max-width: 75%;
inset: 12.5%;
border: 1px solid var(--gray-light);
}
} }

4
src/includes/partials/blocks/modal.liquid
View file

@ -1,3 +1,7 @@
{% capture js %}
{% render "../../../assets/scripts/modal.js" %}
{% endcapture %}
<script>{{ js }}</script>
{%- capture labelContent -%} {%- capture labelContent -%}
{% if icon %} {% if icon %}
{% tablericon icon label %} {% tablericon icon label %}