@asd20/ui 3.2.430 → 3.2.433

package/package.json

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

package/src/components/molecules/Asd20Picker/index.vue

@@ -2,6 +2,7 @@
   <div class="asd20-picker" :class="{ 'asd20-picker--reversed': reversed }">
     <slot />
     <asd20-button
+      class="picker-button"
       :label="buttonLabel"
       @click.native="open = true"
       icon="chevron"
@@ -21,6 +22,9 @@
       :icon="modalIcon"
     >
       <asd20-viewport scrollable>
+        <asd20-list-item class="district-link">
+          <a href="https://asd20.org">Academy District 20 Website</a>
+        </asd20-list-item>
         <asd20-accordion :opened="true" label="Favorites">
           <transition-group name="fade" mode="in-out">
             <!-- <asd20-checkbox
@@ -66,6 +70,7 @@
               :icon="icon"
               v-on:eventLabelClick="catchFavorites"
             /> -->
+
             <div
               class="favorite-list-item"
               v-for="item in categoryItem.itemsSorted"
@@ -89,12 +94,13 @@
 </template>
 
 <script>
-import Asd20Checkbox from '../../atoms/Asd20Checkbox'
+// import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Accordion from '../../molecules/Asd20Accordion'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
+import Asd20ListItem from '../../molecules/Asd20ListItem'
 
 // Functionality
 import { setCookie, getCookie } from '../../../helpers/cookieRecipe'
