opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-05 08:48:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): show mobile homepage banners at 800:721

Browse Source 
Keep the 800x721 event/ad poster whole with contain instead of
cover-cropping it into the stacked 357px mobile frame.
This commit is contained in:
CodingOnStar 2026-08-31 16:39:46 +08:00
parent 19235d024e
commit 006eb63bf2
2 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx
View File

@ -55,49 +55,55 @@ const carouselBanners = [
]
describe('Marketplace home trending layout', () => {
it('keeps standalone mobile ad and blog banners at the same fixed height', async () => {
it('keeps standalone mobile blog banners at the stacked 357px height', async () => {
await page.viewport(600, 900)
await render(
<div data-marketplace-standalone className="w-[560px]">
<div data-testid="blog-banner">
<HomeBannerSlide banner={blogBanner} isMarketplacePlatform page="plugins" />
</div>
<div data-testid="ad-banner">
<HomeBannerSlide banner={adBanner} isMarketplacePlatform page="plugins" />
</div>
</div>,
)
const blogSlide = document.querySelector<HTMLElement>('[data-testid="blog-banner"] > a')!
const adSlide = document.querySelector<HTMLElement>('[data-testid="ad-banner"] > a')!
expect(blogSlide.getBoundingClientRect().height).toBe(357)
expect(adSlide.getBoundingClientRect().height).toBe(blogSlide.getBoundingClientRect().height)
})
it('keeps event and ad artwork left-aligned so responsive cropping stays on the right', async () => {
it('shows the standalone mobile event poster at the 800:721 delivery ratio', async () => {
await page.viewport(600, 900)
const screen = await render(
<div data-marketplace-standalone className="w-full">
<div data-marketplace-standalone className="w-[360px]">
<HomeBannerSlide banner={eventBanner} isMarketplacePlatform page="plugins" />
</div>,
)
const slide = screen.getByRole('link', { name: 'Launch event' }).element()
const box = slide.getBoundingClientRect()
const artwork = slide.querySelector('img')
expect(box.height).toBeCloseTo((box.width * 721) / 800, 1)
expect(artwork).not.toBeNull()
expect(getComputedStyle(artwork!).objectFit).toBe('contain')
expect(getComputedStyle(artwork!).objectPosition).toBe('0% 50%')
})
it('keeps event and ad artwork left-aligned so desktop cropping stays on the right', async () => {
await page.viewport(1000, 900)
const screen = await render(
<div data-marketplace-standalone className="w-[960px]">
<HomeBannerSlide banner={adBanner} isMarketplacePlatform page="plugins" />
<HomeBannerSlide banner={eventBanner} isMarketplacePlatform page="plugins" />
</div>,
)
const assertLeftCoverCrop = () => {
for (const name of ['Partner campaign', 'Launch event']) {
const artwork = screen.getByRole('link', { name }).element().querySelector('img')
for (const name of ['Partner campaign', 'Launch event']) {
const artwork = screen.getByRole('link', { name }).element().querySelector('img')
expect(artwork).not.toBeNull()
expect(getComputedStyle(artwork!).objectFit).toBe('cover')
expect(getComputedStyle(artwork!).objectPosition).toBe('0% 50%')
}
expect(artwork).not.toBeNull()
expect(getComputedStyle(artwork!).objectFit).toBe('cover')
expect(getComputedStyle(artwork!).objectPosition).toBe('0% 50%')
}
assertLeftCoverCrop()
await page.viewport(1000, 900)
assertLeftCoverCrop()
})
it('keeps the blog artwork left corners rounded when its image is cropped', async () => {

13
web/app/components/plugins/marketplace/home/home-trending.module.css
View File

@ -77,8 +77,8 @@
max-width: 400px;
}
/* Crop from the right so left-side artwork stays visible when the frame
is narrower than the image (PC resize and mobile cover). */
/* Desktop: crop from the right so left-side artwork stays visible when the
6:1 frame is narrower than the image. */
.imageSlide :is(picture, img) {
object-position: left;
}
@ -247,16 +247,17 @@
gap: 4px;
}
/* Event/ad mobile: match the fixed 197px artwork + 160px copy height.
Cover + left so shrinking the frame crops the right, not the copy. */
/* Event/ad mobile: show the 800×721 poster whole (ops banner-meta), not
cover-cropped into the stacked 357px blog/recommend frame. */
:global([data-marketplace-standalone]) .imageSlide {
height: 357px;
height: auto;
aspect-ratio: 800 / 721;
}
:global([data-marketplace-standalone]) .imageSlide :is(picture, img) {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
object-position: left;
}