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

chore(UI Improvements): made all pages in broker panel full width

Browse Source 
toasts timer increased to 5s.
Add animation to the toast
Add toast for like and favorite actions
fixed the deal card design
added a opening animation to modal
This commit is contained in:
kusowl 2026-01-19 14:11:52 +05:30
parent 89271220fa
commit 688fd02e26
21 changed files with 91 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/InteractionController.php
View File

@ -33,7 +33,7 @@ public function togglesState(Deal $deal, InteractionType $type)
$message = '';
if ($existingInteraction) {
$existingInteraction->delete();
$message = "{$type->value} removed from deal";
$message = ucfirst($type->value).' removed from deal';
} else {
$data = [
'type' => $type,
@ -44,7 +44,7 @@ public function togglesState(Deal $deal, InteractionType $type)
$deal->interactions()->create($data);
Interaction::reguard();
$message = "{$type->value} added to deal";
$message = ucfirst($type->value).' added to deal';
}
return response()->json(['message' => $message]);

28
resources/css/app.css
View File

@ -14,7 +14,7 @@ @theme {
--color-accent-600: oklch(0.45 0.01 232);
}
@layer components{
@layer components {
@import "./button.css";
.wrapper {
@ -24,7 +24,7 @@ @layer components{
}
@layer base{
@layer base {
h2 {
@apply text-5xl font-black text-center
}
@ -33,3 +33,27 @@ @layer base{
.preload * {
transition: none !important;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes disappear {
from {
display: block;
opacity: 1;
}
to {
display: none;
opacity: 0;
}
}
dialog{
animation: disappear 300ms ease-in-out;
}
dialog[open]{
animation: appear 300ms ease-in-out;
}

12
resources/js/interaction.js
View File

@ -1,3 +1,5 @@
import {showToast} from "./toast.js";
async function like(button, id) {
// Instant feedback for user
let likeBtns = button.querySelectorAll('.like');
@ -12,10 +14,16 @@ async function like(button, id) {
let response = await axios.post('/like/' + id);
if (response.status !== 200) {
showToast(response.data.message)
// Revert the ui
toggleHidden(likeBtns);
}
else{
showToast(response.data.message)
}
} catch (e) {
showToast(e.response.data.message)
toggleHidden(likeBtns);
console.error(e);
}
@ -30,10 +38,14 @@ async function favorite(e, id) {
let response = await axios.post('/favorite/' + id);
if (response.status !== 200) {
showToast(response.data.message)
// Revert the ui
toggleHidden(favoriteBtns);
}else{
showToast(response.data.message);
}
} catch (e) {
showToast(e.response.data.message)
toggleHidden(favoriteBtns);
console.error(e);
}

10
resources/js/toast.js
View File

@ -2,14 +2,16 @@ const toast = document.querySelector('.toast');
const toastBtn = document.querySelector('#toast-btn');
let toastMessage = toast.querySelector('#toast-message');
export function showToast(message) {
toast.classList.toggle('hidden')
toast.classList.remove('translate-x-[100vw]');
toast.classList.add('translate-x-0');
toastMessage.textContent = message;
setTimeout(() => {
toast.classList.toggle('hidden');
}, 3000)
hideToast();
}, 5000)
}
function hideToast() {
toast.classList.toggle('hidden')
toast.classList.remove('translate-x-0');
toast.classList.add('translate-x-[100vw]');
}
document.hideToast = hideToast;
document.showToast = showToast;

3
resources/views/components/dashboard/broker/layout.blade.php
View File

@ -4,7 +4,7 @@
<x-dashboard.broker.sidebar class="hidden shrink-0 md:w-50 lg:w-60 md:block md:h-screen"
active-class="bg-linear-120 from-[#1a55ed] to-[#9b1cff] text-white"/>
<section
class=" flex flex-col space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
{{$heading ?? ''}}
@ -19,6 +19,7 @@ class=" flex flex-col space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
<x-ui.alert variant="error">{{$value}}</x-ui.alert>
</div>
@endsession
{{$slot}}
</section>
</div>

6
resources/views/components/dashboard/broker/sidebar/index.blade.php
View File

@ -5,10 +5,10 @@
<div class="">
<div class="flex space-x-3 border-b border-b-gray-300 pb-6">
<x-logo/>
<div class="">
<a href="{{route('home')}}" class="">
<p class="text-2xl font-bold">DealHub</p>
<p class="text-accent-600 text-sm">Broker Panel</p>
</div>
</a>
</div>
<div class="pt-6 flex flex-col space-y-3">
<x-dashboard.broker.sidebar.item :link="route('broker.dashboard')">
@ -37,7 +37,7 @@
<form method="post" action="{{route('logout')}}">
@csrf
@method('delete')
<button class="py-3 px-4">
<button class="py-3 px-4 border border-white hover:bg-red-50 hover:border-red-200 rounded-xl w-full mt-4 active:scale-80 cursor-pointer transition-all duration-300 ease-in-out">
<div class="flex space-x-2 items-center text-red-500">
<x-heroicon-o-arrow-right-start-on-rectangle class="w-6"/>
<p>Logout</p>

2
resources/views/components/dashboard/broker/sidebar/item.blade.php
View File

@ -1,5 +1,5 @@
@props([ 'link' => ''])
@aware(['activeClass' => 'bg-gray-100 text-gray-900'])
<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center py-3 px-4 rounded-xl", $activeClass => url()->current() == $link])}} >
<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center py-3 px-4 rounded-xl hover:bg-gray-100 border border-white ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => url()->current() == $link])}} >
{{$slot}}
</a>

2
resources/views/components/dashboard/broker/stats.blade.php
View File

@ -1,5 +1,5 @@
@props(['list_count' => 0])
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-y-4 gap-x-8">
<x-dashboard.stats-card title="My Listings" :score="$list_count">
<x-icon-square variant="blue">
<x-heroicon-o-document-text class="w-8" />

2
resources/views/components/dashboard/card.blade.php
View File

@ -1,3 +1,3 @@
<div {{$attributes->merge(['class' => 'p-6 border border-gray-200 rounded-xl'])}}>
<div {{$attributes->merge(['class' => 'p-4 md:p-6 border border-gray-200 rounded-xl'])}}>
{{$slot}}
</div>

4
resources/views/components/dashboard/page-heading.blade.php
View File

@ -3,9 +3,9 @@
<div class="flex space-x-6 items-center">
@if($backLink !== '')
<div class="">
<a href="{{$backLink}}">
<x-ui.button-sm :link="$backLink">
<x-heroicon-o-arrow-left class="w-4"/>
</a>
</x-ui.button-sm>
</div>
@endif
<div class="">

2
resources/views/components/dashboard/user/broker-contact.blade.php
View File

@ -1,5 +1,5 @@
@props(['broker'])
<div class="p-4 text-sm">
<div class="p-4 mb-4 text-sm bg-[#f9fafb] border-gray-100 border rounded-xl">
<p class="font-bold mb-2">Broker Contact</p>
<div class="text-accent-600 space-y-1">
<p>{{$broker->name}}</p>

4
resources/views/components/dashboard/user/listing-card.blade.php
View File

@ -1,6 +1,6 @@
@props(['deal' => '', 'broker' => ''])
<x-ui.image-card :image="asset('storage/'.$deal->image)">
<div class="bg-white pt-8 p-4 h-full space-y-4 flex flex-col justify-between">
<x-ui.image-card class="shadow-lg" :image="asset('storage/'.$deal->image)">
<div class="bg-white pt-8 p-4 h-full space-y-2 flex flex-col justify-between">
<div class="flex justify-between">
<x-ui.button-sm variant="neutral">
{{$deal->category->name}}

12
resources/views/components/ui/button-sm.blade.php
View File

@ -1,12 +1,18 @@
@props(['variant' => ''])
@props(['variant' => '', 'link' => ''])
@php
$variants = [
'neutral' => 'bg-primary-600 text-white',
'ghost' => 'bg-gray-100 text-black text-sm'
'ghost' => 'bg-gray-100 text-black text-sm',
];
$variantClass = $variants[$variant] ?? '';
@endphp
<button {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 $variantClass"])}}>
@if($link !== '')
<a href="{{$link}}" {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 hover: active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
{{$slot}}
</a>
@else
<button {{$attributes->merge(['class' => "px-2 py-1 text-xs rounded-md font-medium hover:opacity-80 hover:scale-110 active:scale-80 transition-all duration-300 ease-in-out $variantClass"])}}>
{{$slot}}
</button>
@endif

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 active:scale-90 transition-all duration-200 px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass", 'href' => $link])}}>
<a {{$attributes->merge(['class' => "block px-4 py-2 rounded-lg font-medium hover:opacity-80 active:scale-80 transition-all ease-in-out duration-300 $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 active:scale-90 transition-all duration-200 $variantClass", 'type'=>'submit'])}}>
<button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80 active:scale-80 transition-all ease-in-out duration-300 $variantClass", 'type'=>'submit'])}}>
<div class="flex justify-center items-center space-x-2">
@if($icon !=='')
@svg("heroicon-o-$icon", 'w-5 h-5')

4
resources/views/components/ui/image-card.blade.php
View File

@ -1,7 +1,7 @@
@props(['image' => '', 'alt' => ''])
<div class="border border-gray-200 rounded-xl overflow-clip flex flex-col h-full">
<div {{$attributes->merge(['class' => "border border-gray-200 rounded-xl overflow-clip flex flex-col h-full"])}}>
<div class="flex flex-col h-full">
<div class="rounded-t-xl h-40">
<div class="rounded-t-xl h-70">
<img src="{{$image}}" alt="" class="object-cover">
</div>
<div class="flex-1">

3
resources/views/components/ui/modal.blade.php
View File

@ -1,4 +1,5 @@
<dialog {{$attributes->merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg"])}} >
<dialog
{{$attributes->merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg"])}} >
<div>
{{$slot}}
</div>

2
resources/views/components/ui/toast.blade.php
View File

@ -1,4 +1,4 @@
<div class="toast hidden fixed top-10 right-5 md:right-10 bg-black text-white rounded-xl shadow-lg p-4 flex space-x-2">
<div class="toast translate-x-[100vw] transition-transform duration-500 ease-in-out fixed top-10 right-5 md:right-10 bg-black text-white rounded-xl shadow-lg p-4 flex space-x-2">
<p id="toast-message" class="max-w-70 wrap-break-word"></p>
<x-ui.button-sm onclick="hideToast()">
<x-heroicon-o-x-mark class="w-4" />

13
resources/views/dashboards/broker/deals/create.blade.php
View File

@ -8,8 +8,8 @@
/>
</x-slot:heading>
<div class="flex items-center justify-center mb-8">
<x-dashboard.card class="w-11/12 md:w-8/12">
<div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
<x-dashboard.card class="w-full">
<h3 class="text-md font-bold">Deal Information</h3>
<form method="post" enctype="multipart/form-data" action="{{route('broker.deals.store')}}"
class="flex flex-col space-y-8 mt-4">
@ -32,10 +32,11 @@ class="flex flex-col space-y-8 mt-4">
description="Add a link to your website, listing page or contact form"
/>
<div class="grid grid-cols-12 w-full space-x-4">
<x-ui.button variant="neutral" class="col-span-10">Submit</x-ui.button>
<a href="{{route('broker.dashboard')}}"
class="ui-btn border border-accent-600/20 col-span-2">Cancel</a>
<div class="grid md:grid-cols-12 w-full gap-4">
<x-ui.button variant="neutral" class="md:col-span-10">Submit</x-ui.button>
<x-ui.button link="{{route('broker.dashboard')}}" class="border border-accent-600/20 md:col-span-2">
Cancel
</x-ui.button>
</div>
</form>
</x-dashboard.card>

5
resources/views/dashboards/broker/deals/edit.blade.php
View File

@ -8,9 +8,8 @@
/>
</x-slot:heading>
<div class="flex items-center justify-center mt-8">
<x-dashboard.card class="w-11/12 md:w-8/12">
<div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
<x-dashboard.card class="w-full">
<h3 class="text-md font-bold">Deal Information</h3>
<form method="post" enctype="multipart/form-data" action="{{route('broker.deals.update', $deal)}}"
class="flex flex-col space-y-8 mt-4">

10
resources/views/dashboards/broker/profile/edit.blade.php
View File

@ -6,8 +6,8 @@
:back-link="route('broker.profile.show', $profile)"
/>
</x-slot:heading>
<div class="flex items-center justify-center">
<x-dashboard.card class="w-8/12">
<div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
<x-dashboard.card class="w-full">
<h3 class="text-md font-bold">Profile Information</h3>
<form method="post" enctype="multipart/form-data" action="{{route('broker.profile.update', $profile)}}"
class="flex flex-col space-y-8 mt-4">
@ -27,10 +27,10 @@ class="flex flex-col space-y-8 mt-4">
<x-ui.input name="location" label="Location" :value="$broker->location" required
placeholder="Kolkata, India"/>
<div class="grid grid-cols-12 w-full space-x-4">
<x-ui.button variant="neutral" class="col-span-10">Update</x-ui.button>
<div class="grid md:grid-cols-12 w-full gap-4">
<x-ui.button variant="neutral" class="md:col-span-10">Update</x-ui.button>
<x-ui.button :link="route('broker.profile.show', $profile)"
class=" border border-accent-600/20 col-span-2">Cancel
class=" border border-accent-600/20 md:col-span-2">Cancel
</x-ui.button>
</div>
</form>

4
resources/views/dashboards/broker/profile/show.blade.php
View File

@ -16,8 +16,8 @@ class="border border-accent-600/40">
</x-dashboard.page-heading>
</x-slot:heading>
<div class="flex items-center justify-center">
<div class="flex items-center justify-center w-11/12 md:w-10/12">
<div class="flex items-center justify-center px-4 pb-4 pt-0 md:px-8 md:pb-8">
<div class="flex items-center justify-center w-full">
<x-dashboard.card class="w-full">
<div class="grid grid-cols-8 gap-6">