Skip to content

Commit 04bc682

Browse files
arifulhoque7arifulhoque7
authored
Feature/template filtering search in post form (#1621)
* fix- template filtering search in post form * fix: minor changes * fix: potential cause of fatal errors * fix: category select issue and template drop shadow issues * fix: some design consistency like previous form * fix: Pro_Prompt no found * fix: coderabbit inconsistency issue * chore: Follwed DRY principle * fix: code rabbit issues and other design related fix * fix: animation issues * fix: Fix syntax error in href attribute * fix: pro prompt not found * fix: design suggestion change * chore: changelog added
1 parent f31e8fe commit 04bc682

File tree

10 files changed

+776
-22
lines changed

10 files changed

+776
-22
lines changed

‎assets/css/admin.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1005,6 +1005,114 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
10051005
#wpfooter {
10061006
height: unset !important;
10071007
}
1008+
/* Modal Base Styles - High specificity to override admin styles */
1009+
#wpwrap .wpuf-form-template-modal[role="dialog"] {
1010+
position: fixed;
1011+
top: 0;
1012+
left: 0;
1013+
width: 100vw;
1014+
height: 100vh;
1015+
z-index: 999999;
1016+
background-color: #f8fafc;
1017+
opacity: 0;
1018+
visibility: hidden;
1019+
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
1020+
/* Modal Show State */
1021+
/* Modal Content Container Animation */
1022+
}
1023+
#wpwrap .wpuf-form-template-modal[role="dialog"].wpuf-modal-show {
1024+
opacity: 1;
1025+
visibility: visible;
1026+
}
1027+
#wpwrap .wpuf-form-template-modal[role="dialog"] .wpuf-relative {
1028+
transform: scale(0.95);
1029+
transition: transform 0.3s ease-in-out;
1030+
}
1031+
#wpwrap .wpuf-form-template-modal[role="dialog"].wpuf-modal-show .wpuf-relative {
1032+
transform: scale(1);
1033+
}
1034+
/* Body Modal Open State */
1035+
body.wpuf-modal-open {
1036+
overflow: hidden;
1037+
}
1038+
/* Template Modal Components */
1039+
.wpuf-form-template-modal {
1040+
/* Custom aspect ratio for square cards */
1041+
/* Tailwind gradient utility classes for template cards */
1042+
/* Template Items Animation on Load */
1043+
/* Close Button Animation - Better specificity */
1044+
}
1045+
.wpuf-form-template-modal .wpuf-aspect-square {
1046+
aspect-ratio: 1;
1047+
}
1048+
.wpuf-form-template-modal .wpuf-from-blue-500 {
1049+
--tw-gradient-from: #3b82f6;
1050+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
1051+
}
1052+
.wpuf-form-template-modal .wpuf-to-purple-600 {
1053+
--tw-gradient-to: #9333ea;
1054+
}
1055+
.wpuf-form-template-modal .wpuf-bg-gradient-to-br {
1056+
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
1057+
}
1058+
.wpuf-form-template-modal .wpuf-template-item {
1059+
animation: wpuf-fadeInUp 0.6s ease-out forwards;
1060+
opacity: 0;
1061+
transform: translateY(20px);
1062+
/* Staggered animation delays for template items */
1063+
}
1064+
.wpuf-form-template-modal .wpuf-template-item:nth-child(1) {
1065+
animation-delay: 0.1s;
1066+
}
1067+
.wpuf-form-template-modal .wpuf-template-item:nth-child(2) {
1068+
animation-delay: 0.2s;
1069+
}
1070+
.wpuf-form-template-modal .wpuf-template-item:nth-child(3) {
1071+
animation-delay: 0.3s;
1072+
}
1073+
.wpuf-form-template-modal .wpuf-template-item:nth-child(4) {
1074+
animation-delay: 0.4s;
1075+
}
1076+
.wpuf-form-template-modal .wpuf-template-item:nth-child(5) {
1077+
animation-delay: 0.5s;
1078+
}
1079+
.wpuf-form-template-modal .wpuf-template-item:nth-child(6) {
1080+
animation-delay: 0.6s;
1081+
}
1082+
.wpuf-form-template-modal .wpuf-template-item:nth-child(7) {
1083+
animation-delay: 0.7s;
1084+
}
1085+
.wpuf-form-template-modal .wpuf-template-item:nth-child(8) {
1086+
animation-delay: 0.8s;
1087+
}
1088+
.wpuf-form-template-modal .wpuf-close-btn {
1089+
transform: scale(1);
1090+
transition: transform 0.2s ease-in-out;
1091+
}
1092+
.wpuf-form-template-modal .wpuf-close-btn:hover {
1093+
transform: scale(1.1);
1094+
}
1095+
/* Fade in up animation keyframes */
1096+
@keyframes wpuf-fadeInUp {
1097+
to {
1098+
opacity: 1;
1099+
transform: translateY(0);
1100+
}
1101+
}
1102+
/* Responsive improvements */
1103+
@media (max-width: 768px) {
1104+
#wpwrap .wpuf-form-template-modal[role="dialog"] .wpuf-relative {
1105+
padding: 1rem;
1106+
}
1107+
.wpuf-form-template-modal .wpuf-template-item {
1108+
width: calc(42%);
1109+
}
1110+
}
1111+
@media (max-width: 480px) {
1112+
.wpuf-form-template-modal .wpuf-template-item {
1113+
width: 100%;
1114+
}
1115+
}
10081116
.wpuf-help-tabbed {
10091117
display: flex;
10101118
width: 100%;

‎assets/css/admin/form-builder.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1305,6 +1305,20 @@ html {
13051305
justify-self: end;
13061306
}
13071307

1308+
.wpuf-modal-open,
1309+
.wpuf-modal:target,
1310+
.wpuf-modal-toggle:checked + .wpuf-modal,
1311+
.wpuf-modal[open] {
1312+
pointer-events: auto;
1313+
visibility: visible;
1314+
opacity: 1;
1315+
}
1316+
1317+
:root:has(:is(.wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, .wpuf-modal[open])) {
1318+
overflow: hidden;
1319+
scrollbar-gutter: stable;
1320+
}
1321+
13081322
.wpuf-radio {
13091323
flex-shrink: 0;
13101324
--chkbg: var(--bc);
@@ -1715,6 +1729,16 @@ input.wpuf-tab:checked + .wpuf-tab-content,
17151729
margin-top: 0;
17161730
}
17171731

1732+
.wpuf-modal-open .wpuf-modal-box,
1733+
.wpuf-modal-toggle:checked + .wpuf-modal .wpuf-modal-box,
1734+
.wpuf-modal:target .wpuf-modal-box,
1735+
.wpuf-modal[open] .wpuf-modal-box {
1736+
--tw-translate-y: 0px;
1737+
--tw-scale-x: 1;
1738+
--tw-scale-y: 1;
1739+
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));
1740+
}
1741+
17181742
@keyframes modal-pop {
17191743
0% {
17201744
opacity: 0;
@@ -2453,6 +2477,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
24532477
top: 0px;
24542478
}
24552479

2480+
.wpuf-top-1\/2 {
2481+
top: 50%;
2482+
}
2483+
24562484
.wpuf-top-1\/3 {
24572485
top: 33.333333%;
24582486
}
@@ -2501,10 +2529,22 @@ input.wpuf-tab:checked + .wpuf-tab-content,
25012529
z-index: 50;
25022530
}
25032531

