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
}
}
.preload * {
transition: none !important;
}

11
resources/js/app.js
View File

@ -1 +1,12 @@
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;
openBtn.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.remove('translate-x-[100vw]');
mobileMenu.classList.add('translate-x-0');
body.style.overflow = 'hidden';
})
closeBtn.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
mobileMenu.classList.add('translate-x-[100vw]');
mobileMenu.classList.remove('translate-x-0');
body.style.overflow = 'visible';
})

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

@ -9,13 +9,13 @@
<!-- mobile menu btn-->
<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>
</nav>
<!-- 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">
<x-logo/>
<x-ui.button id="closeBtn">

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

@ -1,27 +1,30 @@
@props(['title' => ''])
@php
@php
$pageTitle = config('app.name', 'Laravel');
if ($title !== ''){
$pageTitle = "$pageTitle | $title";
}
@endphp
<!DOCTYPE html>
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $pageTitle }}</title>
<link rel="shortcut icon" type="image/x-icon" href="{{asset('storage/'.'/images/favicon.ico')}}" />
<link rel="shortcut icon" type="image/x-icon" href="{{asset('storage/'.'/images/favicon.ico')}}"/>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet"/>
<!-- Styles / Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#FFFFFF] text-[#1b1b18] flex h-full w-full flex-col">
{{$slot}}
<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}}
</div>
</body>
</html>

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

@ -9,7 +9,7 @@
$variantClass = $variants[$variant] ?? '';
@endphp
@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">
@if($icon !=='')
@svg("heroicon-o-$icon", 'w-5 h-5')
@ -18,7 +18,7 @@
</div>
</a>
@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">
@if($icon !=='')
@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>