🌍 Replace emoji flags with scalable SVG country flags across dashboard views for improved accessibility and consistency

This commit is contained in:
HolgerHatGarKeineNode
2025-12-05 21:51:45 +01:00
parent 7b5c8c5afa
commit 4d01f21747
3 changed files with 35 additions and 5 deletions

View File

@@ -93,8 +93,16 @@ class extends Component {
<a href="{{ route('meetups.landingpage-event', ['meetup' => $event->meetup->slug, 'event' => $event->id, 'country' => $event->meetup->city->country->code]) }}" <a href="{{ route('meetups.landingpage-event', ['meetup' => $event->meetup->slug, 'event' => $event->id, 'country' => $event->meetup->city->country->code]) }}"
class="block hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg p-3 -m-3 transition-colors"> class="block hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg p-3 -m-3 transition-colors">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<flux:avatar size="xl" :src="$event->meetup->getFirstMediaUrl('logo', 'thumb')"/>
<div class="flex-1"> <div class="flex-1">
<div class="font-medium">{{ $event->meetup->name }}</div> <div class="flex items-center space-x-2">
<div class="font-medium">{{ $event->meetup->name }}</div>
<img
alt="{{ strtolower($event->meetup->city->country->code) }}"
src="{{ asset('vendor/blade-flags/country-'.strtolower($event->meetup->city->country->code).'.svg') }}"
width="24" height="12"
/>
</div>
<div class="text-sm text-zinc-500"> <div class="text-sm text-zinc-500">
{{ $event->meetup->city->name }}, {{ $event->meetup->city->country->name }} {{ $event->meetup->city->name }}, {{ $event->meetup->city->country->name }}
</div> </div>
@@ -150,7 +158,14 @@ class extends Component {
src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/> src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/>
<a href="{{ route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country]) }}"> <a href="{{ route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country]) }}">
<div> <div>
<div class="font-medium">{{ $meetup->name }}</div> <div class="flex items-center space-x-2">
<div class="font-medium">{{ $meetup->name }}</div>
<img
alt="{{ strtolower($event->meetup->city->country->code) }}"
src="{{ asset('vendor/blade-flags/country-'.strtolower($event->meetup->city->country->code).'.svg') }}"
width="24" height="12"
/>
</div>
<div class="text-xs text-zinc-500"> <div class="text-xs text-zinc-500">
{{ $meetup->city->name }} {{ $meetup->city->name }}
</div> </div>

View File

@@ -72,7 +72,11 @@ class extends Component {
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<flux:badge color="green" size="sm">{{ __('Neues Meetup') }}</flux:badge> <flux:badge color="green" size="sm">{{ __('Neues Meetup') }}</flux:badge>
<span class="text-2xl">{{ $meetup->city->country->emoji }}</span> <img
alt="{{ strtolower($meetup->city->country->code) }}"
src="{{ asset('vendor/blade-flags/country-'.strtolower($meetup->city->country->code).'.svg') }}"
width="24" height="12"
/>
</div> </div>
<div class="font-medium mt-1">{{ $meetup->name }}</div> <div class="font-medium mt-1">{{ $meetup->name }}</div>
<div class="text-xs text-zinc-500"> <div class="text-xs text-zinc-500">
@@ -95,7 +99,11 @@ class extends Component {
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<flux:badge color="blue" size="sm">{{ __('Neuer Termin') }}</flux:badge> <flux:badge color="blue" size="sm">{{ __('Neuer Termin') }}</flux:badge>
<span class="text-2xl">{{ $event->meetup->city->country->emoji }}</span> <img
alt="{{ strtolower($event->meetup->city->country->code) }}"
src="{{ asset('vendor/blade-flags/country-'.strtolower($event->meetup->city->country->code).'.svg') }}"
width="24" height="12"
/>
</div> </div>
<div class="font-medium mt-1">{{ $event->meetup->name }}</div> <div class="font-medium mt-1">{{ $event->meetup->name }}</div>
<div class="text-xs text-zinc-500"> <div class="text-xs text-zinc-500">

View File

@@ -94,7 +94,14 @@ class extends Component {
src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/> src="{{ $meetup->getFirstMedia('logo') ? $meetup->getFirstMediaUrl('logo', 'thumb') : asset('android-chrome-512x512.png') }}"/>
<div class="flex-1"> <div class="flex-1">
<div class="font-medium">{{ $meetup->name }}</div> <div class="font-medium">{{ $meetup->name }}</div>
<div class="text-xs text-zinc-500">{{ $meetup->users_count }} {{ __('User') }}</div> <div class="flex items-center space-x-2">
<div class="text-xs text-zinc-500">{{ $meetup->users_count }} {{ __('User') }}</div>
<img
alt="{{ strtolower($meetup->city->country->code) }}"
src="{{ asset('vendor/blade-flags/country-'.strtolower($meetup->city->country->code).'.svg') }}"
width="12" height="6"
/>
</div>
</div> </div>
</div> </div>
<flux:chart :value="$meetup->sparkline" class="w-[5rem] aspect-[3/1]"> <flux:chart :value="$meetup->sparkline" class="w-[5rem] aspect-[3/1]">