remco/Atomcms-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete Hubbly theme conversion: all pages rewritten with CSS variable theming

Browse Source 
- 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
This commit is contained in:
root
2026-06-27 17:01:02 +02:00
parent 61bb70ac1d
commit c53a5a8a2c
68 changed files with 4708 additions and 4608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/themes/atom/views/components/photos.blade.php
+23 -22
View File
@@ -3,32 +3,33 @@
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5">
@forelse ($photos as $photo)
<a href="{{ $photo->url }}" data-fancybox="gallery" class="group cursor-pointer block">
<div class="relative rounded-lg overflow-hidden shadow-md border border-gray-600 hover:border-[#eeb425] transition-all duration-300">
<div class="aspect-[4/3] relative overflow-hidden">
<img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
src="{{ $photo->url }}"
alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
<div class="flex items-center gap-2">
<div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-gray-700 border border-gray-500">
<img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
alt="{{ $photo->user?->username ?? 'Unknown' }}"
class="h-full w-full object-cover">
</div>
<div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold truncate ">{{ $photo->user?->username ?? __('Unknown') }}</p>
</div>
</div>
</div>
<div class="relative rounded-lg overflow-hidden shadow-md transition-all duration-300 group-hover:shadow-lg"
style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
<div class="aspect-[4/3] relative overflow-hidden">
<img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
src="{{ $photo->url }}"
alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
<div class="flex items-center gap-2">
<div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);">
<img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml"
alt="{{ $photo->user?->username ?? 'Unknown' }}"
class="h-full w-full object-cover">
</div>
<div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold truncate">{{ $photo->user?->username ?? __('Unknown') }}</p>
</div>
</div>
</div>
</div>
</a>
@empty
<div class="col-span-full text-center py-8">
<p class="text-gray-500 dark:text-gray-400">No photos available</p>
<p style="color: var(--color-text-muted);">{{ __('No photos available') }}</p>
</div>
@endforelse
</div>