@asd20/ui 3.2.432 → 3.2.435

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.432",
+  "version": "3.2.435",
   "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>
@@ -142,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'
@@ -154,7 +153,7 @@ export default {
   name: 'Asd20ImageHeader',
   components: {
     Asd20Button,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
     Asd20OrganizationPicker,
     Asd20Breadcrumb,
     Asd20TagGroup,
@@ -322,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);
@@ -488,7 +487,7 @@ export default {
     }
 
     &::after {
-      top: space(5);
+      top: space(6);
       bottom: space(-2);
       right: space(0);
       left: space(4);
@@ -532,18 +531,18 @@ 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);
+    // }
     &__image {
       max-height: 60vh;
     }
@@ -569,6 +568,9 @@ export default {
         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);
@@ -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;

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

@@ -38,7 +38,7 @@ export default {
   // background-image: var(--website-homepage-header__secondary-background-style);
   // background-position: bottom right !important;
   // background-size: cover !important;
-  padding: space(3) space(1) space(3) space(1);
+  padding: space(3) space(1) space(2) space(1);
 
   &::v-deep .asd20-messaging__heading {
     @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
@@ -117,7 +117,7 @@ export default {
 }
 @media (min-width: 1024px) {
   .asd20-secondary-header {
-    padding: space(3);
+    padding: space(3) space(3) space(2) space(3);
     &::v-deep .lead {
       width: 80%;
     }

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/organisms/Asd20VideoHeader/index.vue

@@ -86,7 +86,8 @@ export default {
   .background-image {
     display: block;
     // position: absolute;
-    height: 90vh;
+    height: 80vh;
+    min-height: 500px;
     width: 100%;
     z-index: -1;
     object-fit: cover;
@@ -101,7 +102,8 @@ export default {
     --fill-one: rgba(255, 255, 255, 1);
     --fill-two: rgba(255, 255, 255, 0.625);
 
-    position: relative;
+    position: absolute;
+    right: 0;
     z-index: 100;
     padding: space(0.5) space(1);
     display: flex;
@@ -231,8 +233,8 @@ export default {
       padding: 0;
       z-index: 3;
       position: absolute;
-      margin: space(2) space(2) space(2) space(2);
-      width: 92%;
+      margin: space(2) space(1) space(2) space(2);
+      width: 95%;
     }
     .scroll-down-indicator {
       display: block;

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

@@ -57,7 +57,7 @@ export default {
     // background: rgba(51, 92, 155, 0.7);
     background: var(--website-homepage-header__background-color);
     padding: space(1);
-    height: 100vh;
+    height: auto;
   }
 
   &::v-deep .asd20-messaging__heading {
@@ -95,7 +95,7 @@ export default {
   .header-messaging-section {
     // border-bottom: 10px solid var(--color__accent);
     &::v-deep .asd20-messaging__content {
-      margin-top: space(5);
+      margin: space(2) 0;
     }
   }
 }
@@ -126,7 +126,7 @@ export default {
         padding: space(1);
         margin-left: space(2);
         .asd20-messaging__content {
-          // max-width: 80%;
+          margin: 0;
         }
         .asd20-messaging__heading {
           @include fluid-type($base-font-size * 1.5, $base-font-size * 2);

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-organization-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-organization-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,28 +33,35 @@
       v-if="pageHeaderContent"
       v-bind="pageHeaderContent"
     >
-      <asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
-
       <template slot="top">
         <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.status"
-            group-type="status"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
-
-        <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>
+          <asd20-organization-picker
+            :organization-options="organizationOptions"
+            :organization="organization"
+            reversed
+          ></asd20-organization-picker>
         </client-only>
+        <div class="notification-wrapper">
+          <client-only>
+            <asd20-notification-group
+              :notifications="activeNotificationsByType.status"
+              group-type="status"
+              @dismiss="$emit('dismiss-notification', $event)"
+              @toggle-all="$emit('toggle-all')"
+            />
+          </client-only>
+
+          <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>
+        </div>
       </template>
       <asd20-video-header-content :messages="messages">
         <slot />
@@ -108,7 +115,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 +142,8 @@ export default {
     Asd20PageFooter,
     Asd20SiteNavigation,
     Asd20QuicklinksMenu,
-    Asd20DistrictLogo,
+    // Asd20DistrictLogo,
+    Asd20OrganizationPicker,
     Asd20NotificationGroup,
     // Asd20FactoidsSection,
     Asd20FeedsSection,
@@ -162,9 +171,20 @@ export default {
   flex-shrink: 0;
   overflow-y: auto;
   margin-top: space(2.25);
+
+  .asd20-video-header {
+    .asd20-organization-picker {
+      display: none;
+    }
+    .notification-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
   .asd20-video-header-content {
-    position: absolute;
-    top: space(2);
+    // position: absolute;
+    // top: space(2);
   }
 }
 .asd20-notification-group--floating {
@@ -187,8 +207,9 @@ export default {
 @media (min-width: 667px) {
   .asd20-district-video-template {
     .asd20-video-header-content {
+      position: absolute;
       top: inherit;
-      bottom: 20%;
+      bottom: 0%;
     }
   }
 }
@@ -208,8 +229,22 @@ export default {
     //   }
     // }
   }
-  #site-navigation .asd20-district-logo {
-    display: none;
+  .asd20-video-header {
+    .asd20-video-header-content {
+      bottom: 20%;
+    }
+    .asd20-organization-picker {
+      display: inherit !important;
+      .asd20-district-logo {
+        height: space(2.25) !important;
+      }
+      .asd20-picker {
+        .picker-button {
+          margin: space(1);
+          padding: space(0.75);
+        }
+      }
+    }
   }
 }
 </style>