Improve UI consistency across components

This commit is contained in:
HolgerHatGarKeineNode
2025-11-21 17:37:26 +01:00
parent 6acbd218da
commit 09f9a53144
5 changed files with 63 additions and 48 deletions

View File

@@ -75,13 +75,13 @@ new class extends Component {
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
@if($city->createdBy) @if($city->createdBy)
{{ $city->createdBy->name }} {{ Str::limit($city->createdBy->name, 30) }}
@endif @endif
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
<div class="flex gap-2"> <div class="flex gap-2">
@auth @auth
<flux:button size="sm" :href="route('cities.edit',['city' => $city, 'country' => $country])" icon="pencil"> <flux:button size="xs" :href="route('cities.edit',['city' => $city, 'country' => $country])" icon="pencil">
{{ __('Edit') }} {{ __('Edit') }}
</flux:button> </flux:button>
@endauth @endauth

View File

@@ -64,19 +64,23 @@ new class extends Component {
<flux:table.rows> <flux:table.rows>
@foreach ($courses as $course) @foreach ($courses as $course)
<flux:table.row :key="$course->id"> <flux:table.row :key="$course->id">
<flux:table.cell variant="strong" class="flex items-center gap-3"> <flux:table.cell variant="strong">
<flux:avatar :href="route('courses.landingpage', ['course' => $course, 'country' => $country])" <flux:tooltip content="{{ $course->name }}">
src="{{ $course->getFirstMedia('logo') ? $course->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/> <div class="flex items-center gap-3">
<div> <flux:avatar :href="route('courses.landingpage', ['course' => $course, 'country' => $country])"
<a href="{{ route('courses.landingpage', ['course' => $course, 'country' => $country]) }}"> src="{{ $course->getFirstMedia('logo') ? $course->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/>
<span>{{ $course->name }}</span> <div>
@if($course->description) <a href="{{ route('courses.landingpage', ['course' => $course, 'country' => $country]) }}">
<div class="text-xs text-zinc-500"> <span>{{ Str::limit($course->name, 30) }}</span>
{{ Str::limit($course->description, 60) }} @if($course->description)
</div> <div class="text-xs text-zinc-500">
@endif {{ Str::limit($course->description, 60) }}
</a> </div>
</div> @endif
</a>
</div>
</div>
</flux:tooltip>
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
@@ -104,22 +108,28 @@ new class extends Component {
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
<flux:button <div class="flex flex-col space-y-2">
:disabled="$course->created_by !== auth()->id()" <div>
:href="$course->created_by === auth()->id() ? route_with_country('courses.edit', ['course' => $course]) : null" <flux:button
size="xs" :disabled="$course->created_by !== auth()->id()"
variant="filled" :href="$course->created_by === auth()->id() ? route_with_country('courses.edit', ['course' => $course]) : null"
icon="pencil"> size="xs"
{{ __('Bearbeiten') }} variant="filled"
</flux:button> icon="pencil">
<flux:button {{ __('Bearbeiten') }}
:disabled="$course->created_by !== auth()->id()" </flux:button>
:href="$course->created_by === auth()->id() ? route_with_country('courses.events.create', ['course' => $course]) : null" </div>
size="xs" <div>
variant="filled" <flux:button
icon="calendar"> :disabled="$course->created_by !== auth()->id()"
{{ __('Neues Event erstellen') }} :href="$course->created_by === auth()->id() ? route_with_country('courses.events.create', ['course' => $course]) : null"
</flux:button> size="xs"
variant="filled"
icon="calendar">
{{ __('Neues Event erstellen') }}
</flux:button>
</div>
</div>
</flux:table.cell> </flux:table.cell>
</flux:table.row> </flux:table.row>
@endforeach @endforeach

View File

@@ -65,7 +65,7 @@ new class extends Component {
}; ?> }; ?>
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl"> <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
<div class="grid auto-rows-min gap-4 md:grid-cols-3"> <div class="grid auto-rows-min gap-4 grid-cols-1 md:grid-cols-2 2xl:grid-cols-3">
<div class="relative overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700"> <div class="relative overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<div class="p-6"> <div class="p-6">
<flux:heading size="lg" class="mb-4">{{ __('Meine nächsten Meetup Termine') }}</flux:heading> <flux:heading size="lg" class="mb-4">{{ __('Meine nächsten Meetup Termine') }}</flux:heading>
@@ -93,7 +93,7 @@ new class extends Component {
@endif @endif
</div> </div>
</div> </div>
<div class="relative overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700"> <div class="2xl:col-span-2 relative overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<div class="p-6"> <div class="p-6">
<flux:heading size="lg" class="mb-4">{{ __('Meine Meetups') }}</flux:heading> <flux:heading size="lg" class="mb-4">{{ __('Meine Meetups') }}</flux:heading>
@@ -170,7 +170,4 @@ new class extends Component {
</div> </div>
</div> </div>
</div> </div>
{{--<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>--}}
</div> </div>

View File

@@ -70,7 +70,9 @@ new class extends Component {
@foreach ($meetups as $meetup) @foreach ($meetups as $meetup)
<flux:table.row :key="$meetup->id"> <flux:table.row :key="$meetup->id">
<flux:table.cell variant="strong" class="flex items-center gap-3"> <flux:table.cell variant="strong" class="flex items-center gap-3">
<flux:avatar :href="route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country])" src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/> <flux:avatar
class="[:where(&)]:size-24 [:where(&)]:text-base" size="xl"
:href="route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country])" src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/>
<div> <div>
@if($meetup->city) @if($meetup->city)
<a href="{{ route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country]) }}"> <a href="{{ route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country]) }}">
@@ -145,15 +147,21 @@ new class extends Component {
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
<flux:button <div class="flex flex-col space-y-2">
:disabled="!$meetup->belongsToMe" <div>
:href="$meetup->belongsToMe ? route_with_country('meetups.edit', ['meetup' => $meetup]) : null" size="xs" <flux:button
variant="filled" icon="pencil"> :disabled="!$meetup->belongsToMe"
{{ __('Bearbeiten') }} :href="$meetup->belongsToMe ? route_with_country('meetups.edit', ['meetup' => $meetup]) : null" size="xs"
</flux:button> variant="filled" icon="pencil">
<flux:button :href="route_with_country('meetups.events.create', ['meetup' => $meetup])" size="xs" variant="filled" icon="calendar"> {{ __('Bearbeiten') }}
{{ __('Neues Event erstellen') }} </flux:button>
</flux:button> </div>
<div>
<flux:button :href="route_with_country('meetups.events.create', ['meetup' => $meetup])" size="xs" variant="filled" icon="calendar">
{{ __('Neues Event erstellen') }}
</flux:button>
</div>
</div>
</flux:table.cell> </flux:table.cell>
</flux:table.row> </flux:table.row>
@endforeach @endforeach

View File

@@ -69,13 +69,13 @@ new class extends Component {
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
@if($venue->createdBy) @if($venue->createdBy)
{{ $venue->createdBy->name }} {{ Str::limit($venue->createdBy->name, 30) }}
@endif @endif
</flux:table.cell> </flux:table.cell>
<flux:table.cell> <flux:table.cell>
<div class="flex gap-2"> <div class="flex gap-2">
@auth @auth
<flux:button size="sm" :href="route('venues.edit', ['venue' => $venue, 'country' => $country])" icon="pencil"> <flux:button size="xs" :href="route('venues.edit', ['venue' => $venue, 'country' => $country])" icon="pencil">
{{ __('Edit') }} {{ __('Edit') }}
</flux:button> </flux:button>
@endauth @endauth