544fa8d33e
* Use grid instead of flex * Use child margin instead of flex gap * use .grid instead of .flex.flex-column * Missed one conditional flex gap * gap-2 safely deleted since there’s only one element * Add class for crayons-btn-actions This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers * Use crayons-btn-actions * Adjust styling to use negative margins * apply crayons-btn-actions * use margin-right instead of gap * use .grid instead of .flex.flex-column * use margin instead of gap for indicators/tooltips in headings * remove unused class for clarity * use flex and add margin to small element * remove gap from flex container and add margin to figure * crayons-article__main has neither flex nor grid thus gap has no effect * fix typo * use actual grid columns * use gap instead of flex-column * Apply crayons-btn-actions * Fix modal window display * Safari bein a real pain here Apparently Safari uses a different model to calculate height than other browsers. who knew.
61 lines
2.5 KiB
JavaScript
61 lines
2.5 KiB
JavaScript
/**
|
|
* A function to generate the HTML for a Crayons modal within the /admin/ space.
|
|
*
|
|
* @function adminModal
|
|
* @param {Object} modalProps Properties of the Modal
|
|
* @param {string} modalProps.title The title of the modal.
|
|
* @param {string} modalProps.body The modal's content. May use HTML tags for styling.
|
|
* @param {string} modalProps.leftBtnText The text for the modal's left button.
|
|
* @param {string} modalProps.leftBtnAction The function that fires when left button is clicked.
|
|
* @param {string} modalProps.rightBtnText The text for the modal's right button.
|
|
* @param {string} modalProps.rightBtnAction The function that fires when right button is clicked.
|
|
* @param {string} modalProps.leftBtnClasses Classes applied to left button.
|
|
* @param {string} modalProps.rightBtnClasses Classes applied to right button.
|
|
* @param {string} modalProps.leftCustomDataAttr A custom data attribute for the left button.
|
|
* @param {string} modalProps.rightCustomDataAttr A custom data attribute for the right button.
|
|
*/
|
|
export const adminModal = function ({
|
|
title,
|
|
body,
|
|
leftBtnText,
|
|
leftBtnAction,
|
|
rightBtnText,
|
|
rightBtnAction,
|
|
leftBtnClasses,
|
|
rightBtnClasses,
|
|
leftCustomDataAttr = null,
|
|
rightCustomDataAttr = null,
|
|
}) {
|
|
return `
|
|
<div class="crayons-modal crayons-modal--s">
|
|
<div class="crayons-modal__box">
|
|
<header class="crayons-modal__box__header">
|
|
<p class="fw-bold fs-l">${title}</p>
|
|
<button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost" data-action="click->config#closeAdminModal">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
<div class="crayons-modal__box__body grid gap-4">
|
|
${body}
|
|
<div class="crayons-btn-actions">
|
|
<button
|
|
class="crayons-btn ${leftBtnClasses}"
|
|
data-action="click->config#${leftBtnAction}"
|
|
${leftCustomDataAttr}>
|
|
${leftBtnText}
|
|
</button>
|
|
<button
|
|
class="crayons-btn ${rightBtnClasses}"
|
|
data-action="click->config#${rightBtnAction}"
|
|
${rightCustomDataAttr}>
|
|
${rightBtnText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="crayons-modal__overlay"></div>
|
|
</div>
|
|
`;
|
|
};
|