vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(assets): touch-friendly gallery card actions on mobile

Browse source 
Uploads/Unsplash/Giphy card actions are visible on touch instead of hover-only, without the dark scrim on small screens.
This commit is contained in:
Paulo Castellano 2026-07-17 18:38:20 -03:00
parent b7b3809790
commit ccf888258d
2 changed files with 42 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/js/components/assets/GalleryBrowser.vue
View file

@ -700,7 +700,7 @@ onUnmounted(() => {
<div
v-if="!isPicker"
class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100"
class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100"
>
<div class="flex justify-end gap-1.5">
<TooltipProvider>
@ -717,6 +717,7 @@ onUnmounted(() => {
variant="outline"
size="icon"
class="size-8 bg-rose-100 hover:bg-rose-200"
data-testid="gallery-asset-delete"
@click.stop="handleDelete(asset.id)"
>
<IconTrash class="size-4 text-rose-700" />
@ -771,7 +772,7 @@ onUnmounted(() => {
/>
</div>
<div class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100">
<div class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100">
<div class="flex justify-end gap-1.5">
<TooltipProvider v-if="!isPicker">
<Tooltip>
@ -868,7 +869,7 @@ onUnmounted(() => {
<img :src="gif.url_preview" :alt="gif.title || 'GIF'" class="size-full object-cover" loading="lazy" />
</div>
<div class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100">
<div class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100">
<div class="flex justify-end gap-1.5">
<TooltipProvider v-if="!isPicker">
<Tooltip>

38
tests/Browser/MobileGalleryTest.php Normal file
View file

@ -0,0 +1,38 @@
<?php
declare(strict_types=1);
use App\Enums\UserWorkspace\Role;
use App\Models\Media;
use App\Models\User;
use App\Models\Workspace;
test('gallery upload card actions are visible on a phone without hover', function () {
$user = User::factory()->create();
$workspace = Workspace::factory()->create(['user_id' => $user->id]);
$workspace->members()->attach($user->id, ['role' => Role::Member->value]);
$user->update(['current_workspace_id' => $workspace->id]);
Media::factory()->for($workspace, 'mediable')->create([
'collection' => 'assets',
'original_filename' => 'on-the-go.jpg',
]);
$this->actingAs($user);
$page = visit(route('app.assets.index'))->resize(375, 812);
// Uploads are fetched async after mount; settle before asserting.
$page->script(<<<'JS'
(async () => {
const sel = '[data-testid="gallery-asset-delete"]';
for (let i = 0; i < 100; i++) {
const el = document.querySelector(sel);
if (el && el.getBoundingClientRect().height > 0) return;
await new Promise((r) => setTimeout(r, 50));
}
})();
JS);
$page->assertVisible('@gallery-asset-delete');
});