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:
parent
8d0c8c25d9
commit
cdcb75cb58
@ -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,6 +24,7 @@ class="text-xs underline text-accent-601">
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
<p class="text-accent-600">{{$category}}</p>
|
<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"/>
|
||||||
@ -38,6 +39,7 @@ class="text-xs underline text-accent-601">
|
|||||||
<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>
|
||||||
</x-ui.image-card>
|
</x-ui.image-card>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user