@asd20/ui 3.2.836 → 3.2.838

package/package.json

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

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

@@ -1,6 +1,7 @@
 <template>
   <div :class="classes">
     <asd20-action-menu-item
+      v-if="!emptyNav"
       ref="menuButton"
       id="menu-toggle-button"
       aria-owns="main-menu-list"
@@ -46,6 +47,7 @@ export default {
     condensed: { type: Boolean, default: false },
     desktop: { type: Boolean, default: false },
     zoomed: { type: Boolean, default: false },
+    emptyNav: { type: Boolean, default: false },
   },
   computed: {
     size() {

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

@@ -113,11 +113,16 @@ export default {
     font-weight: 900;
     line-height: 1.5;
     color: var(--website-homepage-header__title-color);
+    animation: slide_left 1.5s ease-in-out 0.5s both;
+  }
+  &::v-deep .lead {
+    animation: slide_left 1.25s ease-in-out 1s both;
+  }
+
     // -webkit-background-clip: text;
     // -webkit-text-fill-color: transparent;
     // background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
     // background-size: 30% auto;
-  }
   &::v-deep .lead {
     @include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
     color: var(--website-homepage-header__foreground-color);
@@ -174,6 +179,19 @@ export default {
   }
 }
 
+@keyframes slide_left {
+  from {
+    opacity: 0;
+    margin-left: 300px;
+    margin-right: -300px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 @media (min-width: 1024px) {
   .photostrip {
     height: 40vh;

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

@@ -10,6 +10,7 @@
       :zoomed="zoomed"
       :desktop="desktop"
       @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
+      :emptyNav="emptyNav"
     >
       <!-- <asd20-district-logo
         v-show="
@@ -137,6 +138,9 @@ export default {
     mq() {
       return this.$mq || 'sm'
     },
+    emptyNav() {
+      return this.navigation.length <= 1
+    },
   },
   mounted() {
     this.desktop = window.innerWidth >= 1024

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

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

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

@@ -45,7 +45,7 @@
                 : 'notification-wrapper'
             "
           >
-            <client-only>
+            <!-- <client-only>
               <a
                 class="weather-link"
                 href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
@@ -57,7 +57,7 @@
                   @toggle-all="$emit('toggle-all')"
                 />
               </a>
-            </client-only>
+            </client-only> -->
 
             <client-only>
               <Asd20LanguageTranslation
@@ -215,8 +215,8 @@ export default {
   overflow-y: auto;
   margin-top: space(2.25);
   nav {
-    #menu-toggle-button {
-      display: none;
+    .asd20-picker {
+      margin-left: space(1);
     }
   }
   .logo-header {
@@ -266,11 +266,11 @@ export default {
     .asd20-language-loader {
       order: 1;
     }
-    .translation-button-adjust {
-      position: absolute;
-      top: space(0.25);
-      right: space(0.25);
-    }
+    // .translation-button-adjust {
+    //   position: absolute;
+    //   top: space(0.25);
+    //   right: space(0.25);
+    // }
     & ::v-deep .notification-group--status .notifications {
       padding: 0.375rem;
       border-radius: 3rem;
@@ -306,12 +306,18 @@ export default {
       // }
     }
     .notification-wrapper {
+      position: absolute;
+      top: space(0.5);
+      right: space(0.5);
       display: flex;
       flex-direction: row;
-      justify-content: center;
+      justify-content: flex-end;
       width: 100%;
     }
     .double-notification-wrapper {
+      position: absolute;
+      top: space(1);
+      right: space(0.5);
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
@@ -349,10 +355,10 @@ export default {
     .logo-header {
       padding: 0 space(1);
     }
-    .translation-button-adjust {
-      top: space(-0.5);
-      right: space(0.5);
-    }
+    // .translation-button-adjust {
+    //   top: space(-0.5);
+    //   right: space(0.5);
+    // }
     .double-notification-wrapper {
       // padding-right: space(1);
       justify-content: flex-end !important;
@@ -384,6 +390,9 @@ export default {
       }
       .notification-wrapper,
       .double-notification-wrapper {
+        position: relative;
+        top: 0;
+        right: 0;
         display: flex;
         justify-content: flex-end;
         align-items: center;