From 9ae56ff4d466674c9025c3de133aceccf01bdbce Mon Sep 17 00:00:00 2001 From: chloemartin312 Date: Mon, 16 Feb 2026 12:38:33 -0500 Subject: [PATCH] RETURN TO... FIXES ROUND 1 --- .../app-hax/lib/v2/app-hax-search-results.js | 83 ++++++++++--------- elements/app-hax/lib/v2/app-hax-site-bar.js | 9 +- .../app-hax/lib/v2/app-hax-use-case-filter.js | 7 +- 3 files changed, 56 insertions(+), 43 deletions(-) diff --git a/elements/app-hax/lib/v2/app-hax-search-results.js b/elements/app-hax/lib/v2/app-hax-search-results.js index a9adc03a89..5ca4893511 100644 --- a/elements/app-hax/lib/v2/app-hax-search-results.js +++ b/elements/app-hax/lib/v2/app-hax-search-results.js @@ -78,13 +78,12 @@ export class AppHaxSearchResults extends SimpleColors { display: flex; align-items: center; justify-content: flex-start; - width: 96vw; + gap: var(--ddd-spacing-6, 24px); + width: 90vw; + max-width: 1200px; + margin: 0 auto; max-height: 280px; position: relative; - border-radius: var(--ddd-radius-md, 8px); - border: var(--ddd-border-xs, 1px solid) - var(--ddd-theme-default-limestoneLight, #e4e5e7); - box-shadow: var(--ddd-boxShadow-sm); overflow: visible; } .pager-container { @@ -110,7 +109,7 @@ export class AppHaxSearchResults extends SimpleColors { color: var(--ddd-theme-default-white, white); border: var(--ddd-border-sm, 2px solid) white; - border-radius: var(--ddd-radius-sm, 4px); + border-radius: var(--ddd-radius-circle); padding: var(--ddd-spacing-4, 16px); cursor: pointer; height: var(--ddd-spacing-12); @@ -124,22 +123,18 @@ export class AppHaxSearchResults extends SimpleColors { z-index: 10; position: relative; } - .scroll-right { - margin-right: 0; - } :host([dark]) .scroll-left, :host([dark]) .scroll-right, body.dark-mode .scroll-left, body.dark-mode .scroll-right { - background: var(--ddd-theme-default-keystoneYellow, #ffd100); + background: var(--ddd-theme-default-accent); color: var(--ddd-theme-default-nittanyNavy, #001e44); - border-color: var(--ddd-theme-default-white, white); } .scroll-left:hover:not(:disabled), .scroll-right:hover:not(:disabled) { - background: var(--ddd-theme-default-keystoneYellow, #ffd100); + background: var(--ddd-theme-default-accent); color: var(--ddd-theme-default-nittanyNavy, #001e44); transform: translateY(-2px); box-shadow: var(--ddd-boxShadow-md); @@ -160,8 +155,8 @@ export class AppHaxSearchResults extends SimpleColors { :host([dark]) .scroll-right:hover:not(:disabled), body.dark-mode .scroll-left:hover:not(:disabled), body.dark-mode .scroll-right:hover:not(:disabled) { - background: var(--ddd-theme-default-nittanyNavy, #001e44); - color: var(--ddd-theme-default-white, white); + background: var(--ddd-theme-default-white, white); + color: var(--ddd-theme-default-nittanyNavy, #001e44); } :host([dark]) .scroll-left:disabled, @@ -170,19 +165,18 @@ export class AppHaxSearchResults extends SimpleColors { body.dark-mode .scroll-right:disabled { opacity: 0.3; cursor: not-allowed; - background: var(--ddd-theme-default-coalyGray, #444); - color: var(--ddd-theme-default-slateGray, #666); - border-color: var(--ddd-theme-default-coalyGray, #444); + background: var(--ddd-theme-default-limestoneGray, #a2aaad); + color: var(--ddd-theme-default-coalyGray, #444); } - + #results { display: flex; flex-wrap: nowrap; overflow-x: auto; - overflow-y: hidden; scroll-snap-type: x mandatory; gap: var(--ddd-spacing-6, 24px); - padding: var(--ddd-spacing-1, 4px) var(--ddd-spacing-2, 8px); + padding-bottom: var(--ddd-spacing-6, 24px); + padding-top: var(--ddd-spacing-6, 24px); flex: 1; min-width: 0; cursor: grab; @@ -309,9 +303,6 @@ export class AppHaxSearchResults extends SimpleColors { min-width: 240px; } - #results::after { - min-width: 240px; - } /* Mobile: Show only 1 item, hide arrows */ .scroll-left, .scroll-right { @@ -438,7 +429,7 @@ export class AppHaxSearchResults extends SimpleColors { id="scroll-left-btn" class="scroll-left" @click="${this.scrollLeft}" - ?disabled="${this.currentIndex <= 1 || this.totalItems <= 1}" + ?disabled="${this.isAtStart || this.totalItems <= 1}" aria-label="Previous sites" aria-describedby="scroll-left-desc" > @@ -517,7 +508,7 @@ export class AppHaxSearchResults extends SimpleColors { id="scroll-right-btn" class="scroll-right" @click="${this.scrollRight}" - ?disabled="${this.currentIndex >= this.totalItems || + ?disabled="${this.isAtEnd || this.totalItems <= 1}" this.totalItems <= 1}" aria-label="Next sites" aria-describedby="scroll-right-desc" @@ -531,26 +522,43 @@ export class AppHaxSearchResults extends SimpleColors { `; } + get isAtStart() { + const el = this.shadowRoot?.querySelector("#results"); + return !el || el.scrollLeft <= 2; // tolerance for sub-pixel scroll + } + + get isAtEnd() { + const el = this.shadowRoot?.querySelector("#results"); + return ( + !el || + el.scrollLeft + el.clientWidth >= el.scrollWidth - 2 + ); + } + scrollLeft() { - // Don't scroll if at the beginning or only one item - if (this.currentIndex <= 1 || this.totalItems <= 1) return; + const el = this.shadowRoot.querySelector("#results"); + if (!el || this.totalItems <= 1) return; - const itemWidth = 264 + 24; // item width + gap - this.shadowRoot - .querySelector("#results") - .scrollBy({ left: -itemWidth, behavior: "smooth" }); + const itemWidth = 264 + 24; + + // If we're close to the start, snap fully to 0 + if (el.scrollLeft <= itemWidth) { + el.scrollTo({ left: 0, behavior: "smooth" }); + } else { + el.scrollBy({ left: -itemWidth, behavior: "smooth" }); + } } + scrollRight() { - // Don't scroll if at the end or only one item - if (this.currentIndex >= this.totalItems || this.totalItems <= 1) return; + const el = this.shadowRoot.querySelector("#results"); + if (!el || this.totalItems <= 1) return; - const itemWidth = 264 + 24; // item width + gap - this.shadowRoot - .querySelector("#results") - .scrollBy({ left: itemWidth, behavior: "smooth" }); + const itemWidth = 264 + 24; + el.scrollBy({ left: itemWidth, behavior: "smooth" }); } + handlePointerStart(e) { const resultsEl = this.shadowRoot.querySelector("#results"); this.isPointerDown = true; @@ -623,6 +631,7 @@ export class AppHaxSearchResults extends SimpleColors { this.totalItems, ); } + this.requestUpdate(); } goToPage(pageNumber) { diff --git a/elements/app-hax/lib/v2/app-hax-site-bar.js b/elements/app-hax/lib/v2/app-hax-site-bar.js index 49dea88fb3..77e0850331 100644 --- a/elements/app-hax/lib/v2/app-hax-site-bar.js +++ b/elements/app-hax/lib/v2/app-hax-site-bar.js @@ -296,17 +296,22 @@ export class AppHaxSiteBars extends SimpleColors { 2px 2px 12px #1c1c1c, 2px 2px 12px rgba(0, 0, 0, 0.3) ); - transition: all 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; + overflow: visible; + } :host(:hover), :host(:focus-within) { - transform: translateY(-2px); + border: var(--ddd-border-md); border-color: var(--ddd-theme-default-accent); box-shadow: light-dark( 4px 8px 24px rgba(28, 28, 28, 0.15), 4px 8px 24px rgba(0, 0, 0, 0.5) ); + transform: scale(1.03); + transform-origin: center top; + z-index: 2; } #mainCard { diff --git a/elements/app-hax/lib/v2/app-hax-use-case-filter.js b/elements/app-hax/lib/v2/app-hax-use-case-filter.js index 17dab5822c..80e46584a0 100644 --- a/elements/app-hax/lib/v2/app-hax-use-case-filter.js +++ b/elements/app-hax/lib/v2/app-hax-use-case-filter.js @@ -223,7 +223,7 @@ export class AppHaxUseCaseFilter extends LitElement { } .template-group + .template-group { - margin-top: var(--ddd-spacing-6, 24px); + margin-top: var(--ddd-spacing-3, 12px); } .template-group-heading { @@ -237,9 +237,8 @@ export class AppHaxUseCaseFilter extends LitElement { .template-results { display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: var(--ddd-spacing-1, 4px); - width: 100%; + grid-template-columns: repeat(6, 1fr); + padding: 0 var(--ddd-spacing-5, 20px); box-sizing: border-box; }