@asd20/ui 3.2.460 → 3.2.462

package/package.json

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

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

@@ -249,8 +249,8 @@ export default {
         //   z-index: 1;
         // }
         img {
-          width: 20vw;
-          height: 20vw;
+          width: 15vw;
+          height: 15vw;
           // filter: grayscale(100%);
           // mix-blend-mode: lighten;
           // opacity: 0.7;

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

@@ -179,6 +179,17 @@ export default {
         margin: space(1) !important;
       }
     }
+    &--grid,
+    &--fullscreen {
+      .primary-messaging-section,
+      .secondary-messaging-section {
+        padding: space(2) space(3);
+        // &::v-deep > * {
+        //   flex: 1 1 var(--minimum-column-width);
+        //   margin: var(--gutter) !important;
+        // }
+      }
+    }
   }
 }
 </style>

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

@@ -55,10 +55,10 @@
 
     <!-- Page Content -->
     <asd20-page-content
-      :primary-messages="wayFindingPrimaryMessages"
-      :secondary-messages="secondaryMessages"
-      omit-body-content
-      grid
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      omit-detail-links
+      omit-calls-to-action
     >
       <!-- Inline-Notifications -->
       <template slot="before">
@@ -71,6 +71,16 @@
           ></asd20-notification-group>
         </client-only>
       </template>
+
+      <slot></slot>
+    </asd20-page-content>
+
+    <asd20-page-content
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      grid
+    />
       <!-- Feeds -->
       <template slot="before">
         <asd20-feeds-section
@@ -171,6 +181,11 @@ export default {
           )
       )
     },
+    primaryMessage() {
+      const introMessage = this.primaryMessages.slice(0, 1)
+      if ((introMessage[0].bodyHtml === '' || null) || (introMessage[0].detailLink !== '' || null)) return
+      return introMessage
+    },
   },
 }
 </script>
@@ -227,6 +242,30 @@ export default {
       }
     }
   }
+  .intro-message {
+    .asd20-messaging {
+      border-left: 40px solid var(--color__tertiary);
+      border-bottom: 20px solid var(--color__tertiary);
+      padding-left: space(1);
+      padding-bottom: space(1);
+    }
+    p {
+      // font-family: var(--website-typography__font-family-headlines);
+      font-size: 18px !important;
+      line-height: 1.5;
+      font-family: var(--website-typography__font-family-headlines);
+    }
+    h2 {
+      @include asd20-font(
+        1.5,
+        var(--website-typography__font-family-headlines),
+        1.2,
+        700
+      );
+      font-family: var(--website-typography__font-family-headlines);
+      // font-size: 36px !important;
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -248,6 +287,9 @@ export default {
     .asd20-page-content {
       margin-top: space(0);
     }
+    .intro-message {
+      width: 90%;
+    }
   }
 }
 </style>

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

@@ -52,12 +52,14 @@
       </template>
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-image-header>
+
+
     <!-- Page Content -->
     <asd20-page-content
-      :primary-messages="wayFindingPrimaryMessages"
-      :secondary-messages="secondaryMessages"
-      omit-body-content
-      fullscreen
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      omit-detail-links
+      omit-calls-to-action
     >
       <!-- Inline-Notifications -->
       <template slot="before">
@@ -70,6 +72,16 @@
           ></asd20-notification-group>
         </client-only>
       </template>
+
+      <slot></slot>
+    </asd20-page-content>
+
+    <asd20-page-content
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      fullscreen
+    />
       <!-- Announcement Feed -->
       <template slot="before">
         <asd20-feeds-section
@@ -174,6 +186,11 @@ export default {
           )
       )
     },
+    primaryMessage() {
+      const introMessage = this.primaryMessages.slice(0, 1)
+      if ((introMessage[0].bodyHtml === '' || null) || (introMessage[0].detailLink !== '' || null)) return
+      return introMessage
+    },
   },
 }
 </script>
@@ -252,6 +269,30 @@ export default {
       }
     }
   }
+  .intro-message {
+    .asd20-messaging {
+      border-left: 40px solid var(--color__tertiary);
+      border-bottom: 20px solid var(--color__tertiary);
+      padding-left: space(1);
+      padding-bottom: space(1);
+    }
+    p {
+      // font-family: var(--website-typography__font-family-headlines);
+      font-size: 18px !important;
+      line-height: 1.5;
+      font-family: var(--website-typography__font-family-headlines);
+    }
+    h2 {
+      @include asd20-font(
+        1.5,
+        var(--website-typography__font-family-headlines),
+        1.2,
+        700
+      );
+      font-family: var(--website-typography__font-family-headlines);
+      // font-size: 36px !important;
+    }
+  }
 }
 @media (min-width: 768px) {
   .asd20-template-wayfinding-image {
@@ -287,6 +328,9 @@ export default {
         }
       }
     }
+    .intro-message {
+      width: 90%;
+    }
   }
 }
 </style>

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

@@ -74,7 +74,6 @@
 
       <slot></slot>
     </asd20-page-content>
-    <!-- <hr class="seperator" /> -->
 
     <asd20-page-content
       :primary-messages="wayFindingPrimaryMessages"
@@ -246,10 +245,6 @@ export default {
       // font-size: 36px !important;
     }
   }
-  .seperator {
-    width: 90%;
-    margin: auto;
-  }
 }
 
 @media (min-width: 1024px) {

package/src/mixins/pageTemplateMixin.js

@@ -1,4 +1,7 @@
 export default {
+  data: () => ({
+    desktop: true,
+  }),
   props: {
     // Page meta
     id: { type: String, default: '' },
@@ -203,17 +206,13 @@ export default {
     widgetsSectionProps() {
       /*
       Rules:
-      - Sidebar only shown if more than one message, or the first message has bodyHtml
+      - Sidebar only shown if more than one message, or the first message has bodyHtml, or screen width is > 1024
       - Sidebar widgets move to Footer when sidebar is not present
-      - If both sidebar and footer widgets are shown, prefer placing them in sidebar
       - Full-width widgets are placed in the footer only
-      - If related links contain images, they become full-width
       */
 
       const useSidebar =
-        this.firstMessage &&
-        this.firstMessage.bodyHtml &&
-        window.innerWidth >= 1024
+        this.firstMessage && this.firstMessage.bodyHtml && this.desktop
 
       const relatedLinksContainImages =
         this.relatedLinks.length && !!this.relatedLinks.find(l => !!l.imageUrl)
@@ -305,4 +304,13 @@ export default {
       ]
     },
   },
+  mounted() {
+    this.desktop = window.innerWidth >= 1024
+    window.addEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.desktop = window.innerWidth >= 1024
+    },
+  },
 }