diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 9022792..1b2adae 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -401,10 +401,11 @@ describe('homepage sponsor strip', () => { cy.visit('/') }) - it('renders the heading and all seven partner logos in a carousel', () => { + it('renders the heading and all seven partner logos', () => { cy.get('[data-cy="sponsors"]').within(() => { cy.contains('h2', 'Organizations Rabbi Gerzi has Worked With') .should('be.visible') + cy.get('[data-cy="sponsor-logo"]').should('have.length', 7) const expectedAlts = [ 'SHARE', 'U of Israel', @@ -414,67 +415,9 @@ describe('homepage sponsor strip', () => { 'Aish HaTorah', 'Yeshivat Lev HaTorah', ] - cy.get('[data-cy="sponsor-logo"]').should('have.length', 7) expectedAlts.forEach((altText) => { cy.get(`[data-cy="sponsor-logo"][alt="${altText}"]`) - .should('have.attr', 'src') - }) - cy.get('[data-cy="sponsor-carousel"]').should('be.visible') - cy.get('[data-cy="sponsor-logo-duplicate"]') - .should('have.length', 7) - cy.get('[data-cy="sponsor-logo-duplicate"][alt=""]') - .should('have.length', 7) - cy.get('[data-cy="sponsor-logo-group-duplicate"]') - .should('have.attr', 'aria-hidden', 'true') - }) - }) - - it('centers the carousel with side buffers and edge fades', () => { - cy.viewport(1200, 900) - cy.get('[data-cy="sponsors"]').within(() => { - cy.get('[data-cy="sponsor-carousel"]').then((carouselElements) => { - const carouselElement = carouselElements[0] - const sponsorInnerElement = carouselElement.parentElement - - if (sponsorInnerElement === null) { - throw new Error('Sponsor inner element is missing') - } - - const carouselBounds = carouselElement.getBoundingClientRect() - const sponsorInnerBounds = - sponsorInnerElement.getBoundingClientRect() - const leftBuffer = carouselBounds.left - sponsorInnerBounds.left - const rightBuffer = sponsorInnerBounds.right - carouselBounds.right - const carouselRatio = carouselBounds.width / sponsorInnerBounds.width - const carouselStyle = getComputedStyle(carouselElement) - const maskImage = - carouselStyle.maskImage || carouselStyle.webkitMaskImage - - expect(carouselRatio).to.be.closeTo(0.85, 0.02) - expect(leftBuffer).to.be.closeTo(rightBuffer, 1) - expect(maskImage).to.contain('50px') - }) - }) - }) - - it('uses the faster carousel timing', () => { - cy.get('[data-cy="sponsor-track"]').then((trackElements) => { - const trackStyle = getComputedStyle(trackElements[0]) - - expect(trackStyle.animationDuration).to.equal('20s') - }) - }) - - it('scrolls the sponsor logos from right to left', () => { - cy.get('[data-cy="sponsor-track"]').then((trackElements) => { - const startingLeft = trackElements[0].getBoundingClientRect().left - - cy.wait(750) - cy.get('[data-cy="sponsor-track"]').then((laterTrackElements) => { - const laterLeft = - laterTrackElements[0].getBoundingClientRect().left - - expect(startingLeft).to.be.greaterThan(laterLeft) + .should('be.visible') }) }) }) diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue index 91503d2..32ae304 100644 --- a/frontend/rabbi_gerzi/src/views/HomePage.vue +++ b/frontend/rabbi_gerzi/src/views/HomePage.vue @@ -173,32 +173,6 @@ const sponsors: Sponsor[] = [ { name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' }, ] -const sponsorGroups: Sponsor[][] = [sponsors, sponsors] - -function sponsorGroupDataCy(sponsorGroupIndex: number): string { - if (sponsorGroupIndex === 0) { - return 'sponsor-logo-group' - } - - return 'sponsor-logo-group-duplicate' -} - -function sponsorLogoAlt(sponsor: Sponsor, sponsorGroupIndex: number): string { - if (sponsorGroupIndex === 0) { - return sponsor.name - } - - return '' -} - -function sponsorLogoDataCy(sponsorGroupIndex: number): string { - if (sponsorGroupIndex === 0) { - return 'sponsor-logo' - } - - return 'sponsor-logo-duplicate' -} - interface Project { title: string description: string @@ -389,25 +363,15 @@ const projects: Project[] = [

Organizations Rabbi Gerzi has Worked With

-
@@ -919,62 +883,21 @@ const projects: Project[] = [ margin: 0 0 3rem 0; } -.sponsors__carousel { - --sponsors-edge-fade: 50px; - --sponsors-logo-gap: clamp(2.75rem, 4vw, 4.25rem); - - width: 85%; - margin: 0 auto; - overflow: hidden; - mask-image: linear-gradient( - to right, - transparent, - black var(--sponsors-edge-fade), - black calc(100% - var(--sponsors-edge-fade)), - transparent - ); - -webkit-mask-image: linear-gradient( - to right, - transparent, - black var(--sponsors-edge-fade), - black calc(100% - var(--sponsors-edge-fade)), - transparent - ); -} - -.sponsors__track { +.sponsors__row { display: flex; - width: max-content; - animation: sponsors-scroll 20s linear infinite; - will-change: transform; -} - -.sponsors__group { - display: flex; - flex: 0 0 auto; + flex-wrap: wrap; align-items: center; - gap: var(--sponsors-logo-gap); - padding-right: var(--sponsors-logo-gap); + justify-content: center; + gap: 2.5rem 3rem; } .sponsors__logo { - height: clamp(78px, 7vw, 96px); + height: 60px; width: auto; - max-width: 220px; - flex: 0 0 auto; + max-width: 160px; object-fit: contain; } -@keyframes sponsors-scroll { - from { - transform: translateX(0); - } - - to { - transform: translateX(-50%); - } -} - .projects { background: var(--color-cream); padding: 5rem 2rem; @@ -1305,15 +1228,6 @@ const projects: Project[] = [ transform: none; } - .sponsors__carousel { - width: min(100%, 680px); - } - - .sponsors__logo { - height: clamp(68px, 18vw, 86px); - max-width: 190px; - } - .journey__cards { grid-template-columns: 1fr; }