soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: frontend optimierungen & sprachkorrekturen

Browse Source
This commit is contained in:
soeren
2025-11-13 19:55:50 +01:00
parent cf41055cbd
commit 3f52f124ef
11 changed files with 136 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/Components/GalleryGrid.vue
View File

@@ -2,19 +2,19 @@
<div class="space-y-4">
<p
v-if="!images.length"
class="rounded-3xl border border-dashed border-white/20 bg-white/5 px-4 py-10 text-center text-sm text-slate-300"
class="rounded-3xl border border-dashed border-slate-300 bg-white px-4 py-10 text-center text-sm text-slate-500 dark:border-white/20 dark:bg-white/5 dark:text-slate-300"
>
{{ props.translations.empty_gallery || 'Noch keine Bilder vorhanden.' }}
{{ __('api.gallery.empty') }}
</p>
<div
v-else
class="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 xl:grid-cols-4 2xl:grid-cols-5"
class="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-5 xl:grid-cols-4 2xl:grid-cols-5"
>
<button
v-for="image in images"
:key="image.id ?? image.name"
type="button"
class="group relative aspect-[3/4] overflow-hidden rounded-[1.75rem] border border-white/10 bg-slate-900/30 shadow-2xl ring-1 ring-white/5 transition-all hover:border-emerald-300 focus:outline-none focus-visible:ring-4 focus-visible:ring-emerald-400"
class="group relative aspect-[4/3] overflow-hidden rounded-[1.75rem] border border-slate-200 bg-white shadow-2xl ring-1 ring-slate-100 transition-all hover:border-emerald-300 focus:outline-none focus-visible:ring-4 focus-visible:ring-emerald-400 dark:border-white/10 dark:bg-slate-900/30 dark:ring-white/5"
@click="$emit('imageTapped', image, $event)"
:aria-label="fallbackLabel(image)"
>
@@ -31,9 +31,9 @@
<span class="h-1.5 w-1.5 rounded-full bg-emerald-800"></span>
{{ __('new') }}
</span>
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent p-4 text-left">
<p class="text-base font-semibold text-white drop-shadow">{{ fallbackLabel(image) }}</p>
<p class="text-xs uppercase tracking-[0.3em] text-white/70">Tap to open</p>
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 via-slate-900/10 to-transparent p-4 text-left text-white">
<p class="text-base font-semibold drop-shadow">{{ fallbackLabel(image) }}</p>
<p class="text-xs uppercase tracking-[0.3em] text-white/70">{{ __('api.gallery.tap_to_open') }}</p>
</div>
</button>
</div>
@@ -48,17 +48,9 @@ const props = defineProps({
type: Array,
required: true,
},
translations: {
type: Object,
required: true,
},
});
const emits = defineEmits(['imageTapped']);
const __ = (key) => {
return props.translations[key] || key;
};
const fallbackLabel = (image) => image?.name || props.translations.image || 'Bild';
const fallbackLabel = (image) => image?.name || 'Bild';
</script>