2532+
.wpuf-z-\[1000000\] {
2533+
z-index: 1000000;
2534+
}
2535+
25042536
.wpuf-z-\[1\] {
25052537
z-index: 1;
25062538
}
25072539

2540+
.wpuf-z-\[999998\] {
2541+
z-index: 999998;
2542+
}
2543+
2544+
.wpuf-z-\[999999\] {
2545+
z-index: 999999;
2546+
}
2547+
25082548
.wpuf-col-span-2 {
25092549
grid-column: span 2 / span 2;
25102550
}
@@ -2563,11 +2603,21 @@ input.wpuf-tab:checked + .wpuf-tab-content,
25632603
margin-right: 0.25rem;
25642604
}
25652605

2606+
.wpuf-mx-10 {
2607+
margin-left: 2.5rem;
2608+
margin-right: 2.5rem;
2609+
}
2610+
25662611
.wpuf-mx-2 {
25672612
margin-left: 0.5rem;
25682613
margin-right: 0.5rem;
25692614
}
25702615

2616+
.wpuf-mx-4 {
2617+
margin-left: 1rem;
2618+
margin-right: 1rem;
2619+
}
2620+
25712621
.wpuf-mx-auto {
25722622
margin-left: auto;
25732623
margin-right: auto;
@@ -2609,6 +2659,14 @@ input.wpuf-tab:checked + .wpuf-tab-content,
26092659
margin-left: 0px !important;
26102660
}
26112661

