You've already forked Atomcms-edit
root
46 lines
1.6 KiB
PHP
Executable File
46 lines
1.6 KiB
PHP
Executable File
@props(['article', 'forSlider' => false])
|
|
|
|
<div @class([
|
|
'h-[180px] md:h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200',
|
|
'hover:scale-[101%]' => !$forSlider,
|
|
'swiper-slide group' => $forSlider,
|
|
]) style="background-color: var(--color-surface)"
|
|
@if (!$forSlider)
|
|
onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
|
|
@endif>
|
|
<a href="{{ route('article.show', $article->slug) }}">
|
|
<div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
|
|
</div>
|
|
|
|
<div class="mt-3 md:mt-4 px-3 md:px-4">
|
|
<p @class([
|
|
'font-semibold text-base md:text-lg truncate',
|
|
'group-hover:text-[var(--color-primary)] transition duration-200' => $forSlider,
|
|
]) >
|
|
{{ $article->title }}
|
|
</p>
|
|
|
|
<div class="flex items-center gap-x-2">
|
|
<div
|
|
class="mt-2 md:mt-3 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background)">
|
|
<img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
|
|
</div>
|
|
|
|
<p class="mt-2 md:mt-4 font-semibold text-sm md:text-base" style="color: var(--color-text-muted)">
|
|
{{ $article->user->username ?? setting('hotel_name') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
function slideImage(articleId) {
|
|
document.getElementById('article-' + articleId).classList.add('article-image-slide');
|
|
}
|
|
|
|
function unslideImage(articleId) {
|
|
document.getElementById('article-' + articleId).classList.remove('article-image-slide');
|
|
}
|
|
</script>
|