@asd20/ui 3.2.773 → 3.2.775

package/package.json

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

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

@@ -493,7 +493,7 @@ export default {
     position: absolute;
     left: 0;
     top: 0;
-    right: 70vw;
+    right: 65vw;
     bottom: 0;
     // overflow: hidden;
     background: var(--website-menu__open-background-color, white);

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

@@ -1,6 +1,7 @@
 <template>
   <nav id="site-navigation" :class="{ active: menuOpen || searchOpen }">
     <asd20-navbar
+      ref="navbar"
       :menu-active="menuOpen"
       @update:menuActive="$emit('update:menuOpen', $event)"
       :search-active="searchOpen"
@@ -152,6 +153,9 @@ export default {
       this.desktop = window.innerWidth >= 1024
       this.zoomed = window.innerHeight <= 650
     },
+    toggleSearch() {
+      this.$emit('update:searchOpen', !this.searchOpen)
+    },
   },
 }
 </script>

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

@@ -320,6 +320,13 @@ export default {
     padding: space(0.5) space(1);
   }
 }
+@media (min-width: 768px) {
+  .asd20-site-search {
+    .asd20-notificaiton {
+      flex-direction: column;
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-site-search {
@@ -356,6 +363,8 @@ export default {
 
     .asd20-notification {
       margin: space(1);
+      flex-direction: column;
+      margin: space(0.5);
     }
   }
 
@@ -363,7 +372,7 @@ export default {
     position: absolute;
     left: 0;
     top: 0;
-    right: 70vw;
+    right: 65vw;
     bottom: 0;
     overflow: hidden;
     background: white;

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

@@ -1,16 +1,24 @@
 <template>
   <div class="page-content-404">
-    <h1><small>404</small>Page Not Found</h1>
+    <h1><small>404</small>"Not all who wander are lost."</h1>
     <p class="lead">
-      We're sorry, it looks like you have a reached a location for a page that
-      doesn't exist.
+      Well, at least in this case, we can't find where you were headed. Let us
+      humbly provide a few options to get you back on track:
     </p>
-    <asd20-button class="go-back" reversed :link="referrerLink"
-      >Go back to the page you came from
-    </asd20-button>
-    <asd20-button class="go-back"reversed :link="homeLink"
-      >Go back to our Home Page
-    </asd20-button>
+    <div class="options">
+      <asd20-button class="option-button" reversed @click.native="redirectHome"
+        >Go back to the page you came from
+      </asd20-button>
+      <asd20-button
+        class="option-button"
+        reversed
+        @click.native="redirectToPrevious"
+        >Go back to our Home Page
+      </asd20-button>
+      <asd20-button class="option-button" reversed @click.native="trySearch"
+        >Try a Search
+      </asd20-button>
+    </div>
     <asd20-list
       v-if="suggestedPagesListItems.length > 0"
       :items="suggestedPagesListItems"
@@ -20,6 +28,7 @@
     />
     <!-- Site Navigation -->
     <asd20-site-navigation
+      ref="siteNavigation"
       :navigation="navigation"
       :action-items="actionItems"
       @update:menuOpen="$emit('update:menuOpen', $event)"
@@ -79,11 +88,13 @@ export default {
 
   data: () => ({
     suggestedPagesListItems: [],
-    referrerLink: document.referrer || window.location.origin,
-    homeLink: window.location.origin,
+    referrerLink: '',
+    homeLink: '',
   }),
 
   mounted() {
+    this.referrerLink = document.referrer || window.location.origin
+    this.homeLink = window.location.origin
     this.findSuggestedPages()
   },
 
@@ -98,6 +109,15 @@ export default {
         this.suggestedPagesListItems = mapPagesToListItems(pages)
       }
     },
+    trySearch() {
+      this.$refs.siteNavigation.toggleSearch()
+    },
+    redirectHome() {
+      window.location.href = this.homeLink
+    },
+    redirectToPrevious() {
+      window.location.href = this.referrerLink
+    },
   },
 }
 </script>
@@ -118,7 +138,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  padding: space(1);
+  padding: space(2) space(1);
   box-sizing: border-box;
   h1 {
     text-align: center;
@@ -137,10 +157,17 @@ export default {
   p {
     text-align: center;
   }
-  .go-back {
-    margin: 1rem;
-    width: 30%;
+  .options {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: center;
+    .option-button {
+      margin: 1rem;
+      width: 300px;
+    }
   }
+
   .not-found {
     display: flex;
     height: 100%;
@@ -159,9 +186,9 @@ export default {
 }
 
 @media (min-width: 1024px) {
-  .page-content {
-    grid-row: 1 / -1;
-    padding: space(3);
+  .page-content-404 {
+    margin-left: space(3);
+    padding: space(1) space(3);
     box-sizing: border-box;
     .asd20-list {
       margin-top: space(2);

package/src/helpers/queryPages.js

@@ -73,18 +73,12 @@ export default async function queryPages({
   let { data } = await axios({
     method: 'post',
     headers: {
-      'api-key':
-        process.env.VUE_APP_AZURE_SEARCH_KEY ||
-        process.env.GRIDSOME_AZURE_SEARCH_KEY,
+      'api-key': process.env.AZURE_SEARCH_KEY,
     },
     params: {
-      'api-version':
-        process.env.VUE_APP_AZURE_SEARCH_API_VERSION ||
-        process.env.GRIDSOME_AZURE_SEARCH_API_VERSION,
+      'api-version': process.env.AZURE_SEARCH_VERSION,
     },
-    url: `${process.env.VUE_APP_AZURE_SEARCH_ENDPOINT ||
-      process.env
-        .GRIDSOME_AZURE_SEARCH_ENDPOINT}/indexes/pages-index/docs/search`,
+    url: `${process.env.AZURE_SEARCH_ENDPOINT}`,
     data: Object.assign(
       {},
       searchPayload({