Skip to content

Feature/template filtering search in post form #1621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jul 30, 2025
Merged

Feature/template filtering search in post form #1621

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c649a64
fix- template filtering search in post form
arifulhoque7 Jul 7, 2025
0da7e33
Merge branch 'weDevsOfficial:develop' into feature/template_filtering…
arifulhoque7 Jul 8, 2025
eb4b03b
fix: minor changes
arifulhoque7 Jul 8, 2025
aa96798
fix: potential cause of fatal errors
arifulhoque7 Jul 8, 2025
57bb3a0
fix: category select issue and template drop shadow issues
arifulhoque7 Jul 9, 2025
fbc9df7
fix: some design consistency like previous form
arifulhoque7 Jul 9, 2025
2f5e644
fix: Pro_Prompt no found
arifulhoque7 Jul 11, 2025
41c89c9
fix: coderabbit inconsistency issue
arifulhoque7 Jul 11, 2025
63fd136
chore: Follwed DRY principle
arifulhoque7 Jul 14, 2025
8ffe86e
fix: code rabbit issues and other design related fix
arifulhoque7 Jul 14, 2025
3bf7bd2
fix: animation issues
arifulhoque7 Jul 14, 2025
ef85d93
fix: Fix syntax error in href attribute
arifulhoque7 Jul 14, 2025
692eadb
fix: pro prompt not found
arifulhoque7 Jul 14, 2025
cbc5582
fix: design suggestion change
arifulhoque7 Jul 15, 2025
b0a644d
Merge branch 'weDevsOfficial:develop' into feature/template_filtering…
arifulhoque7 Jul 15, 2025
6467969
chore: changelog added
arifulhoque7 Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1361,3 +1361,113 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
.wpuf-subscription-pack-settings .subscription-nav-content section .form-table td {
padding: 15px 0;
}


#wpwrap .wpuf-form-template-modal[role="dialog"] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
background-color: #f8fafc;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

/* Modal Show State */
&.wpuf-modal-show {
opacity: 1;
visibility: visible;
}

/* Modal Content Container Animation */
.wpuf-relative {
transform: scale(0.95);
transition: transform 0.3s ease-in-out;
}

&.wpuf-modal-show .wpuf-relative {
transform: scale(1);
}
}

/* Body Modal Open State */
body.wpuf-modal-open {
overflow: hidden;
}

/* Template Modal Components */
.wpuf-form-template-modal {
/* Custom aspect ratio for square cards */
.wpuf-aspect-square {
aspect-ratio: 1;
}

/* Tailwind gradient utility classes for template cards */
.wpuf-from-blue-500 {
--tw-gradient-from: #3b82f6;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.wpuf-to-purple-600 {
--tw-gradient-to: #9333ea;
}

.wpuf-bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Template Items Animation on Load */
.wpuf-template-item {
animation: wpuf-fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);

/* Staggered animation delays for template items */
&:nth-child(1) { animation-delay: 0.1s; }
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.3s; }
&:nth-child(4) { animation-delay: 0.4s; }
&:nth-child(5) { animation-delay: 0.5s; }
&:nth-child(6) { animation-delay: 0.6s; }
&:nth-child(7) { animation-delay: 0.7s; }
&:nth-child(8) { animation-delay: 0.8s; }
}

/* Close Button Animation - Better specificity */
.wpuf-close-btn {
transform: scale(1);
transition: transform 0.2s ease-in-out;

&:hover {
transform: scale(1.1);
}
}
}

/* Fade in up animation keyframes */
@keyframes wpuf-fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive improvements */
@media (max-width: 768px) {
#wpwrap .wpuf-form-template-modal[role="dialog"] .wpuf-relative {
padding: 1rem;
}

.wpuf-form-template-modal .wpuf-template-item {
width: calc(50% - 8px);
}
}

@media (max-width: 480px) {
.wpuf-form-template-modal .wpuf-template-item {
width: 100%;
}
}

98 changes: 98 additions & 0 deletions assets/css/admin/form-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1305,6 +1305,20 @@ html {
justify-self: end;
}

.wpuf-modal-open,
.wpuf-modal:target,
.wpuf-modal-toggle:checked + .wpuf-modal,
.wpuf-modal[open] {
pointer-events: auto;
visibility: visible;
opacity: 1;
}

:root:has(:is(.wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, .wpuf-modal[open])) {
overflow: hidden;
scrollbar-gutter: stable;
}
Comment on lines +1317 to +1320
Copy link

