From 3d866262ca50a50a4d8e525055cb7e330370ffac Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 15 Apr 2025 08:48:36 -0700 Subject: [PATCH] chore(dialogs): remove excessive duplicate markup for fallback modal hack --- package-lock.json | 4 +-- package.json | 2 +- src/assets/scripts/index.js | 10 +++--- src/assets/styles/base/vars.css | 4 +-- src/assets/styles/components/buttons.css | 2 +- .../components/{modal.css => dialog.css} | 36 +++---------------- src/assets/styles/index.css | 2 +- src/includes/blocks/dialog.liquid | 17 +++++++++ src/includes/blocks/modal.liquid | 29 --------------- src/includes/home/recent-activity.liquid | 18 +++++----- src/pages/dynamic/artist.php.liquid | 22 +++--------- src/pages/media/music/concerts.html | 18 +++++----- 12 files changed, 58 insertions(+), 106 deletions(-) rename src/assets/styles/components/{modal.css => dialog.css} (80%) create mode 100644 src/includes/blocks/dialog.liquid delete mode 100644 src/includes/blocks/modal.liquid diff --git a/package-lock.json b/package-lock.json index a37c29d..3366c47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "1.7.10", + "version": "1.8.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "1.7.10", + "version": "1.8.0", "license": "MIT", "dependencies": { "html-minifier-terser": "7.2.0", diff --git a/package.json b/package.json index bf5a7aa..8002e2a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "1.7.10", + "version": "1.8.0", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "engines": { diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index 71b0ec8..a515fd9 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -1,14 +1,14 @@ window.addEventListener("load", () => { // dialog controls (() => { - if (document.querySelectorAll(".modal-open").length) { - document.querySelectorAll(".modal-open").forEach((button) => { - const modalId = button.getAttribute("data-modal-trigger"); - const dialog = document.getElementById(`dialog-${modalId}`); + if (document.querySelectorAll(".dialog-open").length) { + document.querySelectorAll(".dialog-open").forEach((button) => { + const dialogId = button.getAttribute("data-dialog-trigger"); + const dialog = document.getElementById(`dialog-${dialogId}`); if (!dialog) return; - const closeButton = dialog.querySelector(".modal-close"); + const closeButton = dialog.querySelector(".dialog-close"); button.addEventListener("click", () => { dialog.showModal(); diff --git a/src/assets/styles/base/vars.css b/src/assets/styles/base/vars.css index 70ec980..ae89673 100644 --- a/src/assets/styles/base/vars.css +++ b/src/assets/styles/base/vars.css @@ -178,8 +178,8 @@ /* shadows */ --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color); - /* modals */ - --modal-overlay-background: light-dark(#ffffffbf, #000000bf); + /* dialogs */ + --dialog-overlay-background: light-dark(#ffffffbf, #000000bf); /* input accent color */ accent-color: var(--accent-color); diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index a2d8666..2b018ae 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -1,6 +1,6 @@ @import url("./text-toggle.css"); -button:not([data-modal-button]), +button:not([data-dialog-button]), .button { appearance: none; border: 2px solid var(--section-color, var(--accent-color)); diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/dialog.css similarity index 80% rename from src/assets/styles/components/modal.css rename to src/assets/styles/components/dialog.css index 82a87c7..8554801 100644 --- a/src/assets/styles/components/modal.css +++ b/src/assets/styles/components/dialog.css @@ -8,38 +8,13 @@ to { opacity: 0; transform: scale(0.95); } } -.modal-wrapper { - background: var(--modal-overlay-background); - z-index: 5; -} - -.modal-wrapper, -.modal-body { - inset: 0; - position: fixed; -} - -.modal-wrapper, -.modal-body, dialog { width: var(--sizing-full); height: var(--sizing-full); } -.modal-input { - display: none; - - &:checked ~ .modal-wrapper { - display: block; - } - - &:not(:checked) ~ .modal-wrapper { - display: none; - } -} - -.modal-open, -.modal-close { +.dialog-open, +.dialog-close { display: inline-flex; vertical-align: middle; color: var(--section-color, var(--accent-color)); @@ -61,8 +36,7 @@ dialog { } } -dialog, -.modal-body { +dialog { background: var(--background-color); padding: var(--spacing-lg) var(--spacing-base); overflow-y: auto; @@ -96,7 +70,7 @@ dialog, border: var(--border-gray); } - .modal-close { + .dialog-close { position: sticky; z-index: 6; top: 0; @@ -111,5 +85,5 @@ dialog { } dialog::backdrop { - background: var(--modal-overlay-background); + background: var(--dialog-overlay-background); } diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index cbf8125..e3fa039 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -30,7 +30,7 @@ @import url("./components/header.css") layer(components); @import url("./components/media-grid.css") layer(components); @import url("./components/nav.css") layer(components); -@import url("./components/modal.css") layer(components); +@import url("./components/dialog.css") layer(components); @import url("./components/music-chart.css") layer(components); @import url("./components/paginator.css") layer(components); @import url("./components/progress-bar.css") layer(components); diff --git a/src/includes/blocks/dialog.liquid b/src/includes/blocks/dialog.liquid new file mode 100644 index 0000000..55320ed --- /dev/null +++ b/src/includes/blocks/dialog.liquid @@ -0,0 +1,17 @@ +{%- capture labelContent -%} + {%- if icon -%} + {% tablericon icon %} + {%- elsif label -%} + {{ label }} + {%- endif -%} +{%- endcapture -%} +{% assign dialogId = id | default:"dialog-controls" %} + + + + {{ content }} + diff --git a/src/includes/blocks/modal.liquid b/src/includes/blocks/modal.liquid deleted file mode 100644 index 7544720..0000000 --- a/src/includes/blocks/modal.liquid +++ /dev/null @@ -1,29 +0,0 @@ -{%- capture labelContent -%} - {%- if icon -%} - {% tablericon icon %} - {%- elsif label -%} - {{ label }} - {%- endif -%} -{%- endcapture -%} -{% assign modalId = id | default:"modal-controls" %} - - - - - {{ content }} - diff --git a/src/includes/home/recent-activity.liquid b/src/includes/home/recent-activity.liquid index a37c6e3..2e31743 100644 --- a/src/includes/home/recent-activity.liquid +++ b/src/includes/home/recent-activity.liquid @@ -13,14 +13,16 @@ {{ item.content_date | date:"%B %e, %Y" }} • {{ item.label }} - {%- if item.notes -%} - {% assign notes = item.notes | prepend: "### Notes\n" | markdown %} - • {% render "blocks/modal.liquid", - label:"Notes", - content:notes, - id:item.content_date - %} - {%- endif -%} + + {%- if item.notes -%} + {% assign notes = item.notes | prepend: "### Notes\n" | markdown %} + • {% render "blocks/dialog.liquid", + label:"Notes", + content:notes, + id:item.content_date + %} + {%- endif -%} +

{%- if item.type == "concerts" -%} diff --git a/src/pages/dynamic/artist.php.liquid b/src/pages/dynamic/artist.php.liquid index 2b86511..6175679 100644 --- a/src/pages/dynamic/artist.php.liquid +++ b/src/pages/dynamic/artist.php.liquid @@ -81,7 +81,7 @@ schema: artist $venue = htmlspecialchars($concert["venue_name_short"]); } } - $modalId = "modal-" . htmlspecialchars($concert["id"]); + $dialogId = "dialog-" . htmlspecialchars($concert["id"]); ?>
  • On @@ -90,25 +90,11 @@ schema: artist - - - - diff --git a/src/pages/media/music/concerts.html b/src/pages/media/music/concerts.html index 2db851a..43cc03e 100644 --- a/src/pages/media/music/concerts.html +++ b/src/pages/media/music/concerts.html @@ -32,14 +32,16 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
  • {{ artistName }} on {{ concert.date | date: "%B %e, %Y" }} {% if venue %} at {{ venue }}{% endif %} - {%- if concert.notes -%} - {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %} - {% render "blocks/modal.liquid", - icon:"info-circle", - content:notes, - id:concert.id - %} - {%- endif -%} + + {%- if concert.notes -%} + {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %} + {% render "blocks/dialog.liquid", + icon:"info-circle", + content:notes, + id:concert.id + %} + {%- endif -%} +
    • {%- endfor -%}