@asd20/ui 3.2.568 → 3.2.570

package/package.json

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

package/src/components/atoms/Asd20SelectInput/index.vue

@@ -89,9 +89,10 @@ $input-reversed-text-color: var(--color__accent-t100);
     align-items: center;
     font-size: 1em;
     font-weight: normal;
+    font-family: Ariel, Arial, Helvetica, sans-serif;
     border-radius: 2px;
     cursor: pointer;
-    color: currentColor;
+    color: var(--website-page__foreground-color);
     padding: space(0.25) space(0.5);
     height: space(1.25);
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
@@ -150,7 +151,7 @@ $input-reversed-text-color: var(--color__accent-t100);
   }
 
   &__label {
-    color: currentColor;
+    color: var(--website-page__foreground-color);
   }
 
   &__field-wrapper {

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

@@ -63,7 +63,10 @@
               v-if="publishDateTime"
               :dateTime="publishDateTime"
             />
-            <div class="modified-meta" v-if="modifiedDateTime && showModifiedDateTime">
+            <div
+              class="modified-meta"
+              v-if="modifiedDateTime && showModifiedDateTime"
+            >
               <span class="date-prefix"> | Updated:</span>
               <asd20-formatted-date :dateTime="modifiedDateTime" />
             </div>
@@ -208,7 +211,9 @@ export default {
       const modifiedDateTimeString = new Date(this.modifiedDateTime)
       // console.log(publishDateTimeString, modifiedDateTimeString)
 
-      let publishDateTimePlusOne = new Date(publishDateTimeString.setDate(publishDateTimeString.getDate() + 1))
+      let publishDateTimePlusOne = new Date(
+        publishDateTimeString.setDate(publishDateTimeString.getDate() + 1)
+      )
       // console.log(publishDateTimePlusOne, modifiedDateTimeString)
       return modifiedDateTimeString > publishDateTimePlusOne ? true : false
     },
@@ -302,33 +307,36 @@ export default {
         color: var(--website-button__foreground-color);
       }
     }
+    &::v-deep .asd20-icon {
+      width: 24px !important;
+      height: 24px !important;
+      --line-color: currentColor !important;
+      --fill-color: var(--color__accent) !important;
+      g {
+        // --website-icon__line-color: var(--website-icon__line-color) !important;
+        --line-color: currentColor !important;
+      }
+    }
     .asd20-language-translation {
       flex-grow: 0;
       width: max-content;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
       padding: 0 0 0 0.5em;
-      .asd20-select-input {
-        margin-bottom: 0;
-        color: var(--website-page__foreground-color) !important;
-        &__select-wrapper {
-          flex-grow: 0;
+      &::v-deep .asd20-icon {
+        width: 24px !important;
+        height: 24px !important;
+        --line-color: var(--website-page__foreground-color) !important;
+        --fill-color: var(--color__accent) !important;
+        g {
+          // --website-icon__line-color: var(--website-icon__line-color) !important;
+          --line-color: var(--website-page__foreground-color) !important;
         }
       }
     }
     .asd20-language-loader {
       order: 1;
     }
-    &::v-deep .asd20-icon {
-      width: 24px !important;
-      height: 24px !important;
-      --line-color: currentColor !important;
-      --fill-color: var(--color__accent) !important;
-      g {
-        // --website-icon__line-color: var(--website-icon__line-color) !important;
-        --line-color: currentColor !important;
-      }
-    }
   }
 
   &__top {

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

@@ -163,9 +163,9 @@ export default {
     Asd20QuicklinksMenu,
     Asd20MediaSection,
   },
-  // props: {
-  //   languageCode: { type: String, default: 'en' },
-  // },
+  props: {
+    languageCode: { type: String, default: 'en' },
+  },
 }
 </script>
 

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;
       }
     }