@coderabbitai coderabbitai bot Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

:has() is still an experimental selector – add a JS/utility‐class fallback

Relying solely on :root:has(.wpuf-modal-open …) will silently fail in Safari ≤15.6 and old Chromium/Firefox builds shipped with WordPress Core.
Recommend toggling a simple class (e.g. wpuf-modal-lock) on <html> via the same JS that opens the modal and targeting that instead; keep the :has() rule as progressive enhancement.

🤖 Prompt for AI Agents 
In assets/css/admin/form-builder.css around lines 1317 to 1320, the use of the
experimental :has() selector for modal state styling will fail in older browsers
like Safari ≤15.6 and legacy Chromium/Firefox. To fix this, add a JavaScript
utility that toggles a class such as wpuf-modal-lock on the <html> element when
the modal opens or closes, then update the CSS to target this class for the
overflow and scrollbar-gutter styles as a fallback, keeping the :has() rule as a
progressive enhancement.


.wpuf-radio {
flex-shrink: 0;
--chkbg: var(--bc);
Expand Down Expand Up @@ -1715,6 +1729,16 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-top: 0;
}

.wpuf-modal-open .wpuf-modal-box,
.wpuf-modal-toggle:checked + .wpuf-modal .wpuf-modal-box,
.wpuf-modal:target .wpuf-modal-box,
.wpuf-modal[open] .wpuf-modal-box {
--tw-translate-y: 0px;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes modal-pop {
0% {
opacity: 0;
Expand Down Expand Up @@ -2453,6 +2477,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
top: 0px;
}

.wpuf-top-1\/2 {
top: 50%;
}

.wpuf-top-1\/3 {
top: 33.333333%;
}
Expand Down Expand Up @@ -2563,11 +2591,21 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-right: 0.25rem;
}

.wpuf-mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}

.wpuf-mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.wpuf-mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}

.wpuf-mx-auto {
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -2669,6 +2707,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-bottom: 3rem;
}

.wpuf-mb-14 {
margin-bottom: 3.5rem;
}

.wpuf-mb-2 {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -2705,6 +2747,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-left: 0.25rem;
}

.wpuf-ml-10 {
margin-left: 2.5rem;
}

.wpuf-ml-2 {
margin-left: 0.5rem;
}
Expand Down Expand Up @@ -2865,6 +2911,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
display: none;
}

.wpuf-aspect-square {
aspect-ratio: 1 / 1;
}

.wpuf-size-4 {
width: 1rem;
height: 1rem;
Expand Down Expand Up @@ -3068,6 +3118,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
width: 2rem;
}

.wpuf-w-80 {
width: 20rem;
}

.wpuf-w-\[104\%\] {
width: 104%;
}
Expand Down Expand Up @@ -3183,6 +3237,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wpuf--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wpuf--translate-y-\[50\%\] {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
Expand Down Expand Up @@ -3309,6 +3368,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
justify-content: space-evenly;
}

.wpuf-gap-12 {
gap: 3rem;
}

.wpuf-gap-2 {
gap: 0.5rem;
}
Expand Down Expand Up @@ -3865,6 +3928,20 @@ input.wpuf-tab:checked + .wpuf-tab-content,
--tw-bg-opacity: 0.75;
}

.wpuf-bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.wpuf-from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.wpuf-to-purple-600 {
--tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.\!wpuf-stroke-primary {
stroke: #059669 !important;
}
Expand Down Expand Up @@ -3953,6 +4030,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
padding-bottom: 10px !important;
}

.\!wpuf-py-\[4px\] {
padding-top: 4px !important;
padding-bottom: 4px !important;
}

.wpuf-px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
Expand Down Expand Up @@ -5439,6 +5521,12 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
opacity: 1;
}

.hover\:wpuf-shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:wpuf-shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
Expand Down Expand Up @@ -5487,6 +5575,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
border-color: transparent !important;
}

.focus\:wpuf-border-primary:focus {
--tw-border-opacity: 1;
border-color: rgb(5 150 105 / var(--tw-border-opacity));
}

.focus\:wpuf-bg-amber-600:focus {
--tw-bg-opacity: 1;
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -5571,6 +5664,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-primary:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-primaryHover:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
Expand Down
2 changes: 1 addition & 1 deletion assets/css/admin/subscriptions.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/forms-list.min.css
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 19 additions & 18 deletions assets/js/forms-list.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/forms-list.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading