joydip.manna/dealhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(UX improvements): add preloader, button animations, navbar transition on mobile

Browse Source
This commit is contained in:
kusowl 2026-01-19 10:38:42 +05:30
parent 3750638122
commit 89271220fa
7 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/css/app.css
View File

@ -29,3 +29,7 @@ @layer base{
@apply text-5xl font-black text-center @apply text-5xl font-black text-center
} }
} }
.preload * {
transition: none !important;
}

11
resources/js/app.js
View File

@ -1 +1,12 @@
import './bootstrap'; import './bootstrap';
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
const content = document.getElementById('content');
preloader.style.opacity='0';
setTimeout(() => {
preloader.style.display='none';
}, 350)
content.style.display = 'block';
document.body.classList.remove('preload')
})

6
resources/js/nav-menu.js
View File

@ -4,11 +4,13 @@ const mobileMenu = document.getElementById('mobileMenu');
const body = document.body; const body = document.body;
openBtn.addEventListener('click', () => { openBtn.addEventListener('click', () => {
mobileMenu.classList.remove('hidden'); mobileMenu.classList.remove('translate-x-[100vw]');
mobileMenu.classList.add('translate-x-0');
body.style.overflow = 'hidden'; body.style.overflow = 'hidden';
}) })
closeBtn.addEventListener('click', () => { closeBtn.addEventListener('click', () => {
mobileMenu.classList.add('hidden'); mobileMenu.classList.add('translate-x-[100vw]');
mobileMenu.classList.remove('translate-x-0');
body.style.overflow = 'visible'; body.style.overflow = 'visible';
}) })

4
resources/views/components/dashboard/broker/navbar.blade.php
View File

@ -9,13 +9,13 @@
<!-- mobile menu btn--> <!-- mobile menu btn-->
<x-ui.button class="md:hidden" id="openBtn"> <x-ui.button class="md:hidden" id="openBtn">
<x-heroicon-o-bars-3 class="w-8"/> <x-heroicon-o-bars-3 class="w-8 0"/>
</x-ui.button> </x-ui.button>
</nav> </nav>
<!-- mobile menu btn--> <!-- mobile menu btn-->
<div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10"> <div id='mobileMenu' class="translate-x-[100vw] absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10 transition-transform duration-500 ease-in-out">
<div class="flex justify-between mb-8"> <div class="flex justify-between mb-8">
<x-logo/> <x-logo/>
<x-ui.button id="closeBtn"> <x-ui.button id="closeBtn">

5
resources/views/components/layout.blade.php
View File

@ -21,7 +21,10 @@
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
</head> </head>
<body class="bg-[#FFFFFF] text-[#1b1b18] flex h-full w-full flex-col"> <body class="bg-[#FFFFFF] text-[#1b1b18] flex h-full w-full flex-col preload">
<x-ui.preloader/>
<div class="h-full w-full" style="display: none" id="content">
{{$slot}} {{$slot}}
</div>
</body> </body>
</html> </html>

4
resources/views/components/ui/button.blade.php
View File

@ -9,7 +9,7 @@
$variantClass = $variants[$variant] ?? ''; $variantClass = $variants[$variant] ?? '';
@endphp @endphp
@if($link !== '') @if($link !== '')
<a {{$attributes->merge(['class' => "block px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}> <a {{$attributes->merge(['class' => "block active:scale-90 transition-all duration-200 px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
<div class="flex justify-center items-center space-x-2"> <div class="flex justify-center items-center space-x-2">
@if($icon !=='') @if($icon !=='')
@svg("heroicon-o-$icon", 'w-5 h-5') @svg("heroicon-o-$icon", 'w-5 h-5')
@ -18,7 +18,7 @@
</div> </div>
</a> </a>
@else @else
<button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'type'=>'submit'])}}> <button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80 active:scale-90 transition-all duration-200 $variantClass", 'type'=>'submit'])}}>
<div class="flex justify-center items-center space-x-2"> <div class="flex justify-center items-center space-x-2">
@if($icon !=='') @if($icon !=='')
@svg("heroicon-o-$icon", 'w-5 h-5') @svg("heroicon-o-$icon", 'w-5 h-5')

8
resources/views/components/ui/preloader.blade.php Normal file
View File

@ -0,0 +1,8 @@
<div id="preloader"
class="bg-white fixed top-0 left-0 h-screen w-screen z-1000 flex items-center justify-center opacity-100 transition-opacity duration-300 ease-in-out">
<div
class="inline-block h-8 w-8 animate-spin rounded-full border-4
border-solid border-black border-e-transparent align-[-0.125em]
text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] text-black">
</div>
</div>