diff --git a/assets/css/frontend/comments.css b/assets/css/frontend/comments.css index 72806fc6..37527bc7 100644 --- a/assets/css/frontend/comments.css +++ b/assets/css/frontend/comments.css @@ -87,7 +87,7 @@ .comment-form__inner { display: flex; - gap: 12px; + gap: 10px; align-items: flex-start; } @@ -169,11 +169,74 @@ align-items: center; gap: 8px; margin-left: auto; + flex-wrap: wrap; + justify-content: flex-end; +} + +.comment-form__guest { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 6px; +} + +.comment-form__guest-toggle { + background: none; + border: 0; + padding: 0; + cursor: pointer; + color: var(--muted-color, #8b9198); + white-space: nowrap; +} + +.comment-form__guest-toggle:hover, +.comment-form__guest-toggle[aria-expanded="true"] { + color: var(--focus-color, #f04494); +} + +.comment-form__guest-fields { + display: flex; + gap: 6px; + align-items: center; + max-height: 0; + overflow: hidden; + opacity: 0; + transition: max-height 0.2s ease, opacity 0.15s ease; +} + +.comment-form__guest-fields.is-open, +.comment-form__guest-fields:not([hidden]) { + max-height: 48px; + opacity: 1; } .comment-form__guest-field { - width: 120px; - height: 32px; + width: 110px; + height: 30px; + font-size: 12px; + padding: 0 8px; +} + +.comt-box .comt-textarea, +.comt-box #comment { + min-height: 72px; + padding: 10px 12px; + border-radius: 8px; + font-size: 13px; + line-height: 1.5; + margin-bottom: 6px; +} + +.comt-ctrl { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.comment-form__submit { + height: 30px; + padding: 0 12px; font-size: 13px; } diff --git a/assets/js/core/comments.js b/assets/js/core/comments.js index 940150d3..79987458 100644 --- a/assets/js/core/comments.js +++ b/assets/js/core/comments.js @@ -675,6 +675,41 @@ }); } - window.AksrtFrontend.register("aksrt-comment-system", function () { initCommentSystem(); }); + + function initGuestFields() { + var root = document.getElementById("comments") || document; + root.querySelectorAll("[data-aksrt-guest-toggle]").forEach(function (btn) { + if (btn.dataset.aksrtGuestBound === "1") return; + btn.dataset.aksrtGuestBound = "1"; + var wrap = btn.closest(".comment-form__guest"); + var fields = wrap ? wrap.querySelector("[data-aksrt-guest-fields]") : null; + if (!fields) return; + btn.addEventListener("click", function (e) { + e.preventDefault(); + var open = btn.getAttribute("aria-expanded") === "true"; + btn.setAttribute("aria-expanded", open ? "false" : "true"); + if (open) { + fields.setAttribute("hidden", ""); + fields.classList.remove("is-open"); + } else { + fields.removeAttribute("hidden"); + fields.classList.add("is-open"); + var first = fields.querySelector("input"); + if (first) first.focus(); + } + }); + // Auto-open if browser restored values or validation fails later. + var form = btn.closest("form"); + if (form) { + form.addEventListener("invalid", function () { + fields.removeAttribute("hidden"); + fields.classList.add("is-open"); + btn.setAttribute("aria-expanded", "true"); + }, true); + } + }); + } + + window.AksrtFrontend.register("aksrt-comment-system", function () { initCommentSystem(); initGuestFields(); }); window.AksrtFrontend.register("aksrt-comment-order", function (root) { initCommentOrder(root); }); })(); diff --git a/inc/helpers/aksrt-comments.php b/inc/helpers/aksrt-comments.php index cb94a64c..2b176ed3 100644 --- a/inc/helpers/aksrt-comments.php +++ b/inc/helpers/aksrt-comments.php @@ -463,7 +463,7 @@ if (!function_exists('aksrt_comments_render_form')) : - +
- - +
+ + +

-

+