apurvab
/
elegance
1
0
Fork 0
Code Pull Requests Activity

fix:Add custom scrollbar

main
apurvab 2024-05-02 12:48:50 +05:30
parent f6aeae158d
commit 19cbc3eefc
5 changed files with 203 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
_dev/elegance.css Normal file → Executable file
View File

@ -44,6 +44,7 @@ input[type="radio"],input[type="checkbox"] {
.tabs { .tabs {
position: relative; position: relative;
height: 14.75rem; height: 14.75rem;
} }
.tabs::before, .tabs::before,
.tabs::after { .tabs::after {
@ -55,6 +56,7 @@ input[type="radio"],input[type="checkbox"] {
} }
.tab { .tab {
float: left; float: left;
} }
.tab-switch { .tab-switch {
display: none; display: none;
@ -70,10 +72,13 @@ input[type="radio"],input[type="checkbox"] {
top: 0; top: 0;
transition: all 0.25s; transition: all 0.25s;
border-bottom: #000000; border-bottom: #000000;
width: 120px;
text-align: center;
} }
.tab-label:hover { .tab-label:hover {
top: -0.25rem; top: -0.25rem;
transition: top 0.25s; transition: top 0.25s;
} }
.tab-content { .tab-content {
height: 12rem; height: 12rem;
@ -89,14 +94,52 @@ input[type="radio"],input[type="checkbox"] {
} }
.tab-switch:checked + .tab-label { .tab-switch:checked + .tab-label {
background: #fff; background: #fff;
color: #2c3e50; color: #ffffff;
border-bottom: 0; border-bottom: 0;
transition: all 0.35s; transition: all 0.35s;
z-index: 1; z-index: 1;
top: -0.0625rem; top: -0.0625rem;
background-color: rgb(23 37 84);
} }
.tab-switch:checked + label + .tab-content { .tab-switch:checked + label + .tab-content {
z-index: 2; z-index: 2;
opacity: 1; opacity: 1;
transition: all 0.35s; transition: all 0.35s;
} }
.mainBody::-webkit-scrollbar {
-webkit-appearance: none;
}
.mainBody::-webkit-scrollbar:vertical {
width: 11px;
}
.mainBody::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.mainBody::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
.mainBody {
height: 250px;
background-color: #ddd;
padding: 24px;
overflow: scroll;
border: 2px solid #000;
}
.pop-up{
display: none;
overflow-y:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70%;
background-color: white;
padding: 20px; z-index: 9999;
box-shadow: 0 0 0 9999px #000000b0;
}

176
assets/css/theme.css Normal file → Executable file
View File

@ -846,11 +846,6 @@ select {
margin-bottom: -0.75rem; margin-bottom: -0.75rem;
} }
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-4 { .mx-4 {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
@ -886,14 +881,6 @@ select {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.-mb-px {
margin-bottom: -1px;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-1 { .mb-1 {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@ -1046,6 +1033,14 @@ select {
height: 100%; height: 100%;
} }
.h-\[120px\] {
height: 120px;
}
.h-64 {
height: 16rem;
}
.max-h-\[40px\] { .max-h-\[40px\] {
max-height: 40px; max-height: 40px;
} }
@ -1131,10 +1126,6 @@ select {
width: max-content; width: max-content;
} }
.w-56 {
width: 14rem;
}
.max-w-6xl { .max-w-6xl {
max-width: 72rem; max-width: 72rem;
} }
@ -1190,10 +1181,6 @@ select {
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)); 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));
} }
.transform {
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));
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -1208,10 +1195,6 @@ select {
list-style-type: square; list-style-type: square;
} }
.list-none {
list-style-type: none;
}
.appearance-none { .appearance-none {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -1322,35 +1305,14 @@ select {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
.border-b-0 {
border-bottom-width: 0px;
}
.border-l-0 {
border-left-width: 0px;
}
.border-r-0 {
border-right-width: 0px;
}
.border-t { .border-t {
border-top-width: 1px; border-top-width: 1px;
} }
.border-t-0 {
border-top-width: 0px;
}
.border-none { .border-none {
border-style: none; border-style: none;
} }
@ -1419,11 +1381,6 @@ select {
background-color: rgb(219 234 254 / var(--tw-bg-opacity)); background-color: rgb(219 234 254 / var(--tw-bg-opacity));
} }
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-blue-950 { .bg-blue-950 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(23 37 84 / var(--tw-bg-opacity)); background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@ -1439,11 +1396,6 @@ select {
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
} }
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.bg-gray-700 { .bg-gray-700 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@ -1531,11 +1483,6 @@ select {
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 { .px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -1580,10 +1527,6 @@ select {
padding-bottom: 3rem; padding-bottom: 3rem;
} }
.pl-0 {
padding-left: 0px;
}
.pl-12 { .pl-12 {
padding-left: 3rem; padding-left: 3rem;
} }
@ -1632,6 +1575,18 @@ select {
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.pl-8 {
padding-left: 2rem;
}
.pl-24 {
padding-left: 6rem;
}
.pl-28 {
padding-left: 7rem;
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -1656,10 +1611,6 @@ select {
text-align: end; text-align: end;
} }
.align-middle {
vertical-align: middle;
}
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
@ -1812,14 +1763,6 @@ select {
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.shadow-lg { .shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@ -1927,6 +1870,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
top: 0; top: 0;
transition: all 0.25s; transition: all 0.25s;
border-bottom: #000000; border-bottom: #000000;
width: 120px;
text-align: center;
} }
.tab-label:hover { .tab-label:hover {
@ -1949,11 +1894,12 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.tab-switch:checked + .tab-label { .tab-switch:checked + .tab-label {
background: #fff; background: #fff;
color: #2c3e50; color: #ffffff;
border-bottom: 0; border-bottom: 0;
transition: all 0.35s; transition: all 0.35s;
z-index: 1; z-index: 1;
top: -0.0625rem; top: -0.0625rem;
background-color: rgb(23 37 84);
} }
.tab-switch:checked + label + .tab-content { .tab-switch:checked + label + .tab-content {
@ -1962,6 +1908,48 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
transition: all 0.35s; transition: all 0.35s;
} }
.mainBody::-webkit-scrollbar {
-webkit-appearance: none;
}
.mainBody::-webkit-scrollbar:vertical {
width: 11px;
}
.mainBody::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
/* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.mainBody::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
.mainBody {
height: 250px;
background-color: #ddd;
padding: 24px;
overflow: scroll;
border: 2px solid #000;
}
.pop-up{
display: none;
overflow-y:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70%;
background-color: white;
padding: 20px;
z-index: 9999;
box-shadow: 0 0 0 9999px #000000b0;
}
.file\:mr-4::file-selector-button { .file\:mr-4::file-selector-button {
margin-right: 1rem; margin-right: 1rem;
} }
@ -2025,21 +2013,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
border-color: rgb(30 58 138 / var(--tw-border-opacity)); border-color: rgb(30 58 138 / var(--tw-border-opacity));
} }
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.hover\:bg-blue-900:hover { .hover\:bg-blue-900:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(30 58 138 / var(--tw-bg-opacity)); background-color: rgb(30 58 138 / var(--tw-bg-opacity));
} }
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:stroke-blue-900:hover { .hover\:stroke-blue-900:hover {
stroke: #1e3a8a; stroke: #1e3a8a;
} }
@ -2208,10 +2186,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.sm\:flex { .sm\:flex {
display: flex; display: flex;
} }
.sm\:w-1\/2 {
width: 50%;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -2263,6 +2237,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 50%; width: 50%;
} }
.md\:w-56 {
width: 14rem;
}
.md\:flex-row { .md\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -2384,10 +2362,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 100%; width: 100%;
} }
.lg\:w-44 {
width: 11rem;
}
.lg\:max-w-full { .lg\:max-w-full {
max-width: 100%; max-width: 100%;
} }
@ -2433,6 +2407,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-top: 6rem; padding-top: 6rem;
} }
.lg\:pl-28 {
padding-left: 7rem;
}
.lg\:pl-32 {
padding-left: 8rem;
}
.lg\:shadow-none { .lg\:shadow-none {
--tw-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;
@ -2445,3 +2427,5 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
width: 25%; width: 25%;
} }
} }

31
modules/thobbodymeasurements/views/js/front-set-product-measurements.js Normal file → Executable file
View File

@ -43,29 +43,13 @@ $(document).ready(function() {
}); });
}); });
$('#closebutton').click(function() {
$('#measurements-modal').hide();
});
// Add click event handler to the "Custom Measurements" tab $('#closemirrorbutton').click(function() {
$('#custom-measurements-tab').click(function(event) { $('#measurements-modal').hide();
// Prevent the default behavior of the anchor tag });
event.preventDefault();
// Hide the "Mirror Size Measurements" tab if it's currently active
$('#mirror-size-measurements').removeClass('opacity-100 block active');
// Show the "Custom Measurements" tab
$('#custom-measurements').addClass('opacity-100 block active');
});
// Add click event handler to the "Mirror Size Measurements" tab
$('#mirror-size-measurements-tab').click(function(event) {
// Prevent the default behavior of the anchor tag
event.preventDefault();
// Show the "Mirror Size Measurements" tab
$('#mirror-size-measurements').addClass('opacity-100 block active');
});
// Add click event handler to the "Photos Completed" button // Add click event handler to the "Photos Completed" button
@ -195,12 +179,15 @@ $('#mirror-size-measurements-tab').click(function(event) {
success: function(response) { success: function(response) {
console.log(response); console.log(response);
console.log("Proceed to add to cart...."); console.log("Proceed to add to cart....");
console.log(event.currentTarget)
const $form = $(event.currentTarget.form); const $form = $(event.currentTarget.form);
const query = `${$form.serialize()}&add=1&action=update`; const query = `${$form.serialize()}&add=1&action=update`;
console.log("Form: ", $form.serialize());
console.log("Query: ", query); console.log("Query: ", query);
const actionURL = $form.attr('action'); const actionURL = $form.attr('action');
console.log("actionURL: ", actionURL);
const addToCartButton = $(event.currentTarget); const addToCartButton = $(event.currentTarget);
addToCartButton.prop('disabled', true); addToCartButton.prop('disabled', true);

8
modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl Normal file → Executable file
View File

@ -39,7 +39,7 @@
type="text" type="text"
id="{$attribute.id}" id="{$attribute.id}"
name="{$attribute.id}" name="{$attribute.id}"
class=" lg:w-[450px]" class=" lg:w-[450px] p-2"
pattern="[0-9]+" pattern="[0-9]+"
title="Please enter a positive number" title="Please enter a positive number"
required required
@ -64,11 +64,11 @@
</div> </div>
</form> </form>
{else} {else}
<form action="#" method="post" class="form-horizontal"> <form action="#" method="post" class="form-horizontal mx-auto">
<div class="flex lg:flex-row flex-col gap-4 justify-center"> <div class="flex lg:flex-row flex-col gap-4 justify-center">
<label for="form_select" class="form-control-label col-md-3 font-medium text-lg mt-1 ">{l s='Select a Form:' mod='thobbodymeasurements'}</label> <label for="form_select" class="form-control-label col-md-3 font-medium text-lg mt-1 ">{l s='Select a Form:' mod='thobbodymeasurements'}</label>
<div class=""> <div class="">
<select name="form_select" id="form_select" class="form-control form-control-select w-[220px] h-[40px] rounded"> <select name="form_select" id="form_select" class="form-control p-2 form-control-select w-[220px] h-[40px] rounded">
{foreach from=$currentForms item=form} {foreach from=$currentForms item=form}
<option value="{$form.id_form}">{$form.label_form}</option> <option value="{$form.id_form}">{$form.label_form}</option>
{/foreach} {/foreach}
@ -76,7 +76,7 @@
</div> </div>
</div> </div>
<div class=""> <div class="lg:pl-32 p-4">
<div class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light w-32"> <div class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light w-32">
<button type="submit" class="">{l s='Select Form' mod='thobbodymeasurements'}</button> <button type="submit" class="">{l s='Select Form' mod='thobbodymeasurements'}</button>
</div> </div>

106
modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl Normal file → Executable file
View File

@ -9,26 +9,30 @@
</a> </a>
<!-- Modal --> <!-- Modal -->
<div class="modal modal-set-measurements lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;"> <div class="">
<div class="modal modal-set-measurements lg:w-[600px] mainBody pop-up" id="measurements-modal" tabindex="-1" role="dialog" >
<div class="wrapper"> <div class="wrapper">
<div class="tabs"> <div class="tabs">
<div class="tab"> <div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"> <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab One</label> <label for="tab-1" class="tab-label">Custom</label>
<div class="tab-content my-12"> <div class="tab-content my-12">
{if isset($currentForm)} {if isset($currentForm)}
<h2 class="font-semibold mb-4">{$currentForm.label_form}</h2> <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
<form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
<section class="form-fields"> <section class="form-fields">
{foreach from=json_decode($currentForm.attributes, true) item=$attribute} {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
<div class="mb-4 flex flex-row form-group "> <div class="mb-4 flex flex-row form-group ">
<div class="w-24 pr-8">
<label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label> <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
<div class=" pr-4 pl-4 js-input-column"> </div>
<div class=" js-input-column">
<input <input
type="text" type="text"
id="{$attribute.id}" id="{$attribute.id}"
name="{$attribute.id}" name="{$attribute.id}"
class=" block appearance-none w-56 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" class=" block appearance-none md:w-56 w-24 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
pattern="[0-9]+" pattern="[0-9]+"
title="Please enter a positive number" title="Please enter a positive number"
required required
@ -36,42 +40,45 @@
value="{$customerMeasurements[$attribute.id]}" value="{$customerMeasurements[$attribute.id]}"
{/if}> {/if}>
</div> </div>
<div class="md:w-1/4 pr-4 pl-4 form-control-comment"> <div class="md:w-1/4 pr-4 pl-4 form-control-comment w-24">
<small class="block mt-1 text-gray-700">{$attribute.unit}</small> <small class="block mt-1 text-gray-700 ">{$attribute.unit}</small>
</div> </div>
</div> </div>
{/foreach} {/foreach}
<input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}"> <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
<input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}"> <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
</section> </section>
</form>
<button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
{else} {else}
<p>No form data available.</p> <p>No form data available.</p>
{/if} {/if}
<button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button> <button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" id="closebutton" data-dismiss="modal">Close</button>
<button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" data-dismiss="modal">Close</button> </div>
</div>
</div>
</div>
<div class="tab mb-8"> <div class="tab mb-8">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch"> <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab Two</label> <label for="tab-2" class="tab-label">Mirror</label>
<div class="tab-content gap-mb-8"> <div class="tab-content gap-mb-8">
<div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab"> <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
{if $qrCode} {if $qrCode}
<img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto"> <img src="{$qrCode}" alt="Mirror Size QR Code" class="mx-auto max-w-full h-64">
<p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p> <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
<p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p> <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
<button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button> <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
<button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " data-dismiss="modal">Close</button> <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " id="closemirrorbutton" data-dismiss="modal">Close</button>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
@ -79,67 +86,4 @@
<!-- <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="flex flex-wrap list-none pl-0 mb-0 border border-t-0 border-r-0 border-l-0 border-b-1 border-gray-200" id="measurementTabs" role="tablist">
<li class="-mb-px">
<a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t active" id="custom-measurements-tab" data-toggle="tab" href="#custom-measurements" role="tab" aria-controls="custom-measurements" aria-selected="true">Custom Measurements</a>
</li>
<li class="-mb-px">
<a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t" id="mirror-size-measurements-tab" data-toggle="tab" href="#mirror-size-measurements" role="tab" aria-controls="mirror-size-measurements" aria-selected="false">Mirror Size Measurements</a>
</li>
</ul>
<div class="modal-body">
<div class="tab-content" id="measurementTabsContent">
<div class="tab-pane opacity-100 block active" id="custom-measurements" role="tabpanel" aria-labelledby="custom-measurements-tab">
{if isset($currentForm)}
<h2>{$currentForm.label_form}</h2>
<form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
<section class="form-fields">
{foreach from=json_decode($currentForm.attributes, true) item=$attribute}
<div class="mb-4 flex flex-wrap form-group ">
<label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
<div class="md:w-1/2 pr-4 pl-4 js-input-column">
<input
type="text"
id="{$attribute.id}"
name="{$attribute.id}"
class=" block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
pattern="[0-9]+"
title="Please enter a positive number"
required
{if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
value="{$customerMeasurements[$attribute.id]}"
{/if}>
</div>
<div class="md:w-1/4 pr-4 pl-4 form-control-comment">
<small class="block mt-1 text-gray-700">{$attribute.unit}</small>
</div>
</div>
{/foreach}
<input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
<input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
</section>
</form>
{else}
<p>No form data available.</p>
{/if}
</div>
<div class="tab-pane opacity-0" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
{if $qrCode}
<img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto">
<p> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
<p> Click on 'Photos Completed' button once your above process is finished. </p>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
{/if}
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-blue-600 text-white hover:bg-blue-600" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> -->