feat(web): improve shared link management on mobile (#11720)

* feat(web): improve shared link management on mobile

* fix format
This commit is contained in:
Michel Heusschen 2024-08-13 16:37:47 +02:00 committed by GitHub
parent 9837d60074
commit 276101ee82
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 174 additions and 121 deletions

View file

@ -13,6 +13,6 @@ describe('AssetCover component', () => {
expect(img.alt).toBe('123');
expect(img.getAttribute('src')).toBe('wee');
expect(img.getAttribute('loading')).toBe('eager');
expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
});
});

View file

@ -10,7 +10,7 @@ describe('NoCover component', () => {
});
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('123');
expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
expect(img.getAttribute('loading')).toBe('eager');
expect(img.src).toStrictEqual(expect.any(String));
});

View file

@ -17,7 +17,7 @@ describe('ShareCover component', () => {
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('123');
expect(img.getAttribute('loading')).toBe('lazy');
expect(img.className).toBe('z-0 rounded-xl object-cover text');
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
});
it('renders an image when the shared link is an individual share', () => {
@ -30,7 +30,7 @@ describe('ShareCover component', () => {
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('individual_share');
expect(img.getAttribute('loading')).toBe('lazy');
expect(img.className).toBe('z-0 rounded-xl object-cover text');
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
expect(img.getAttribute('src')).toBe('/asdf');
expect(getAssetThumbnailUrl).toHaveBeenCalledWith('someId');
});
@ -44,7 +44,7 @@ describe('ShareCover component', () => {
const img = component.getByTestId('album-image') as HTMLImageElement;
expect(img.alt).toBe('unnamed_share');
expect(img.getAttribute('loading')).toBe('lazy');
expect(img.className).toBe('z-0 rounded-xl object-cover text');
expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
});
it('renders fallback image when asset is not resized', () => {

View file

@ -8,7 +8,7 @@
<img
{alt}
class="z-0 rounded-xl object-cover {className}"
class="z-0 rounded-xl object-cover aspect-square {className}"
data-testid="album-image"
draggable="false"
loading={preload ? 'eager' : 'lazy'}

View file

@ -7,7 +7,7 @@
<enhanced:img
{alt}
class="z-0 rounded-xl object-cover {className}"
class="z-0 rounded-xl object-cover aspect-square {className}"
data-testid="album-image"
draggable="false"
loading={preload ? 'eager' : 'lazy'}

View file

@ -12,7 +12,7 @@
export { className as class };
</script>
<div class="relative aspect-square shrink-0">
<div class="relative shrink-0">
{#if link?.album}
<AlbumCover album={link.album} class={className} {preload} />
{:else if link.assets[0]?.resized}