mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

chore: add btn to scroll to next element on configurator demo section

bug-new
jatin 2024-12-16 14:38:18 +05:30
parent 105ed7041a
commit 0877aeebc0
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_dev/js/theme.js
View File

@ -209,4 +209,11 @@ $(() => {
$("#widget-instructions-overlay").on("click", () => { $("#widget-instructions-overlay").on("click", () => {
$("#widget-instructions-overlay").hide(); $("#widget-instructions-overlay").hide();
}); });
//Wiget scroll btn
$(".widget-scroll-btn").on("click", () => {
$("#configurator-demo-container").next()[0].scrollIntoView({
behavior: "smooth",
});
});
}); });

7
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

7
templates/layouts/layout-both-columns.tpl
View File

@ -141,11 +141,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lg:mb-32 mb-20"> <div id="configurator-demo-container" class="lg:mb-32 mb-20">
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1> <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
<h3 class="text-lg font-semibold text-center mb-2">Choose what looks good on you</h3> <h3 class="text-lg font-semibold text-center mb-2">Choose what looks good on you</h3>
<div class="relative w-full" style="height: calc(100vh - 80px);"> <div class="relative w-full" style="height: calc(100vh - 80px);">
<iframe class="w-full h-full" src="https://widget.thob.studio/project/dc0fadc7-9dc3-4299-b3f7-4c8b34aeead6"></iframe> <iframe class="w-full h-full" src="https://widget.thob.studio/project/dc0fadc7-9dc3-4299-b3f7-4c8b34aeead6"></iframe>
<div class="widget-scroll-btn absolute top-3 left-3 p-3 cursor-pointer bg-[#f0f0f0] hover:bg-[#f9f9f9] ease-in-out duration-300 border-2 border-solid border-[#cecece] rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-down-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 7v14" /><path d="M9 18l3 3l3 -3" /><path d="M12 7a2 2 0 1 0 0 -4a2 2 0 0 0 0 4" /></svg>
</div>
<div id="widget-instructions-overlay" class="absolute top-0 w-full h-full bg-gray-500 bg-opacity-75 flex justify-center items-center cursor-pointer z-20"> <div id="widget-instructions-overlay" class="absolute top-0 w-full h-full bg-gray-500 bg-opacity-75 flex justify-center items-center cursor-pointer z-20">
<div class="flex flex-col items-center text-white stroke-white gap-4 "> <div class="flex flex-col items-center text-white stroke-white gap-4 ">
<h3 class="text-xl font-semibold">Click to unlock</h3> <h3 class="text-xl font-semibold">Click to unlock</h3>
@ -155,7 +158,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1"> <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1 scroll-my-10">
<div class="row-span-3 col-start-1 row-end-2 relative"> <div class="row-span-3 col-start-1 row-end-2 relative">
<h3 <h3
class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4"> class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4">