chore(dialogs): remove excessive duplicate markup for fallback modal hack
This commit is contained in:
parent
33c00fa74b
commit
3d866262ca
12 changed files with 58 additions and 106 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
17
src/includes/blocks/dialog.liquid
Normal file
17
src/includes/blocks/dialog.liquid
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{%- capture labelContent -%}
|
||||
{%- if icon -%}
|
||||
{% tablericon icon %}
|
||||
{%- elsif label -%}
|
||||
{{ label }}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
{% assign dialogId = id | default:"dialog-controls" %}
|
||||
<button class="dialog-open client-side" data-dialog-trigger="{{ dialogId }}" data-dialog-button>
|
||||
{{ labelContent }}
|
||||
</button>
|
||||
<dialog id="dialog-{{ dialogId }}" class="client-side">
|
||||
<button class="dialog-close" data-dialog-button>
|
||||
{% tablericon "circle-x" %}
|
||||
</button>
|
||||
{{ content }}
|
||||
</dialog>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{%- capture labelContent -%}
|
||||
{%- if icon -%}
|
||||
{% tablericon icon %}
|
||||
{%- elsif label -%}
|
||||
{{ label }}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
{% assign modalId = id | default:"modal-controls" %}
|
||||
<noscript>
|
||||
<input class="modal-input" id="{{ modalId }}" type="checkbox" tabindex="0" />
|
||||
<label class="modal-open" for="{{ modalId }}">{{ labelContent }}</label>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-body">
|
||||
<label class="modal-close" for="{{ modalId }}">
|
||||
{% tablericon "circle-x" %}
|
||||
</label>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
<button class="modal-open client-side" data-modal-trigger="{{ modalId }}" data-modal-button>
|
||||
{{ labelContent }}
|
||||
</button>
|
||||
<dialog id="dialog-{{ modalId }}" class="client-side">
|
||||
<button class="modal-close" data-modal-button>
|
||||
{% tablericon "circle-x" %}
|
||||
</button>
|
||||
{{ content }}
|
||||
</dialog>
|
||||
|
|
@ -13,14 +13,16 @@
|
|||
{{ item.content_date | date:"%B %e, %Y" }}
|
||||
</time>
|
||||
• {{ 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 -%}
|
||||
<span class="client-side">
|
||||
{%- if item.notes -%}
|
||||
{% assign notes = item.notes | prepend: "### Notes\n" | markdown %}
|
||||
• {% render "blocks/dialog.liquid",
|
||||
label:"Notes",
|
||||
content:notes,
|
||||
id:item.content_date
|
||||
%}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</aside>
|
||||
<h3>
|
||||
{%- if item.type == "concerts" -%}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ schema: artist
|
|||
$venue = htmlspecialchars($concert["venue_name_short"]);
|
||||
}
|
||||
}
|
||||
$modalId = "modal-" . htmlspecialchars($concert["id"]);
|
||||
$dialogId = "dialog-" . htmlspecialchars($concert["id"]);
|
||||
?>
|
||||
<li class="concerts">
|
||||
On <mark><?php echo date("F j, Y", strtotime($concert["date"])); ?></mark>
|
||||
|
|
@ -90,25 +90,11 @@ schema: artist
|
|||
<?php endif; ?>
|
||||
<?php if (!empty($concert["notes"])): ?>
|
||||
<?php $notes = "### Notes\n" . htmlspecialchars($concert["notes"]); ?>
|
||||
<noscript>
|
||||
<input class="modal-input" id="<?php echo $modalId; ?>" type="checkbox" tabindex="0" />
|
||||
<label class="modal-open" for="<?php echo $modalId; ?>">
|
||||
{% tablericon "info-circle" %}
|
||||
</label>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-body">
|
||||
<label class="modal-close" for="<?php echo $modalId; ?>">
|
||||
{% tablericon "circle-x" %}
|
||||
</label>
|
||||
<?php echo parseMarkdown($notes); ?>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
<button class="modal-open client-side" data-modal-trigger="<?php echo $modalId; ?>" data-modal-button>
|
||||
<button class="dialog-open client-side" data-dialog-trigger="<?php echo $dialogId; ?>" data-dialog-button>
|
||||
{% tablericon "info-circle" %}
|
||||
</button>
|
||||
<dialog id="dialog-<?php echo $modalId; ?>" class="client-side">
|
||||
<button class="modal-close" data-modal-button>
|
||||
<dialog id="dialog-<?php echo $dialogId; ?>" class="client-side">
|
||||
<button class="dialog-close" data-dialog-button>
|
||||
{% tablericon "circle-x" %}
|
||||
</button>
|
||||
<?php echo parseMarkdown($notes); ?>
|
||||
|
|
|
|||
|
|
@ -32,14 +32,16 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
|
|||
<li>
|
||||
<strong>{{ artistName }}</strong> 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 -%}
|
||||
<span class="client-side" style="display:inline">
|
||||
{%- if concert.notes -%}
|
||||
{% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
|
||||
{% render "blocks/dialog.liquid",
|
||||
icon:"info-circle",
|
||||
content:notes,
|
||||
id:concert.id
|
||||
%}
|
||||
{%- endif -%}
|
||||
<span class="client-side">
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue