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/room/index.blade.php
+34 -42
View File
@@ -28,7 +28,7 @@
</div>
</div>
</div>
<div class="text-[var(--color-text)]">
<div style="color: var(--color-text);">
<h5 class="text-xl font-bold">{{ $room->name }}</h5>
<a class="flex items-center" href="/profile/{{ $room->owner->username }}">
<img class="h-12" src="{{ setting('avatar_imager') }}{{ $room->owner->look }}&direction=2&headonly=1&head_direction=2&gesture=sml" alt="{{ $room->owner->username }}">
@@ -43,49 +43,41 @@
<div class="col-span-12 md:col-span-4">
<div class="grid grid-cols-1 gap-y-2">
<div class="shadow border dark:border-gray-900">
<div class="flex gap-x-2 rounded-t border-b bg-[var(--color-surface)] p-3 border-[var(--color-text-muted)]">
<p class="font-semibold text-[var(--color-text)]">
{{ __('Room details') }}
</p>
</div>
<section class="rounded-b bg-[var(--color-surface)] p-3 text-[var(--color-text)]">
<p>
<span class="font-semibold">{{ __('Max users:') }} </span>
{{ $room->users_max }}
</p>
@if (strlen($room->tags) > 0)
<p>
<span class="font-semibold">Tags: </span>
@foreach (explode(";", $room->tags) as $tag)
@if (empty($tag) === false)
<span class="rounded bg-[var(--color-background)] px-2">{{ $tag }}</span>
@endif
@endforeach
</p>
@endif
</section>
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
<div class="flex items-center h-full px-4 gap-3">
<h2 class="text-white font-bold text-lg">{{ __('Room details') }}</h2>
</div>
</div>
<div class="p-4 text-sm" style="color: var(--color-text);">
<p>
<span class="font-semibold">{{ __('Max users:') }} </span>
{{ $room->users_max }}
</p>
@if (strlen($room->tags) > 0)
<p>
<span class="font-semibold">Tags: </span>
@foreach (explode(";", $room->tags) as $tag)
@if (empty($tag) === false)
<span class="rounded px-2" style="background-color: var(--color-background); color: var(--color-text);">{{ $tag }}</span>
@endif
@endforeach
</p>
@endif
</div>
</div>
@if ($room->guild !== null)
<x-content.content-card icon="{{ $room->guild->badge }}-icon" classes="border dark:border-gray-900">
<x-slot:title>
{{ __('The room guild') }}
</x-slot:title>
<x-slot:under-title>
{{ $room->guild->name }}
</x-slot:under-title>
<p class="text-[14px] text-[var(--color-text-muted)]">
{{ $room->guild->description }}
</p>
</x-content.content-card>
<style>
.{{ $room->guild->badge }}-icon {
background: #f68b08 url("/client/flash/c_images/Badgeparts/generated/{{ $room->guild->badge }}.png") no-repeat center;
}
</style>
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
<div class="flex items-center h-full px-4 gap-3">
<h2 class="text-white font-bold text-lg">{{ __('The room guild') }}</h2>
</div>
</div>
<div class="p-4">
<p class="text-sm font-semibold mb-1" style="color: var(--color-text);">{{ $room->guild->name }}</p>
<p class="text-sm" style="color: var(--color-text-muted);">{{ $room->guild->description }}</p>
</div>
</div>
@endif
</div>
</div>