@asd20/ui 3.2.582 → 3.2.584

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.582",
+  "version": "3.2.584",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Messaging/index.vue

@@ -94,9 +94,13 @@ export default {
       if (coverImage) {
         const coverImageFiles = coverImage.files || []
         const coverImageFull = coverImageFiles.find(f => f.name === 'full')
-        messageImageUrl = coverImageFull
-          ? coverImageFull.url
-          : coverImage.url || ''
+        if (coverImageFull && coverImageFull.filename.includes('headerimage')) {
+          messageImageUrl = ''
+        } else {
+          messageImageUrl = coverImageFull
+            ? coverImageFull.url
+            : coverImage.url || ''
+        }
       }
       return messageImageUrl
     },

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

@@ -14,8 +14,12 @@
       </client-only>
       <slot name="top" />
     </div>
-    <div :class="imageUrl ? 'add-fade' : ''" class="asd20-page-header__main">
-      <div class="asd20-page-header__content">
+    <div class="asd20-page-header__main">
+      <div
+        class="asd20-page-header__content"
+        :class="imageUrl ? 'add-fade' : ''"
+        :style="styles"
+      >
         <div class="asd20-page-header__tools">
           <asd20-breadcrumb
             v-if="breadcrumbLinks.length"
@@ -81,9 +85,9 @@
         </div>
       </div>
 
-      <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
+      <!-- <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
         <img :src="imageUrl" :alt="imageCaption" />
-      </div>
+      </div> -->
     </div>
 
     <aside class="asd20-page-header__aside" v-if="$slots.aside">
@@ -197,7 +201,13 @@ export default {
           .pop()
       )
     },
+    styles() {
+      return {
+        '--imageBackground': `url('${this.imageUrl}')`,
+      }
+    },
   },
