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
137 lines
6.0 KiB
PHP
Executable File
137 lines
6.0 KiB
PHP
Executable File
<x-app-layout>
|
|
@push('title', __('Teams'))
|
|
|
|
<div
|
|
x-data="{ q: '', hideEmpty: false }"
|
|
class="col-span-12 lg:col-span-9"
|
|
>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
|
|
<h1 class="text-2xl font-semibold tracking-tight" style="color: var(--color-text)">{{ __('Teams') }}</h1>
|
|
|
|
<div class="flex w-full flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center">
|
|
<div class="relative sm:w-80">
|
|
<input
|
|
x-model="q"
|
|
type="text"
|
|
placeholder="{{ __('Search teams...') }}"
|
|
class="w-full rounded-xl border px-4 py-2.5 pr-10 text-sm focus:outline-none focus:ring-0"
|
|
style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color);"
|
|
/>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-60"
|
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m21 21-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<label class="inline-flex items-center gap-2 text-sm" style="color: var(--color-text)">
|
|
<input type="checkbox" x-model="hideEmpty"
|
|
class="rounded border-gray-300 text-[var(--color-primary)] focus:ring-[var(--color-primary)]" />
|
|
<span class="select-none">{{ __('Hide empty teams') }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-4">
|
|
@forelse ($employees as $employee)
|
|
@php
|
|
$sectionColor = $employee->staff_color ?? '#eeb425';
|
|
$users = $employee->users ?? collect();
|
|
$memberCount = $users->count();
|
|
$searchText = trim(($employee->rank_name ?? '') . ' ' . ($employee->job_description ?? ''));
|
|
@endphp
|
|
|
|
<section
|
|
x-data="{
|
|
name: @js($searchText),
|
|
hasMembers: {{ $memberCount > 0 ? 'true' : 'false' }}
|
|
}"
|
|
x-show="(name.toLowerCase().includes(q.toLowerCase())) && (!hideEmpty || hasMembers)"
|
|
x-cloak
|
|
class="rounded-lg overflow-hidden w-full"
|
|
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);"
|
|
>
|
|
<div class="relative w-full overflow-hidden">
|
|
<div class="rank-header">
|
|
<div class="relative w-full"
|
|
style="background: linear-gradient(140deg, {{ $sectionColor }} 0%, color-mix(in srgb, {{ $sectionColor }} 80%, black) 100%);">
|
|
<div class="flex items-center justify-start h-full relative">
|
|
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ $employee->rank_name }}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-4 pt-3">
|
|
@if($employee->job_description)
|
|
<p class="text-sm" style="color: var(--color-text-muted);">{{ $employee->job_description }}</p>
|
|
@else
|
|
<span></span>
|
|
@endif
|
|
<span class="shrink-0 rounded-full border px-3 py-1 text-xs font-medium" style="border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent); color: var(--color-text-muted);">
|
|
{{ $memberCount }} {{ \Illuminate\Support\Str::plural(__('member'), $memberCount) }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($memberCount > 0)
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
|
|
@foreach ($users as $staff)
|
|
<x-community.staff-card :user="$staff" />
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="text-center py-16">
|
|
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('We currently have no staff in this team') }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
@empty
|
|
<div class="w-full">
|
|
<div class="rounded-lg overflow-hidden text-center py-16"
|
|
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
|
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('There are no teams to display right now.') }}</p>
|
|
<p class="text-sm mt-2" style="color: var(--color-text-muted);">{{ __('Please check back later.') }}</p>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12 lg:col-span-3 space-y-4">
|
|
<div class="rounded-lg overflow-hidden"
|
|
style="background-color: var(--color-surface, #ffffff); 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, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%);">
|
|
<div class="flex items-center justify-center h-full">
|
|
<h2 class="text-white font-bold text-xl">{{ setting('hotel_name') }} {{ __('Teams') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('About our teams') }}</p>
|
|
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
|
<p>{{ __('Our teams are groups of dedicated players who work together to make :hotel a better place for everyone.', ['hotel' => setting('hotel_name')]) }}</p>
|
|
<p>{{ __('Each team has its own role and responsibilities, from welcoming new players to organizing events and keeping the hotel running smoothly.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg overflow-hidden"
|
|
style="background-color: var(--color-surface, #ffffff); 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, #1a5c3a 0%, #1e6e42 20%, #2a8050 40%, #3a9060 60%, #4aa070 75%, #3a9060 90%, #2a8050 100%);">
|
|
<div class="flex items-center justify-center h-full">
|
|
<h2 class="text-white font-bold text-xl">{{ __('Join a Team') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('Become a team member') }}</p>
|
|
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
|
<p>{{ __('Want to get more involved? Team applications open periodically and are announced via news articles on the hotel.') }}</p>
|
|
<p>{{ __('Keep an eye out for announcements if you are interested in joining one of our teams!') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</x-app-layout>
|