From 19cbc3eefc1fb7316fcb34336a6047ae795c5872 Mon Sep 17 00:00:00 2001 From: apurvab Date: Thu, 2 May 2024 12:48:50 +0530 Subject: [PATCH] fix:Add custom scrollbar --- _dev/elegance.css | 45 ++++- assets/css/theme.css | 176 ++++++++--------- .../js/front-set-product-measurements.js | 33 +--- .../front/customer_account_section.tpl | 8 +- .../hook/set-measurements-button.tpl | 186 ++++++------------ 5 files changed, 203 insertions(+), 245 deletions(-) mode change 100644 => 100755 _dev/elegance.css mode change 100644 => 100755 assets/css/theme.css mode change 100644 => 100755 modules/thobbodymeasurements/views/js/front-set-product-measurements.js mode change 100644 => 100755 modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl mode change 100644 => 100755 modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl diff --git a/_dev/elegance.css b/_dev/elegance.css old mode 100644 new mode 100755 index 9d0b97c..1a230e2 --- a/_dev/elegance.css +++ b/_dev/elegance.css @@ -44,6 +44,7 @@ input[type="radio"],input[type="checkbox"] { .tabs { position: relative; height: 14.75rem; + } .tabs::before, .tabs::after { @@ -55,6 +56,7 @@ input[type="radio"],input[type="checkbox"] { } .tab { float: left; + } .tab-switch { display: none; @@ -70,10 +72,13 @@ input[type="radio"],input[type="checkbox"] { top: 0; transition: all 0.25s; border-bottom: #000000; + width: 120px; + text-align: center; } .tab-label:hover { top: -0.25rem; transition: top 0.25s; + } .tab-content { height: 12rem; @@ -89,14 +94,52 @@ input[type="radio"],input[type="checkbox"] { } .tab-switch:checked + .tab-label { background: #fff; - color: #2c3e50; + color: #ffffff; border-bottom: 0; transition: all 0.35s; z-index: 1; top: -0.0625rem; + background-color: rgb(23 37 84); } .tab-switch:checked + label + .tab-content { z-index: 2; opacity: 1; 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; + +} + + \ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme.css old mode 100644 new mode 100755 index 8e527db..b31c89f --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -846,11 +846,6 @@ select { margin-bottom: -0.75rem; } -.mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - .mx-4 { margin-left: 1rem; margin-right: 1rem; @@ -886,14 +881,6 @@ select { margin-bottom: 2rem; } -.-mb-px { - margin-bottom: -1px; -} - -.mb-0 { - margin-bottom: 0px; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -1046,6 +1033,14 @@ select { height: 100%; } +.h-\[120px\] { + height: 120px; +} + +.h-64 { + height: 16rem; +} + .max-h-\[40px\] { max-height: 40px; } @@ -1131,10 +1126,6 @@ select { width: max-content; } -.w-56 { - width: 14rem; -} - .max-w-6xl { 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 { - 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; } @@ -1208,10 +1195,6 @@ select { list-style-type: square; } -.list-none { - list-style-type: none; -} - .appearance-none { -webkit-appearance: none; -moz-appearance: none; @@ -1322,35 +1305,14 @@ select { border-radius: 0.5rem; } -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; -} - .border { 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-top-width: 1px; } -.border-t-0 { - border-top-width: 0px; -} - .border-none { border-style: none; } @@ -1419,11 +1381,6 @@ select { 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 { --tw-bg-opacity: 1; 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)); } -.bg-gray-600 { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); -} - .bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); @@ -1531,11 +1483,6 @@ select { padding-right: 0.5rem; } -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -1580,10 +1527,6 @@ select { padding-bottom: 3rem; } -.pl-0 { - padding-left: 0px; -} - .pl-12 { padding-left: 3rem; } @@ -1632,6 +1575,18 @@ select { padding-top: 1.5rem; } +.pl-8 { + padding-left: 2rem; +} + +.pl-24 { + padding-left: 6rem; +} + +.pl-28 { + padding-left: 7rem; +} + .text-left { text-align: left; } @@ -1656,10 +1611,6 @@ select { text-align: end; } -.align-middle { - vertical-align: middle; -} - .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1812,14 +1763,6 @@ select { text-underline-offset: 2px; } -.opacity-0 { - opacity: 0; -} - -.opacity-100 { - opacity: 1; -} - .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-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; transition: all 0.25s; border-bottom: #000000; + width: 120px; + text-align: center; } .tab-label:hover { @@ -1949,11 +1894,12 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .tab-switch:checked + .tab-label { background: #fff; - color: #2c3e50; + color: #ffffff; border-bottom: 0; transition: all 0.35s; z-index: 1; top: -0.0625rem; + background-color: rgb(23 37 84); } .tab-switch:checked + label + .tab-content { @@ -1962,6 +1908,48 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { 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 { 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)); } -.hover\:bg-blue-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - .hover\:bg-blue-900:hover { --tw-bg-opacity: 1; 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 { stroke: #1e3a8a; } @@ -2208,10 +2186,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .sm\:flex { display: flex; } - - .sm\:w-1\/2 { - width: 50%; - } } @media (min-width: 768px) { @@ -2263,6 +2237,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 50%; } + .md\:w-56 { + width: 14rem; + } + .md\:flex-row { flex-direction: row; } @@ -2384,10 +2362,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 100%; } - .lg\:w-44 { - width: 11rem; - } - .lg\:max-w-full { max-width: 100%; } @@ -2433,6 +2407,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding-top: 6rem; } + .lg\:pl-28 { + padding-left: 7rem; + } + + .lg\:pl-32 { + padding-left: 8rem; + } + .lg\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; @@ -2445,3 +2427,5 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 25%; } } + + \ No newline at end of file diff --git a/modules/thobbodymeasurements/views/js/front-set-product-measurements.js b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js old mode 100644 new mode 100755 index 0ce9d9d..0e54cb9 --- a/modules/thobbodymeasurements/views/js/front-set-product-measurements.js +++ b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js @@ -43,29 +43,13 @@ $(document).ready(function() { }); }); - - // Add click event handler to the "Custom Measurements" tab - $('#custom-measurements-tab').click(function(event) { - // 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'); -}); - + $('#closebutton').click(function() { + $('#measurements-modal').hide(); + }); + + $('#closemirrorbutton').click(function() { + $('#measurements-modal').hide(); + }); // Add click event handler to the "Photos Completed" button @@ -195,12 +179,15 @@ $('#mirror-size-measurements-tab').click(function(event) { success: function(response) { console.log(response); console.log("Proceed to add to cart...."); + console.log(event.currentTarget) const $form = $(event.currentTarget.form); const query = `${$form.serialize()}&add=1&action=update`; + console.log("Form: ", $form.serialize()); console.log("Query: ", query); const actionURL = $form.attr('action'); + console.log("actionURL: ", actionURL); const addToCartButton = $(event.currentTarget); addToCartButton.prop('disabled', true); diff --git a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl old mode 100644 new mode 100755 index 60af8d9..efeff33 --- a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl +++ b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl @@ -39,7 +39,7 @@ type="text" id="{$attribute.id}" name="{$attribute.id}" - class=" lg:w-[450px]" + class=" lg:w-[450px] p-2" pattern="[0-9]+" title="Please enter a positive number" required @@ -64,11 +64,11 @@ {else} -
+
- {foreach from=$currentForms item=form} {/foreach} @@ -76,7 +76,7 @@
-
+
diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl old mode 100644 new mode 100755 index 8dc7236..6ba4fde --- a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl +++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl @@ -9,137 +9,81 @@ - - - - - - - - +
+ + + + + + +