@@ -104,12 +110,13 @@ export default {
   name: 'Asd20Picker',
 
   components: {
-    Asd20Checkbox,
+    // Asd20Checkbox,
     Asd20Modal,
     Asd20Button,
     Asd20Icon,
     Asd20Accordion,
     Asd20Viewport,
+    Asd20ListItem,
   },
   props: {
     // All items of that type that exist
@@ -236,6 +243,9 @@ export default {
 .asd20-picker {
   position: relative;
   display: flex;
+  .picker-button {
+    // margin: space(0.1) space(0);
+  }
   .favorite-list-item {
     display: flex;
     align-items: center;
@@ -259,7 +269,8 @@ export default {
   }
   .asd20-button {
     position: relative;
-    margin-left: space(1);
+    margin-left: space(0.5);
+    padding: space(0.5) space(0.25);
     &::before {
       content: '';
       position: absolute;
@@ -282,20 +293,35 @@ export default {
 }
 
 .asd20-picker__modal {
+  .district-link {
+    margin-left: space(0.5) !important;
+    font-weight: bold;
+    font-size: 1rem;
+    a {
+      color: var(--website-page__title-color);
+      text-decoration: none;
+    }
+  }
   height: min-content;
   &::v-deep .asd20-accordion__content {
     padding: 0;
   }
-  &::v-deep .asd20-checkbox {
-    margin-left: space(1);
-    width: auto;
-  }
+  // &::v-deep .asd20-checkbox {
+  //   margin-left: space(1);
+  //   width: auto;
+  // }
 }
 
 @media (min-width: 1024px) {
+  .asd20-picker {
+    .picker-button {
+      margin: space(0.75);
+    }
+  }
   .asd20-picker__modal {
     &::v-deep .asd20-modal {
-      width: 30vw;
+      width: 40vw;
+      min-width: 400px;
       flex-grow: 0;
       height: min-content;
     }

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

@@ -1,6 +1,7 @@
 <template>
   <header class="asd20-app-header">
     <asd20-button
+      v-show="!zoomed"
       class="back-button"
       icon="chevron"
       :icon-angle="-90"
@@ -38,6 +39,18 @@ export default {
     backLink: { type: String, default: 'https://www.asd20.org' },
     backLabel: { type: String, default: 'asd20.org' },
   },
+  data: () => ({
+    zoomed: false,
+  }),
+  mounted() {
+    this.zoomed = window.innerHeight <= 500
+    window.addEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.zoomed = window.innerHeight <= 500
+    },
+  },
 }
 </script>
 

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

@@ -6,16 +6,15 @@
     role="banner"
   >
     <div class="asd20-image-header__top" v-if="organizationOptions.length > 0">
-      <asd20-district-logo
+      <!-- <asd20-district-logo
         v-show="
           organization.title === 'Academy District 20' &&
             mq !== 'sm' &&
             mq !== 'md'
         "
-      ></asd20-district-logo>
+      ></asd20-district-logo> -->
       <client-only>
         <asd20-organization-picker
-          v-show="organization.title !== 'Academy District 20'"
           :organization-options="organizationOptions"
           :organization="organization"
         ></asd20-organization-picker>
@@ -71,6 +70,12 @@
               v-if="publishDateTime"
               :dateTime="publishDateTime"
             />
+            <br />
+            <span v-if="modifiedDateTime" class="date-prefix">Updated:</span>
+            <asd20-formatted-date
+              v-if="modifiedDateTime"
+              :dateTime="modifiedDateTime"
+            />
             <asd20-tag-group v-if="categories.length" :tags="categories" />
             <slot name="meta" />
           </div>
@@ -136,7 +141,7 @@
 <script>
 import scrollTrack from '../../../directives/scroll-track'
 import Asd20Button from '../../atoms/Asd20Button'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20Breadcrumb from '../../../components/atoms/Asd20Breadcrumb'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
@@ -148,7 +153,7 @@ export default {
   name: 'Asd20ImageHeader',
   components: {
     Asd20Button,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
     Asd20OrganizationPicker,
     Asd20Breadcrumb,
     Asd20TagGroup,
@@ -316,13 +321,13 @@ export default {
     align-items: center;
     padding: space(0.5) space(1);
 
-    &::v-deep .asd20-picker {
+    &::v-deep .asd20-organization-picker {
       display: none;
     }
 
-    &::v-deep .asd20-district-logo {
-      display: none;
-    }
+    // &::v-deep .asd20-district-logo {
+    //   display: none;
+    // }
 
     &::v-deep .notification-group--status {
       margin-top: space(0.5);
@@ -392,13 +397,13 @@ export default {
   }
 
   &__call-to-action {
-    margin: space(-1) space(2) space(-1) space(1);
+    margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
     .asd20-button {
       box-sizing: border-box;
-      flex-grow: 1;
-      max-width: 40vw;
+      flex-shrink: 1;
+      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -462,9 +467,9 @@ export default {
         width: 100%;
         height: 100%;
         background: linear-gradient(
-          70deg,
+          30deg,
           rgba(6, 11, 31, 0.7) 10%,
-          rgba(6, 11, 31, 0.5) 40%,
+          rgba(6, 11, 31, 0.5) 50%,
           transparent 70%
         );
       }
@@ -478,11 +483,11 @@ export default {
       left: 0;
     }
     &__title-content {
-      max-width: 50%;
+      max-width: 80%;
     }
 
     &::after {
-      top: space(5);
+      top: space(6);
       bottom: space(-2);
       right: space(0);
       left: space(4);
@@ -511,30 +516,33 @@ export default {
       padding: 0 space(3);
       z-index: 5;
     }
-
-    &__call-to-action {
-      margin: space(-1) 60vw space(-1) space(3);
-      .asd20-button {
-        font-size: 1rem !important;
-      }
-    }
   }
 }
 
 @media (min-width: 1024px) {
   .asd20-image-header {
-    &::v-deep .asd20-picker {
+    .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(1) auto space(1) 0;
+      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);
-    }
+    // &::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;
     }
@@ -550,6 +558,19 @@ export default {
         order: 2;
       }
     }
+    &__title-content {
+      max-width: 50%;
+    }
+    &__call-to-action {
+      margin: space(-1) 60vw space(-1) space(3);
+      .asd20-button {
+        font-size: 1rem !important;
+        flex-shrink: 0;
+      }
+    }
+    &__top {
+      margin: space(0.5) 0;
+    }
 
     .back {
       padding: 0;

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

@@ -1,26 +1,37 @@
 <template>
-  <Asd20Picker
-    icon="star"
-    cookieLabel="OrganizationPicker"
-    :items="organizationOptions"
-    :itemsByCategory="orgItemsByCategory"
-    :modalLabel="modalLabel"
-    :reversed="reversed"
+  <div
+    class="asd20-organization-picker"
+    :class="{ 'asd20-organization-picker--reversed': reversed }"
   >
-    <asd20-logo
-      :title="orgTitle"
-      :subtitle="orgLevel"
-      :image="organization.logoImageUrl"
-      :link="organization.website"
-      :size="logoSize"
-      bordered
+    <asd20-picker
+      :class="{ 'asd20-picker--reversed': reversed }"
+      icon="star"
+      cookieLabel="OrganizationPicker"
+      :items="organizationOptions"
+      :itemsByCategory="orgItemsByCategory"
+      :modalLabel="modalLabel"
       :reversed="reversed"
-      :abbreviated="abbreviated"
-    />
-  </Asd20Picker>
+    >
+      <asd20-district-logo
+        v-show="organization.title === 'Academy District 20'"
+      ></asd20-district-logo>
+      <asd20-logo
+        v-show="organization.title !== 'Academy District 20'"
+        :title="orgTitle"
+        :subtitle="orgLevel"
+        :image="organization.logoImageUrl"
+        :link="organization.website"
+        :size="logoSize"
+        bordered
+        :reversed="reversed"
+        :abbreviated="abbreviated"
+      />
+    </asd20-picker>
+  </div>
 </template>
 
 <script>
+import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20Picker from '../../molecules/Asd20Picker'
 import Asd20Logo from '../../atoms/Asd20Logo'
 import {
@@ -31,6 +42,7 @@ import {
 export default {
   name: 'Asd20OrganizationPicker',
   components: {
+    Asd20DistrictLogo,
     Asd20Picker,
     Asd20Logo,
   },
@@ -46,6 +58,9 @@ export default {
   },
 
   computed: {
+    // mq() {
+    //   return this.$mq || 'sm'
+    // },
     orgItemsByCategory() {
       let categories = ['Elementary', 'Middle', 'High']
       let sorted = []
@@ -83,4 +98,43 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+
+.asd20-organization-picker {
+  .asd20-district-logo {
+    margin: auto;
+    padding-left: space(0.25);
+  }
+}
+@media (min-width: 768px) {
+  .asd20-organization-picker {
+    .asd20-district-logo {
+      height: space(1.5);
+      padding-left: 0 !important;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-organization-picker {
+    .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);
+    }
+    &--reversed {
+      .asd20-district-logo {
+        height: space(1.5);
+        margin: space(1) auto space(1) 0;
+        display: block;
+        --fill-one: white;
+        --fill-two: white;
+      }
+    }
+  }
+}
+</style>

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

@@ -6,16 +6,8 @@
     role="banner"
   >
     <div class="asd20-page-header__top" v-if="organizationOptions.length > 0">
-      <asd20-district-logo
-        v-show="
-          organization.title === 'Academy District 20' &&
-            mq !== 'sm' &&
-            mq !== 'md'
-        "
-      ></asd20-district-logo>
       <client-only>
         <asd20-organization-picker
-          v-show="organization.title !== 'Academy District 20'"
           :organization-options="organizationOptions"
           :organization="organization"
         ></asd20-organization-picker>
@@ -142,7 +134,7 @@
 <script>
 import scrollTrack from '../../../directives/scroll-track'
 import Asd20Button from '../../atoms/Asd20Button'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20Breadcrumb from '../../../components/atoms/Asd20Breadcrumb'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
@@ -154,7 +146,7 @@ export default {
   name: 'Asd20PageHeader',
   components: {
     Asd20Button,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
     Asd20OrganizationPicker,
     Asd20Breadcrumb,
     Asd20TagGroup,
@@ -323,13 +315,13 @@ export default {
     align-items: center;
     padding: space(0.5) space(1);
 
-    &::v-deep .asd20-picker {
+    &::v-deep .asd20-organization-picker {
       display: none;
     }
 
-    &::v-deep .asd20-district-logo {
-      display: none;
-    }
+    // &::v-deep .asd20-district-logo {
+    //   display: none;
+    // }
 
     &::v-deep .notification-group--status {
       margin-top: space(0.5);
@@ -398,13 +390,13 @@ export default {
   }
 
   &__call-to-action {
-    margin: space(-1) space(2) space(-1) space(1);
+    margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
     .asd20-button {
       box-sizing: border-box;
-      flex-grow: 1;
-      max-width: 40vw;
+      flex-shrink: 1;
+      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -460,7 +452,7 @@ export default {
       padding: 0;
     }
     &::after {
-      top: space(5);
+      top: space(6);
       bottom: space(-2);
       right: space(0);
       left: space(4);
@@ -513,21 +505,22 @@ export default {
       }
     }
 
-    &::v-deep .asd20-picker {
+    &::v-deep .asd20-organization-picker {
       display: flex;
-      margin: space(1) auto space(1) 0;
+      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);
-    }
+    // &::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);
+    // }
 
     &__top {
       padding: 0 space(3);
+      margin: space(0.5) 0;
     }
     &__tools {
       flex-direction: row-reverse;
@@ -550,6 +543,7 @@ export default {
       margin: space(-1) 60vw space(-1) space(3);
       .asd20-button {
         font-size: 1rem !important;
+        flex-shrink: 0;
       }
     }
   }

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

@@ -12,18 +12,14 @@
       :collapsed="collapsed"
       @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
     >
-      <asd20-district-logo
+      <!-- <asd20-district-logo
         v-show="
           organization.title === 'Academy District 20' &&
             (mq === 'sm' || mq === 'md')
         "
-      ></asd20-district-logo>
+      ></asd20-district-logo> -->
       <client-only>
         <asd20-organization-picker
-          v-show="
-            organization.title !== 'Academy District 20' &&
-              (mq === 'sm' || mq === 'md')
-          "
           :organization-options="organizationOptions"
           :organization="organization"
           logoSize="xs"
@@ -95,7 +91,7 @@ import Asd20ActionMenu from '../../../components/organisms/Asd20ActionMenu'
 import Asd20SiteMenu from '../../../components/organisms/Asd20SiteMenu'
 import Asd20SiteSearch from '../../../components/organisms/Asd20SiteSearch'
 import Asd20Navbar from '../../../components/organisms/Asd20Navbar'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 
 import VScrollLock from 'v-scroll-lock'
@@ -108,7 +104,7 @@ export default {
     Asd20SiteMenu,
     Asd20SiteSearch,
     Asd20Navbar,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
     Asd20OrganizationPicker,
   },
   props: {

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

@@ -35,7 +35,11 @@
       </template>
     </asd20-app-header>
     <nav
-      class="asd20-app-template__toolbar"
+      :class="
+        zoomed
+          ? 'asd20-app-template__toolbar asd20-app-template__toolbar-zoomed'
+          : 'asd20-app-template__toolbar'
+      "
       v-if="searchable || $slots['toolbar-start'] || $slots['toolbar-end']"
     >
       <slot name="toolbar-start"></slot>
@@ -168,7 +172,17 @@ export default {
 
   data: () => ({
     sidebarOpen: false,
+    zoomed: false,
   }),
+  mounted() {
+    this.zoomed = window.innerHeight <= 500
+    window.addEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.zoomed = window.innerHeight <= 500
+    },
+  },
 }
 </script>
 
@@ -192,6 +206,7 @@ export default {
     border-bottom: 1px solid var(--color__tertiary);
     flex-shrink: 0;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     .asd20-search-field {
       flex-grow: 1;
@@ -202,6 +217,9 @@ export default {
       }
     }
   }
+  &__toolbar-zoomed {
+    flex-wrap: nowrap;
+  }
 
   &__main {
     position: relative;

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

@@ -233,7 +233,7 @@ export default {
     margin-top: 0;
     .asd20-notification-group--floating {
       position: absolute;
-      top: space(1.5);
+      // top: space(1.5);
       // .bell {
       //   span {
       //     background: var(--color__accent);

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

@@ -60,7 +60,13 @@
 
     <!-- Headers -->
     <section class="logo-header">
-      <asd20-district-logo v-show="mq !== 'sm' && mq !== 'md'" />
+      <client-only>
+        <asd20-organization-picker
+          :organization-options="organizationOptions"
+          :organization="organization"
+        ></asd20-organization-picker>
+      </client-only>
+      <slot name="top" />
       <template>
         <div class="header-notifications">
           <client-only>
@@ -210,7 +216,9 @@ import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
 // import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
+
+// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 // import Asd20FactoidsSection from '../../../components/organisms/Asd20FactoidsSection'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
@@ -239,7 +247,8 @@ export default {
     Asd20PageFooter,
     Asd20SiteNavigation,
     Asd20QuicklinksMenu,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
+    Asd20OrganizationPicker,
     Asd20NotificationGroup,
     // Asd20FactoidsSection,
     Asd20FeedsSection,
@@ -277,8 +286,8 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    & /deep/ .asd20-district-logo {
-      height: space(3);
+    .asd20-picker {
+      display: none;
     }
     & /deep/ .notification-group--status .notifications {
       padding: 0.25em;
@@ -352,6 +361,7 @@ export default {
     display: block;
     margin-left: space(3);
     margin-top: 0;
+
     .logo-header {
       --fill-one: #0e2c6c;
       --fill-two: #9fa1a2;
@@ -360,19 +370,11 @@ export default {
       z-index: 3;
       display: flex;
       justify-content: space-between;
-      // .notification-group--floating {
-      //   .bell {
-      //     span {
-      //       background: var(--color__accent);
-      //       top: -0.6em !important;
-      //       right: -0.6em !important;
-      //     }
-      //   }
-      // }
-      .asd20-district-logo {
-        margin: space(1) space(1) space(1) space(1);
-        line-height: 2;
-        min-width: 30rem;
+      .asd20-picker {
+        display: inherit;
+        .asd20-district-logo {
+          height: space(3) !important;
+        }
       }
       .header-notifications {
         display: flex;
@@ -392,8 +394,8 @@ export default {
       }
     }
   }
-  #site-navigation .asd20-district-logo {
-    display: none;
-  }
+  // #site-navigation .asd20-district-logo {
+  //   display: none;
+  // }
 }
 </style>

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

@@ -33,9 +33,15 @@
       v-if="pageHeaderContent"
       v-bind="pageHeaderContent"
     >
-      <asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
-
       <template slot="top">
+        <client-only>
+          <asd20-organization-picker
+            :organization-options="organizationOptions"
+            :organization="organization"
+            reversed
+          ></asd20-organization-picker>
+        </client-only>
+
         <client-only>
           <asd20-notification-group
             :notifications="activeNotificationsByType.status"
@@ -88,10 +94,10 @@
       <slot name="page-footer" />
 
       <!-- analytics requested by Kyle Blakely -->
-      <img
+      <!-- <img
         src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
         alt=""
-      />
+      /> -->
     </asd20-page-footer>
   </div>
 </template>
@@ -108,7 +114,8 @@ import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 // import Asd20FactoidsSection from '../../../components/organisms/Asd20FactoidsSection'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
@@ -134,7 +141,8 @@ export default {
     Asd20PageFooter,
     Asd20SiteNavigation,
     Asd20QuicklinksMenu,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
+    Asd20OrganizationPicker,
     Asd20NotificationGroup,
     // Asd20FactoidsSection,
     Asd20FeedsSection,
@@ -162,6 +170,12 @@ export default {
   flex-shrink: 0;
   overflow-y: auto;
   margin-top: space(2.25);
+
+  .asd20-video-header {
+    .asd20-organization-picker {
+      display: none;
+    }
+  }
   .asd20-video-header-content {
     position: absolute;
     top: space(2);
@@ -208,8 +222,16 @@ export default {
     //   }
     // }
   }
-  #site-navigation .asd20-district-logo {
-    display: none;
+  .asd20-video-header {
+    .asd20-organization-picker {
+      display: block !important;
+      .asd20-picker {
+        .picker-button {
+          margin: space(1);
+          padding: space(0.75);
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -0,0 +1,65 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20WayfindingAlternateTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
+import notifications from '../../../data/messages/notifications'
+
+const info = {
+  summary: 'Wayfinding Alternate Page Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20WayfindingAlternateTemplate,
+  },
+  watch: {
+    languageCode(newValue, oldValue) {
+      console.log(newValue, oldValue)
+    },
+  },
+
+  data: () => ({ pageQueryResult, languageCode: 'es' }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', true)
+        ? notifications || empty
+        : empty
+    },
+  },
+
+}
+
+const stories = storiesOf('Templates - Asd20WayfindingAlternateTemplate', module)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+    <Asd20WayfindingAlternateTemplate
+      v-bind="templateProps"
+      :menu-open.sync="menuOpen"
+      :search-open.sync="searchOpen"
+
+      @announcements-in-view="loadAnnouncements"
+      @stories-in-view="loadStories"
+      @events-in-view="loadEvents"
+      @files-in-view="loadFiles"
+      @people-in-view="loadPeople"
+      :languageCode.sync="languageCode"
+    />`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="asd20-template-wayfinding-alternate">
+    <!-- Skip Nav -->
+    <asd20-skip-to></asd20-skip-to>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
+    <!-- Banner Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.banner"
+        group-type="banner"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-show="pageHeaderContent"
+      v-bind="pageHeaderContent"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :languageCode="languageCode"
+      v-on="$listeners"
+      :breadcrumb-links="breadcrumbLinks"
+    >
+      <!-- Floating Notifications -->
+      <template slot="top">
+        <client-only>
+          <asd20-notification-group
+            class="asd20-notification-group--floating"
+            :notifications="activeNotificationsByType.floating"
+            :total-dismissed-notifications="totalDismissedNotifications"
+            group-type="floating"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
+    </asd20-page-header>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      grid
+    >
+      <!-- Inline-Notifications -->
+      <template slot="before">
+        <client-only>
+          <asd20-notification-group
+            :notifications="activeNotificationsByType.inline"
+            group-type="inline"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- Feeds -->
+      <template slot="before">
+        <asd20-feeds-section
+          :announcements="announcements"
+          :announcements-feed-props="announcementsFeedProps"
+          @announcements-in-view="$emit('announcements-in-view')"
+          :stories="stories"
+          :stories-feed-props="storiesFeedProps"
+          @stories-in-view="$emit('stories-in-view')"
+          :events="events"
+          :events-feed-props="eventsFeedProps"
+          @events-in-view="$emit('events-in-view')"
+        ></asd20-feeds-section>
+      </template>
+
+      <slot></slot>
+    </asd20-page-content>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="
+        widgetsSectionProps.footer ||
+          widgetsSectionProps.sidebar ||
+          $slots.widgets
+      "
+      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      @people-in-view="$emit('people-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <slot name="before-footer" />
+
+    <!-- Quick Links -->
+    <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
+      <slot name="quicklinks-menu" />
+    </asd20-quicklinks-menu>
+
+    <!-- Footer -->
+    <asd20-page-footer
+      :organization="organization"
+      :socialLinks="socialLinks"
+      :disclosureLinks="disclosureLinks"
+      :websiteLogoProps="websiteLogoProps"
+    >
+      <slot name="page-footer" />
+    </asd20-page-footer>
+  </div>
+</template>
+
+<script>
+// Components
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+
+import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
+// import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
+
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
+
+// import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+export default {
+  name: 'Asd20WayfindingAlternateTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    // Asd20MediaSection,
+  },
+  computed: {
+    wayFindingPrimaryMessages() {
+      // wayfinding page
+      return (
+        this.messages
+          // Remove the first message, limit
+          .slice(
+            1,
+            Math.min(this.messages.length, this.primaryMessageLimit + 1)
+          )
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+@import '../../../design/_typography.scss';
+@import '../../../design/_template.scss';
+@import '../../../design/_print.scss';
+@import '../../../design/tokens.css';
+
+.asd20-template-wayfinding-alternate {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .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;
+      }
+    }
+  }
+  .asd20-feeds-section {
+    margin-top: space(2);
+    .asd20-swiper-feed:first-child {
+      padding-top: space(2);
+      padding-bottom: space(1);
+      &::after {
+        top: space(1);
+      }
+    }
+    .asd20-swiper-feed:last-child {
+      // margin-top: space(-1);
+      padding-bottom: space(2);
+      &::after {
+        bottom: space(1);
+      }
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-wayfinding-alternate {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-page-content {
+      margin-top: space(0);
+    }
+  }
+}
+</style>

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

@@ -70,6 +70,7 @@
           ></asd20-notification-group>
         </client-only>
       </template>
+      <!-- Announcement Feed -->
       <template slot="before">
         <asd20-feeds-section
           :announcements="announcements"
@@ -80,6 +81,8 @@
 
       <slot></slot>
     </asd20-page-content>
+
+    <!-- Feeds -->
     <asd20-feeds-section
       :stories="stories"
       :stories-feed-props="storiesFeedProps"