+
   methods: {
     goBack() {
       if (typeof window === 'undefined') return
@@ -241,10 +251,6 @@ export default {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  &__main {
-    background: var(--website-header__background-color)
-      var(--website-header__background-style);
-  }
 
   &__tools {
     display: flex;
@@ -332,9 +338,12 @@ export default {
   }
 
   &__content {
+    z-index: 1;
     position: relative;
     color: var(--website-header__foreground-color);
-    padding: space(1) space(1) space(1) space(1);
+    padding: space(1.5) space(1) space(3) space(1);
+    background: var(--website-header__background-color) var(--imageBackground)
+      50% 50% / cover no-repeat;
     &::v-deep .asd20-breadcrumb {
       margin: space(1) 0 0 0;
     }
@@ -342,6 +351,26 @@ export default {
       max-width: 100%;
     }
   }
+  .add-fade {
+    &::before {
+      content: '';
+      // height: auto;
+      display: block;
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      bottom: auto;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        30deg,
+        rgba(6, 11, 31, 0.7) 10%,
+        rgba(6, 11, 31, 0.5) 55%,
+        transparent 70%
+      );
+    }
+  }
 
   h1 {
     position: relative;
@@ -438,31 +467,11 @@ export default {
   .asd20-page-header {
     &__main {
       position: relative;
-      min-height: 500px;
-    }
-    .add-fade {
-      &::before {
-        content: '';
-        height: auto;
-        display: block;
-        position: absolute;
-        z-index: 0;
-        top: 0;
-        bottom: auto;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-          30deg,
-          rgba(6, 11, 31, 0.7) 10%,
-          rgba(6, 11, 31, 0.5) 50%,
-          transparent 70%
-        );
-      }
+      min-height: 300px;
     }
     &__content {
-      position: absolute;
-      padding: space(1) space(3) space(1) space(3);
+      position: relative;
+      padding: space(1) space(2) space(1) space(2);
       min-height: 300px;
       top: 0;
       right: 0;
@@ -470,6 +479,10 @@ export default {
     }
     &__title-content {
       max-width: 80%;
+      margin-bottom: space(2);
+    }
+    &__call-to-action {
+      margin: space(-1) space(2) space(-1) space(2);
     }
 
     &::after {
@@ -508,28 +521,11 @@ export default {
 
 @media (min-width: 1024px) {
   .asd20-page-header {
-    .add-fade {
-      &::before {
-        background: linear-gradient(
-          70deg,
-          rgba(6, 11, 31, 0.7) 10%,
-          rgba(6, 11, 31, 0.5) 40%,
-          transparent 70%
-        );
-      }
-    }
     &::v-deep .asd20-organization-picker {
       display: flex;
       margin: space(0) auto space(0) space(0);
     }
 
-    // &::v-deep .asd20-district-logo {
-    //   height: space(1.5);
-    //   margin: space(1) auto space(1) 0;
-    //   display: block;
-    //   --fill-one: var(--color__primary);
-    //   --fill-two: var(--color__secondary-t30);
-    // }
     &__image {
       max-height: 60vh;
     }
@@ -545,6 +541,14 @@ export default {
         order: 2;
       }
     }
+    &__content {
+      position: relative;
+      padding: space(1) space(2) space(1) space(2);
+      min-height: 450px;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
     &__title-content {
       max-width: 60%;
     }

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

@@ -178,7 +178,7 @@ export default {
       padding: space(2) space(1) space(2) space(2);
       &::v-deep > * {
         // flex: 1 1 var(--minimum-column-width);
-        margin: space(1) !important;
+        // margin: space(1) !important;
       }
     }
     &--grid,

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

@@ -15,7 +15,11 @@
       <slot name="top" />
     </div>
     <div class="asd20-page-header__main">
-      <div class="asd20-page-header__content">
+      <div
+        class="asd20-page-header__content"
+        :class="headerImageUrl ? 'new-header add-fade' : ''"
+        :style="styles"
+      >
         <div class="asd20-page-header__tools">
           <asd20-breadcrumb
             v-if="breadcrumbLinks.length"
@@ -166,6 +170,7 @@ export default {
     lead: { type: String, default: '' },
     callsToAction: { type: Array, default: () => [] },
     imageUrl: { type: String, default: '' },
+    headerImageUrl: { type: String, default: '' },
     imageCaption: { type: String, default: '' },
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
@@ -218,6 +223,11 @@ export default {
       // console.log(publishDateTimePlusOne, modifiedDateTimeString)
       return modifiedDateTimeString > publishDateTimePlusOne ? true : false
     },
+    styles() {
+      return {
+        '--imageBackground': `url('${this.headerImageUrl}')`,
+      }
+    },
   },
   mounted() {
     this.goBack()
@@ -226,7 +236,10 @@ export default {
     goBack() {
       if (typeof window === 'undefined') return
       const currentLocation = window.location.href
-      if (currentLocation.includes('schools') || currentLocation.includes('8080')) {
+      if (
+        currentLocation.includes('schools') ||
+        currentLocation.includes('8080')
+      ) {
         const currentURL = new URL(window.location.href)
         this.returnURL = currentURL.origin
         return
@@ -389,10 +402,35 @@ export default {
       var(--website-header__background-style);
     color: var(--website-header__foreground-color);
     padding: space(1) space(1) space(1) space(1);
+    z-index: 1;
     &::v-deep .asd20-breadcrumb {
       margin: space(1) 0;
     }
   }
+  .new-header {
+    background: var(--website-header__background-color) var(--imageBackground)
+      50% 50% / cover no-repeat;
+  }
+  .add-fade {
+    &::before {
+      content: '';
+      // height: auto;
+      display: block;
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      bottom: auto;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        30deg,
+        rgba(6, 11, 31, 0.7) 10%,
+        rgba(6, 11, 31, 0.5) 55%,
+        transparent 70%
+      );
+    }
+  }
 
   h1 {
     position: relative;
@@ -541,6 +579,7 @@ export default {
       );
     }
     &__title-content {
+      position: relative;
       max-width: space(35);
       // .asd20-page-header__lead {
       //   margin-right: 25%;

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -208,18 +208,24 @@ export default {
   margin-top: space(2.25);
 
   .asd20-video-header {
+    &__top {
+      position: absolute;
+    }
     .weather-status-and-translation-container {
       display: flex;
       flex-direction: row;
       align-items: center;
+      margin: space(0.25) 0;
+      justify-content: flex-end;
     }
     .asd20-language-translation {
-      position: absolute;
+      // position: absolute;
       top: 3.5rem;
       right: 0.5rem;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
       border: 1px solid var(--website-page__alternate-background-color);
+      margin-left: 0.5rem;
       .asd20-select-input {
         padding: 0.25rem 0.25rem;
         color: currentColor;
@@ -238,12 +244,6 @@ export default {
     .asd20-language-loader {
       order: 1;
     }
-
-    .translation-button-adjust {
-      position: absolute;
-      top: space(1);
-      right: space(0.5);
-    }
     .weather-link {
       text-decoration: none;
       border-radius: 3rem;
@@ -258,33 +258,10 @@ export default {
     }
     .double-notification-wrapper {
       display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      align-items: center;
-      flex-wrap: wrap;
+      flex-direction: column;
     }
   }
-  // .asd20-video-header-content {
-  //   position: absolute;
-  //   top: space(2);
-  // }
 }
-// .asd20-notification-group--floating {
-//   .bell {
-//     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-//     svg {
-//       fill: var(--color__accent) !important;
-//     }
-//     span {
-//       background: var(--color__accent) !important;
-//       top: inherit !important;
-//       right: inherit !important;
-//       width: 1.2rem !important;
-//       height: 1.2rem !important;
-//       font-size: 0.75rem !important;
-//     }
-//   }
-// }
 
 @keyframes slide_left {
   from {
@@ -297,7 +274,7 @@ export default {
   }
 }
 
-@media (min-width: 667px) {
+@media (min-width: 768px) {
   .asd20-district-video-template {
     .asd20-video-header {
       .asd20-language-translation {
@@ -312,17 +289,11 @@ export default {
           --fill-color: var(--color__accent) !important;
         }
       }
-      .translation-button-adjust {
-        position: absolute;
-        top: space(1);
-        right: space(0.5);
-      }
       .double-notification-wrapper {
         justify-content: center;
       }
     }
     .asd20-video-header-content {
-      // position: absolute;
       top: inherit;
       bottom: 0%;
     }
@@ -334,22 +305,8 @@ export default {
     display: block;
     margin-left: space(3);
     margin-top: 0;
-    // .notification-group--floating {
-    //   .bell {
-    //     span {
-    //       background: var(--color__accent);
-    //       top: -0.6em !important;
-    //       right: -0.6em !important;
-    //     }
-    //   }
-    // }
   }
   .asd20-video-header {
-    .translation-button-adjust {
-      position: absolute;
-      top: space(-1) !important;
-      right: space(0) !important;
-    }
     .double-notification-wrapper {
       justify-content: flex-end !important;
     }

package/src/components/templates/Asd20WayfindingImageTemplate/index.stories.js

@@ -32,7 +32,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', true)
+      return boolean('Show Notifications', false)
         ? notifications || empty
         : empty
     },

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -215,7 +215,7 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(1.5375);
+    top: space(2.06);
     // .bell {
     //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
     //   svg {

package/src/data/page-queries/landing-page-query-result.json

@@ -186,6 +186,7 @@
                   },
                   {
                     "name": "full",
+                    "filename": "PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg",
                     "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/accredited-with-distinction/full/PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg"
                   }
                 ],