You've already forked Atomcms-edit
root
c53a5a8a2c
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
29 lines
1.5 KiB
PHP
Executable File
29 lines
1.5 KiB
PHP
Executable File
@props(['article', 'forSlider' => false])
|
|
|
|
<div @class([
|
|
'group rounded w-full relative overflow-hidden transition ease-in-out duration-200',
|
|
'hover:scale-[101%]' => !$forSlider,
|
|
'swiper-slide' => $forSlider,
|
|
]) style="height: 215px; background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
|
<div class="relative w-full h-full overflow-hidden rounded-[6px]">
|
|
<a href="{{ route('article.show', $article->slug ?? $article->id) }}" class="block w-full h-full">
|
|
<img src="{{ $article->image ? '/storage/' . $article->image : '' }}"
|
|
onerror="this.parentElement.style.background='var(--color-surface)';this.style.display='none';"
|
|
alt="{{ $article->title }}"
|
|
class="object-cover w-full h-full transition-all duration-300 rounded-[6px] hover:scale-105"
|
|
loading="lazy">
|
|
|
|
<div class="absolute left-0 w-full p-2" style="bottom: -2px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);">
|
|
<h3 class="text-lg font-semibold text-white text-shadow-sm truncate">
|
|
{{ $article->title }}
|
|
</h3>
|
|
@if($article->short_story)
|
|
<p class="text-xs font-normal text-white text-shadow-sm truncate">
|
|
{{ Str::limit($article->short_story, 80) }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|