@asd20/ui-next 2.3.6 → 2.3.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.3.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.6...ui-next-v2.3.7) (2026-04-29)
+
+
+### Bug Fixes
+
+* fix parallax issue on secondary header for tablet sizes ([3066da8](https://github.com/academydistrict20/asd20-ui-next/commit/3066da87418b5e958bfe37f9110cffd8f314766c))
+
 ## [2.3.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.5...ui-next-v2.3.6) (2026-04-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20SecondaryHeader/index.vue

@@ -143,6 +143,7 @@ export default {
   },
   data() {
     return {
+      isTouchCapableDevice: false,
       parallaxEnabled: false,
       intersectionObserver: null,
       parallaxRaf: null,
@@ -151,9 +152,16 @@ export default {
     }
   },
   computed: {
+    shouldUseParallax() {
+      return !this.isTouchCapableDevice
+    },
     headerClasses() {
       return {
         'asd20-secondary-header': true,
+        'asd20-secondary-header--desktop-background':
+          this.hasSecondaryHeaderImage,
+        'asd20-secondary-header--parallax-enabled-background':
+          this.hasSecondaryHeaderImage && this.shouldUseParallax,
         'asd20-secondary-header--hide-desktop-image':
           !this.shouldShowDesktopInlineImage,
       }
@@ -206,13 +214,20 @@ export default {
     },
   },
   mounted() {
+    if (typeof window !== 'undefined') {
+      this.isTouchCapableDevice = Boolean(
+        window.matchMedia?.('(pointer: coarse)').matches ||
+          window.navigator?.maxTouchPoints > 0
+      )
+    }
+
     // Respect reduced motion
     const prefersReduced =
       typeof window !== 'undefined' &&
       window.matchMedia &&
       window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-    if (prefersReduced) return
+    if (prefersReduced || !this.shouldUseParallax) return
 
     this.handleScroll = () => this.scheduleParallaxUpdate()
     this.handleResize = () => this.scheduleParallaxUpdate()
@@ -557,14 +572,17 @@ export default {
     -webkit-mask: url(#secondary-accent-mask-desktop);
   }
 
-  .asd20-secondary-header {
+}
+
+@media (min-width: 1024px) {
+  .asd20-secondary-header--desktop-background {
     padding: space(3) space(3) space(2) space(3);
     background-color: var(--website-homepage-header__secondary-background-color);
     background-image: var(--secondary-header-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    background-attachment: fixed;
+    background-attachment: scroll;
     padding-top: 70px;
 
     mask: url(#secondary-header-mask-desktop);
@@ -601,47 +619,6 @@ export default {
       margin: space(0.5) space(0.5) 0 0 !important;
       padding: space(0.5) space(1.5);
     }
-    .secondary-parallax__field {
-      transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
-        rotate(-5deg);
-      /* background: radial-gradient(*/
-      /*   280% 155% at 20% 110%,*/
-      /*   rgba(255, 255, 255, 0) 0%,*/
-      /*   rgba(255, 255, 255, 0) 62%,*/
-      /*   rgba(188, 220, 250, 0.95) 70%,*/
-      /*   rgba(255, 255, 255, 0) 72%*/
-      /* );*/
-      filter: none;
-      opacity: 0.9;
-      mask-image: linear-gradient(
-        90deg,
-        rgba(0, 0, 0, 0.85) 0%,
-        rgba(0, 0, 0, 1) 85%
-      );
-      -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
-    }
-
-    /* Layer 3: highlight ribbons (brighter curves) */
-    .secondary-parallax__ribbons {
-      transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
-        rotate(-3deg);
-
-      background: radial-gradient(
-        180% 160% at 40% 110%,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0) 60%,
-        rgba(255, 255, 255, 0.9) 64%,
-        rgba(255, 255, 255, 0) 70%
-      );
-      opacity: 0.9;
-      filter: none;
-      mask-image: linear-gradient(
-        90deg,
-        rgba(0, 0, 0, 0.3) 0%,
-        rgba(0, 0, 0, 1) 70%
-      );
-      -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
-    }
 
     & :deep(.message-image) {
       display: flex;
@@ -657,7 +634,58 @@ export default {
     }
   }
 
-  .asd20-secondary-header--hide-desktop-image {
+  .asd20-secondary-header--desktop-background .secondary-parallax {
+    display: block;
+  }
+
+  .asd20-secondary-header--desktop-background .secondary-parallax__field,
+  .asd20-secondary-header--desktop-background .secondary-parallax__ribbons {
+    display: none;
+  }
+
+  .asd20-secondary-header--parallax-enabled-background {
+    background-attachment: fixed;
+  }
+
+  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field,
+  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
+    display: block;
+  }
+
+  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field {
+    transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
+      rotate(-5deg);
+    filter: none;
+    opacity: 0.9;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.85) 0%,
+      rgba(0, 0, 0, 1) 85%
+    );
+    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
+  }
+
+  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
+    transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
+      rotate(-3deg);
+    background: radial-gradient(
+      180% 160% at 40% 110%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 60%,
+      rgba(255, 255, 255, 0.9) 64%,
+      rgba(255, 255, 255, 0) 70%
+    );
+    opacity: 0.9;
+    filter: none;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.3) 0%,
+      rgba(0, 0, 0, 1) 70%
+    );
+    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
+  }
+
+  .asd20-secondary-header--desktop-background.asd20-secondary-header--hide-desktop-image {
     & :deep(.asd20-messaging--fullscreen > .message-image) {
       display: none;
     }