@asd20/ui 3.2.836 → 3.2.837

package/package.json

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

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/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
@@ -218,6 +218,9 @@ export default {
     #menu-toggle-button {
       display: none;
     }
+    .asd20-picker {
+      margin-left: space(1);
+    }
   }
   .logo-header {
     --fill-one: rgba(255, 255, 255, 1);
@@ -266,11 +269,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 +309,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 +358,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 +393,9 @@ export default {
       }
       .notification-wrapper,
       .double-notification-wrapper {
+        position: relative;
+        top: 0;
+        right: 0;
         display: flex;
         justify-content: flex-end;
         align-items: center;