You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- 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
@@ -1,17 +1,73 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Articles'))
|
||||
@push('title', __('Articles'))
|
||||
|
||||
<div class="col-span-12">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" />
|
||||
@empty
|
||||
<x-filler-article-card />
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="col-span-12">
|
||||
<div class="flex justify-center col-span-12 gap-3">
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-white dark:bg-gray-800" style="border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000) 100%);">
|
||||
<div class="flex items-center justify-center h-full relative">
|
||||
<span class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ __('The Hubbly Newsie') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 relative">
|
||||
<div class="mb-6 rounded-lg p-4" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold" style="color: var(--color-text)">{{ __('Newsie Directory') }}</h3>
|
||||
<p class="mt-1 text-sm" style="color: var(--color-text-muted)">{{ __('Filter newsie by category or search for a specific article...') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="w-48 ml-auto">
|
||||
<div class="relative">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="h-5 w-5" style="color: var(--color-text-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<form method="GET" action="{{ route('article.index') }}">
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="{{ __('Search articles...') }}"
|
||||
style="text-indent: 25px;"
|
||||
class="block w-full rounded-lg border py-2.5 pl-10 pr-12 text-sm focus:ring-0"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
@if(request('search'))
|
||||
<a href="{{ route('article.index') }}" class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer" style="color: var(--color-text-muted)">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="articles-container">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
|
||||
@forelse($articles as $article)
|
||||
<x-article-card :article="$article" />
|
||||
@empty
|
||||
<div class="col-span-3 text-center py-12">
|
||||
<p class="text-lg" style="color: var(--color-text-muted)">{{ __('No articles found.') }}</p>
|
||||
@if(request('search'))
|
||||
<a href="{{ route('article.index') }}" class="mt-2 inline-block text-sm hover:underline" style="color: var(--color-primary)">{{ __('Clear search') }}</a>
|
||||
@endif
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(method_exists($articles, 'links'))
|
||||
<div id="pagination-container" class="mt-8">
|
||||
<div class="flex justify-center">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user