@asd20/ui 3.2.568 → 3.2.569

package/package.json

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

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

@@ -198,7 +198,7 @@ export default {
     }
     &__top {
       position: absolute;
-      padding: space(0.5) space(1);
+      padding: space(0.5) space(0);
     }
   }
 }

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

@@ -91,6 +91,11 @@
 
           <client-only>
             <Asd20LanguageTranslation
+              :class="
+                activeNotificationsByType.status.length > 0
+                  ? ''
+                  : 'translation-button-adjust'
+              "
               v-if="languageCode"
               reversed
               :languageCode="languageCode"
@@ -312,7 +317,7 @@ export default {
     background: #fff;
     position: relative;
     z-index: 100;
-    padding: space(0.5) space(1);
+    padding: space(0) space(0);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -334,12 +339,12 @@ export default {
       background: rgba(255, 255, 255, 1);
       border-radius: 50%;
       border: 1px solid var(--website-page__alternate-background-color);
-      margin-left: 0.5rem;
+      // margin-left: 0.5rem;
       .asd20-select-input {
         padding: 0.25rem 0.25rem;
         color: currentColor;
         font-family: Ariel, Arial, Helvetica, sans-serif;
-        &__select-wrapper {
+        &__overlay-label {
           display: none;
         }
       }
@@ -353,6 +358,11 @@ export default {
     .asd20-language-loader {
       order: 1;
     }
+    .translation-button-adjust {
+      position: absolute;
+      top: space(1.375);
+      right: space(0.5);
+    }
     & /deep/ .notification-group--status .notifications {
       padding: 0.25em;
       border-radius: 1em;
@@ -396,7 +406,7 @@ export default {
     .double-notification-wrapper {
       display: flex;
       flex-direction: row;
-      justify-content: flex-end;
+      justify-content: space-around;
       width: 100%;
       align-items: center;
       flex-wrap: wrap;
@@ -425,6 +435,23 @@ export default {
   // }
 }
 
+@media (min-width: 667px) {
+  .asd20-district-home-template {
+    .logo-header {
+      padding: 0 space(1);
+    }
+    .translation-button-adjust {
+      position: relative !important;
+      top: 0 !important;
+      right: 0 !important;
+    }
+    .double-notification-wrapper {
+      padding-right: space(1);
+      justify-content: flex-end !important;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-district-home-template {
     display: block;

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

@@ -68,11 +68,11 @@
 
             <client-only>
               <Asd20LanguageTranslation
-                :class="{
-                  'translation-button-adjust':
-                    activeNotificationsByType.floating.length > 0 ||
-                    activeNotificationsByType.status.length > 0,
-                }"
+                :class="
+                  activeNotificationsByType.status.length > 0
+                    ? ''
+                    : 'translation-button-adjust'
+                "
                 v-if="languageCode"
                 reversed
                 :languageCode="languageCode"
@@ -215,7 +215,7 @@ export default {
     }
     .asd20-language-translation {
       position: absolute;
-      top: 1.5rem;
+      top: 3.5rem;
       right: 0.5rem;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
@@ -224,7 +224,7 @@ export default {
         padding: 0.25rem 0.25rem;
         color: currentColor;
         font-family: Ariel, Arial, Helvetica, sans-serif;
-        &__select-wrapper {
+        &__overlay-label {
           display: none;
         }
       }
@@ -240,7 +240,9 @@ export default {
     }
 
     .translation-button-adjust {
-      top: 3.5rem;
+      position: absolute;
+      top: space(1);
+      right: space(0.5);
     }
     .weather-link {
       text-decoration: none;
@@ -311,7 +313,12 @@ export default {
         }
       }
       .translation-button-adjust {
-        top: 0;
+        position: absolute;
+        top: space(1);
+        right: space(0.5);
+      }
+      .double-notification-wrapper {
+        justify-content: center;
       }
     }
     .asd20-video-header-content {
@@ -338,12 +345,19 @@ export default {
     // }
   }
   .asd20-video-header {
+    .translation-button-adjust {
+      position: absolute;
+      top: space(-1) !important;
+      right: space(0) !important;
+    }
+    .double-notification-wrapper {
+      justify-content: flex-end !important;
+    }
     .asd20-video-header-content {
       position: absolute;
       bottom: 20%;
       transform: translate3d(0, calc(-70% * var(--scroll-progress)), 0);
       animation: slide_left 1s ease-in-out 0.5s both;
-
       .lead {
       }
     }

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

@@ -235,18 +235,18 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-end;
-    margin-right: 0.25rem;
+    margin-right: space(1.5);
   }
   .asd20-language-translation {
     background: rgba(255, 255, 255, 1);
     border-radius: 50%;
     border: 1px solid var(--website-page__alternate-background-color);
-    margin: 0 0.05rem;
+    margin-left: 0.05rem;
     .asd20-select-input {
       padding: 0.25rem 0.25rem;
       color: currentColor;
       font-family: Ariel, Arial, Helvetica, sans-serif;
-      &__select-wrapper {
+      &__overlay-label {
         display: none;
       }
     }
@@ -304,8 +304,11 @@ export default {
 
 @media (min-width: 667px) {
   .asd20-school-home-template {
+    .notification-translation-container {
+      margin-right: space(1);
+    }
     .asd20-language-translation {
-      margin: 0 0.5rem;
+      margin-left: 0.5rem;
     }
   }
 }
@@ -315,6 +318,9 @@ export default {
     display: block;
     margin-left: space(3);
     margin-top: 0;
+    .notification-translation-container {
+      margin-right: 0.25rem;
+    }
     .asd20-notification--status {
       .asd20-notification__content {
         padding-right: 0;

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

@@ -238,7 +238,7 @@ export default {
       padding: 0.25rem 0.25rem;
       color: currentColor;
       font-family: Ariel, Arial, Helvetica, sans-serif;
-      &__select-wrapper {
+      &__overlay-label {
         display: none;
       }
     }
@@ -286,7 +286,7 @@ export default {
     }
     .asd20-language-translation {
       right: space(1);
-      top: space(0.5) !important;
+      top: space(1) !important;
     }
     .asd20-notification-group--floating {
       right: space(1);