fix: listing card ui

- fixed the issue on when a card's title gets in two line, it adds space on other cards
This commit is contained in:
kusowl 2026-01-13 15:46:11 +05:30
parent 8d0c8c25d9
commit cdcb75cb58
2 changed files with 21 additions and 19 deletions

View File

@ -1,15 +1,15 @@
@props(['id' => '', 'image' => '', 'title' => '', 'category' => '', 'impressions' => 0, 'likes' => 0, 'clicks' => 0, 'status' => false, 'external_link' => '']) @props(['id' => '', 'image' => '', 'title' => '', 'category' => '', 'impressions' => 0, 'likes' => 0, 'clicks' => 0, 'status' => false, 'external_link' => ''])
<x-ui.image-card :image="$image"> <x-ui.image-card :image="$image">
<div class="bg-white pt-8 p-4 space-y-4"> <div class="bg-white pt-8 p-4 h-full space-y-4 flex flex-col justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-start">
<div class="flex items-center space-x-1 mr-2"> <div class="flex items-start space-x-1 mr-2">
<p class="font-bold text-lg">{{$title}}</p> <p class="font-bold text-lg ">{{$title}}</p>
@if($external_link !== '') @if($external_link !== '')
<a href="{{$external_link}}" target="_blank" title="{{$external_link}}" <a href="{{$external_link}}" target="_blank" title="{{$external_link}}"
class="text-xs underline text-accent-601"> class="text-xs underline text-accent-601 mt-1">
<x-heroicon-o-arrow-top-right-on-square class="w-4 stroke-2 "/> <x-heroicon-o-arrow-top-right-on-square class="w-4 stroke-2 "/>
</a> </a>
@endif @endif
@ -24,19 +24,21 @@ class="text-xs underline text-accent-601">
</div> </div>
<p class="text-accent-600">{{$category}}</p> <div class="flex flex-col space-y-4">
<p class="text-accent-600">{{$category}}</p>
<x-dashboard.listing-stats :impression="$impressions" :likes="$likes" :clicks="$clicks"/> <x-dashboard.listing-stats :impression="$impressions" :likes="$likes" :clicks="$clicks"/>
<div class="flex justify-between space-x-4"> <div class="flex justify-between space-x-4">
<x-ui.button :link="route('broker.deals.edit', $id)" class="w-full border border-accent-600/30" <x-ui.button :link="route('broker.deals.edit', $id)" class="w-full border border-accent-600/30"
icon="pencil-square">Edit icon="pencil-square">Edit
</x-ui.button> </x-ui.button>
<form class="w-full" method="post" action="{{route('broker.deals.destroy', $id)}}"> <form class="w-full" method="post" action="{{route('broker.deals.destroy', $id)}}">
@csrf @csrf
@method("DELETE") @method("DELETE")
<x-ui.button variant="red" class="w-full" icon="trash">Delete</x-ui.button> <x-ui.button variant="red" class="w-full" icon="trash">Delete</x-ui.button>
</form> </form>
</div>
</div> </div>
</div> </div>

View File

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