2662+
.\!wpuf-ml-6 {
2663+
margin-left: 1.5rem !important;
2664+
}
2665+
2666+
.\!wpuf-mr-10 {
2667+
margin-right: 2.5rem !important;
2668+
}
2669+
26122670
.\!wpuf-mr-2 {
26132671
margin-right: 0.5rem !important;
26142672
}
@@ -2669,6 +2727,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
26692727
margin-bottom: 3rem;
26702728
}
26712729

2730+
.wpuf-mb-14 {
2731+
margin-bottom: 3.5rem;
2732+
}
2733+
26722734
.wpuf-mb-2 {
26732735
margin-bottom: 0.5rem;
26742736
}
@@ -2705,6 +2767,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
27052767
margin-left: 0.25rem;
27062768
}
27072769

2770+
.wpuf-ml-10 {
2771+
margin-left: 2.5rem;
2772+
}
2773+
27082774
.wpuf-ml-2 {
27092775
margin-left: 0.5rem;
27102776
}
@@ -2865,6 +2931,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
28652931
display: none;
28662932
}
28672933

2934+
.wpuf-aspect-square {
2935+
aspect-ratio: 1 / 1;
2936+
}
2937+
28682938
.wpuf-size-4 {
28692939
width: 1rem;
28702940
height: 1rem;
@@ -3064,10 +3134,18 @@ input.wpuf-tab:checked + .wpuf-tab-content,
30643134
width: 1.5rem;
30653135
}
30663136

3137+
.wpuf-w-64 {
3138+
width: 16rem;
3139+
}
3140+
30673141
.wpuf-w-8 {
30683142
width: 2rem;
30693143
}
30703144

3145+
.wpuf-w-80 {
3146+
width: 20rem;
3147+
}
3148+
30713149
.wpuf-w-\[104\%\] {
30723150
width: 104%;
30733151
}
@@ -3118,6 +3196,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
31183196
max-width: 100% !important;
31193197
}
31203198

3199+
.wpuf-max-w-\[1400px\] {
3200+
max-width: 1400px;
3201+
}
3202+
31213203
.wpuf-max-w-\[768px\] {
31223204
max-width: 768px;
31233205
}
@@ -3183,6 +3265,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
31833265
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));
31843266
}
31853267

3268+
.wpuf--translate-y-1\/2 {
3269+
--tw-translate-y: -50%;
3270+
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));
3271+
}
3272+
31863273
.wpuf--translate-y-\[50\%\] {
31873274
--tw-translate-y: -50%;
31883275
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));
@@ -3309,6 +3396,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
33093396
justify-content: space-evenly;
33103397
}
33113398

3399+
.wpuf-gap-12 {
3400+
gap: 3rem;
3401+
}
3402+
33123403
.wpuf-gap-2 {
33133404
gap: 0.5rem;
33143405
}
@@ -3953,6 +4044,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
39534044
padding-bottom: 10px !important;
39544045
}
39554046

4047+
.\!wpuf-py-\[4px\] {
4048+
padding-top: 4px !important;
4049+
padding-bottom: 4px !important;
4050+
}
4051+
39564052
.wpuf-px-1 {
39574053
padding-left: 0.25rem;
39584054
padding-right: 0.25rem;
@@ -4586,6 +4682,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
45864682
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
45874683
}
45884684

4685+
.wpuf-shadow-primary {
4686+
--tw-shadow-color: #059669;
4687+
--tw-shadow: var(--tw-shadow-colored);
4688+
}
4689+
45894690
.wpuf-outline {
45904691
outline-style: solid;
45914692
}
@@ -5478,6 +5579,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
54785579
border-style: none;
54795580
}
54805581

5582+
.focus\:\!wpuf-border-\[\#10b981\]:focus {
5583+
--tw-border-opacity: 1 !important;
5584+
border-color: rgb(16 185 129 / var(--tw-border-opacity)) !important;
5585+
}
5586+
54815587
.focus\:\!wpuf-border-primaryHover:focus {
54825588
--tw-border-opacity: 1 !important;
54835589
border-color: rgb(16 185 129 / var(--tw-border-opacity)) !important;

‎assets/css/admin/subscriptions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/forms-list.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/forms-list.min.js‎

Lines changed: 19 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/forms-list.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)