@asd20/ui 3.2.566 → 3.2.568

package/package.json

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

package/src/components/molecules/Asd20LanguageTranslation/index.vue

@@ -83,8 +83,8 @@ export default {
   margin-bottom: 0;
   min-height: space(1);
   &::v-deep .asd20-loader {
-    height: 48px;
-    width: 48px;
+    // height: 48px;
+    width: 36px;
     position: inherit;
     // margin-bottom: space(0.5);
     background: transparent;

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

@@ -308,8 +308,12 @@ export default {
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
       padding: 0 0 0 0.5em;
-      &::v-deep .asd20-select-input {
+      .asd20-select-input {
+        margin-bottom: 0;
         color: var(--website-page__foreground-color) !important;
+        &__select-wrapper {
+          flex-grow: 0;
+        }
       }
     }
     .asd20-language-loader {
@@ -325,9 +329,6 @@ export default {
         --line-color: currentColor !important;
       }
     }
-    &::v-deep .asd20-select-input {
-      margin-bottom: 0;
-    }
   }
 
   &__top {

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

@@ -165,7 +165,7 @@ export default {
       margin-left: 1rem;
     }
     &::v-deep .notification-group--floating {
-      margin-right: space(1.25);
+      // margin-right: space(1.25);
       .bell {
         z-index: 1000;
         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
@@ -263,7 +263,7 @@ $max: 4rem;
     &__top {
       flex-direction: row;
       justify-content: flex-end;
-      padding: space(0.25) space(1);
+      // padding: space(0.25) space(1);
       align-items: center !important;
     }
   }
@@ -322,7 +322,7 @@ $max: 4rem;
     &__top {
       position: relative;
       margin: 0;
-      padding: space(1) space(3) space(1) space(3);
+      // padding: space(1) space(3) space(1) space(3);
       grid-column: 1/-1;
       grid-row: 1/7;
       background: transparent;
@@ -340,10 +340,10 @@ $max: 4rem;
       padding-right: 0;
     }
     &::v-deep .asd20-notification-group--floating {
-      position: absolute;
-      right: space(3);
-      top: space(3.5);
-      margin-right: 0;
+      // position: absolute;
+      // right: space(3);
+      // top: space(3.5);
+      // margin-right: 0;
     }
 
     &__content {

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

@@ -93,8 +93,8 @@ export default {
     object-fit: cover;
   }
   & /deep/ .notification-group--status .notifications {
-    padding: 0.25em;
-    border-radius: 1em;
+    padding: 0.375em;
+    border-radius: 3rem;
     background: rgba(255, 255, 255, 0.95);
   }
 
@@ -113,7 +113,7 @@ export default {
     // flex-direction: column;
 
     & /deep/ .notification-group--status {
-      margin-left: -0.5rem;
+      // margin-left: -0.5rem;
       .asd20-notification {
         margin: 0;
         padding: 0 !important;
@@ -121,6 +121,7 @@ export default {
     }
 
     & /deep/ .notification-group--floating {
+      margin-left: 0.5rem;
       margin-right: 0;
     }
   }

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

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

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

@@ -89,6 +89,15 @@
             </a>
           </client-only>
 
+          <client-only>
+            <Asd20LanguageTranslation
+              v-if="languageCode"
+              reversed
+              :languageCode="languageCode"
+              v-on="$listeners"
+            />
+          </client-only>
+
           <client-only>
             <asd20-notification-group
               class="asd20-notification-group--floating"
@@ -241,6 +250,7 @@ import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20PrimaryHeader from '../../../components/organisms/Asd20PrimaryHeader'
 import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
 import Asd20TertiaryHeader from '../../../components/organisms/Asd20TertiaryHeader'
+import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 
 export default {
   name: 'Asd20DistrictHomeTemplate',
@@ -271,6 +281,10 @@ export default {
     Asd20PrimaryHeader,
     Asd20TertiaryHeader,
     Asd20SecondaryHeader,
+    Asd20LanguageTranslation,
+  },
+  props: {
+    languageCode: { type: String, default: 'en' },
   },
 }
 </script>
@@ -308,6 +322,37 @@ export default {
     .asd20-organization-picker {
       display: none;
     }
+    .notification-translation-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      margin-right: 0.25rem;
+    }
+    .asd20-language-translation {
+      background: rgba(255, 255, 255, 1);
+      border-radius: 50%;
+      border: 1px solid var(--website-page__alternate-background-color);
+      margin-left: 0.5rem;
+      .asd20-select-input {
+        padding: 0.25rem 0.25rem;
+        color: currentColor;
+        font-family: Ariel, Arial, Helvetica, sans-serif;
+        &__select-wrapper {
+          display: none;
+        }
+      }
+      .asd20-icon {
+        width: 24px !important;
+        height: 24px !important;
+        --line-color: currentColor !important;
+        --fill-color: var(--color__accent) !important;
+      }
+    }
+    .asd20-language-loader {
+      order: 1;
+    }
     & /deep/ .notification-group--status .notifications {
       padding: 0.25em;
       border-radius: 1em;
@@ -325,6 +370,7 @@ export default {
     }
 
     .notification-group--floating {
+      margin-left: 0.5rem;
       margin-right: 0;
       // .bell {
       //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
@@ -350,8 +396,10 @@ export default {
     .double-notification-wrapper {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: flex-end;
       width: 100%;
+      align-items: center;
+      flex-wrap: wrap;
     }
     .asd20-header-content {
       position: absolute;

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

@@ -41,8 +41,9 @@
             reversed
           ></asd20-organization-picker>
         </client-only>
-      <!-- </template>
+        <!-- </template>
       <template slot="top"> -->
+
         <div
           :class="
             activeNotificationsByType.floating.length > 0
@@ -50,19 +51,35 @@
               : 'notification-wrapper'
           "
         >
-          <client-only>
-            <a
-              class="weather-link"
-              href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
-            >
-              <asd20-notification-group
-                :notifications="activeNotificationsByType.status"
-                group-type="status"
-                @dismiss="$emit('dismiss-notification', $event)"
-                @toggle-all="$emit('toggle-all')"
+          <div class="weather-status-and-translation-container">
+            <client-only>
+              <a
+                class="weather-link"
+                href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
+              >
+                <asd20-notification-group
+                  :notifications="activeNotificationsByType.status"
+                  group-type="status"
+                  @dismiss="$emit('dismiss-notification', $event)"
+                  @toggle-all="$emit('toggle-all')"
+                />
+              </a>
+            </client-only>
+
+            <client-only>
+              <Asd20LanguageTranslation
+                :class="{
+                  'translation-button-adjust':
+                    activeNotificationsByType.floating.length > 0 ||
+                    activeNotificationsByType.status.length > 0,
+                }"
+                v-if="languageCode"
+                reversed
+                :languageCode="languageCode"
+                v-on="$listeners"
               />
-            </a>
-          </client-only>
+            </client-only>
+          </div>
 
           <client-only>
             <asd20-notification-group
@@ -136,6 +153,7 @@ import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20VideoHeader from '../../../components/organisms/Asd20VideoHeader'
 import Asd20VideoHeaderContent from '../../../components/organisms/Asd20VideoHeaderContent'
 import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
+import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 
 export default {
   name: 'Asd20DistrictVideoTemplate',
@@ -143,6 +161,9 @@ export default {
   mixins: [pageTemplateMixin],
 
   directives: { scrollTrack },
+  props: {
+    languageCode: { type: String, default: 'en' },
+  },
 
   computed: {
     mq() {
@@ -163,6 +184,7 @@ export default {
     Asd20VideoHeader,
     Asd20VideoHeaderContent,
     Asd20SecondaryHeader,
+    Asd20LanguageTranslation,
   },
 }
 </script>
@@ -186,9 +208,43 @@ export default {
   margin-top: space(2.25);
 
   .asd20-video-header {
+    .weather-status-and-translation-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .asd20-language-translation {
+      position: absolute;
+      top: 1.5rem;
+      right: 0.5rem;
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 3rem;
+      border: 1px solid var(--website-page__alternate-background-color);
+      .asd20-select-input {
+        padding: 0.25rem 0.25rem;
+        color: currentColor;
+        font-family: Ariel, Arial, Helvetica, sans-serif;
+        &__select-wrapper {
+          display: none;
+        }
+      }
+      .asd20-icon {
+        width: 24px !important;
+        height: 24px !important;
+        --line-color: currentColor !important;
+        --fill-color: var(--color__accent) !important;
+      }
+    }
+    .asd20-language-loader {
+      order: 1;
+    }
+
+    .translation-button-adjust {
+      top: 3.5rem;
+    }
     .weather-link {
       text-decoration: none;
-      border-radius: 25%;
+      border-radius: 3rem;
     }
     .asd20-organization-picker {
       display: none;
@@ -201,7 +257,9 @@ export default {
     .double-notification-wrapper {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: wrap;
     }
   }
   // .asd20-video-header-content {
@@ -239,6 +297,23 @@ export default {
 
 @media (min-width: 667px) {
   .asd20-district-video-template {
+    .asd20-video-header {
+      .asd20-language-translation {
+        position: relative;
+        top: 0;
+        right: 0;
+        margin-left: 0.5rem;
+        .asd20-icon {
+          width: 24px !important;
+          height: 24px !important;
+          --line-color: currentColor !important;
+          --fill-color: var(--color__accent) !important;
+        }
+      }
+      .translation-button-adjust {
+        top: 0;
+      }
+    }
     .asd20-video-header-content {
       // position: absolute;
       top: inherit;

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

@@ -61,31 +61,42 @@
       </template>
 
       <template slot="top">
-        <client-only>
-          <a
-            class="weather-link"
-            href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
-          >
+        <div class="notification-translation-container">
+          <client-only>
+            <a
+              class="weather-link"
+              href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
+            >
+              <asd20-notification-group
+                :notifications="activeNotificationsByType.status"
+                group-type="status"
+                @dismiss="$emit('dismiss-notification', $event)"
+                @toggle-all="$emit('toggle-all')"
+              />
+            </a>
+          </client-only>
+
+          <client-only>
+            <Asd20LanguageTranslation
+              v-if="languageCode"
+              reversed
+              :languageCode="languageCode"
+              v-on="$listeners"
+            />
+          </client-only>
+
+          <!-- Floating Notifications -->
+          <client-only>
             <asd20-notification-group
-              :notifications="activeNotificationsByType.status"
-              group-type="status"
+              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')"
-            />
-          </a>
-        </client-only>
-
-        <!-- Floating Notifications -->
-        <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>
+            ></asd20-notification-group>
+          </client-only>
+        </div>
       </template>
     </asd20-school-homepage-header>
 
@@ -139,6 +150,7 @@ import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
+import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 
 // Helpers
 import _get from 'lodash-es/get'
@@ -160,6 +172,10 @@ export default {
     Asd20NotificationGroup,
     Asd20FeedsSection,
     Asd20OrganizationPicker,
+    Asd20LanguageTranslation,
+  },
+  props: {
+    languageCode: { type: String, default: 'en' },
   },
 
   computed: {
@@ -213,6 +229,37 @@ export default {
     text-decoration: none;
     border-radius: 50%;
   }
+  .notification-translation-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    margin-right: 0.25rem;
+  }
+  .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;
+    .asd20-select-input {
+      padding: 0.25rem 0.25rem;
+      color: currentColor;
+      font-family: Ariel, Arial, Helvetica, sans-serif;
+      &__select-wrapper {
+        display: none;
+      }
+    }
+    .asd20-icon {
+      width: 24px !important;
+      height: 24px !important;
+      --line-color: currentColor !important;
+      --fill-color: var(--color__accent) !important;
+    }
+  }
+  .asd20-language-loader {
+    order: 1;
+  }
   .pickerContainer {
     display: none;
   }
@@ -255,6 +302,14 @@ export default {
   }
 }
 
+@media (min-width: 667px) {
+  .asd20-school-home-template {
+    .asd20-language-translation {
+      margin: 0 0.5rem;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-school-home-template {
     display: block;

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

@@ -76,6 +76,15 @@
           </a>
         </client-only>
 
+        <client-only>
+          <Asd20LanguageTranslation
+            v-if="languageCode"
+            reversed
+            :languageCode="languageCode"
+            v-on="$listeners"
+          />
+        </client-only>
+
         <!-- Floating Notifications -->
         <client-only>
           <asd20-notification-group
@@ -140,6 +149,7 @@ import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
+import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 
 // Helpers
 import _get from 'lodash-es/get'
@@ -161,6 +171,10 @@ export default {
     Asd20NotificationGroup,
     Asd20FeedsSection,
     Asd20OrganizationPicker,
+    Asd20LanguageTranslation,
+  },
+  props: {
+    languageCode: { type: String, default: 'en' },
   },
 }
 </script>
@@ -207,9 +221,36 @@ export default {
     margin-top: space(0);
   }
   .asd20-notification-group--status {
+    position: absolute;
+    right: space(2);
+    top: space(0.5) !important;
+  }
+  .asd20-language-translation {
     position: absolute;
     right: space(0.5);
     top: space(0.5) !important;
+    z-index: 2;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 50%;
+    border: 1px solid var(--website-page__alternate-background-color);
+    margin: 0 0.05rem;
+    .asd20-select-input {
+      padding: 0.25rem 0.25rem;
+      color: currentColor;
+      font-family: Ariel, Arial, Helvetica, sans-serif;
+      &__select-wrapper {
+        display: none;
+      }
+    }
+    .asd20-icon {
+      width: 24px !important;
+      height: 24px !important;
+      --line-color: currentColor !important;
+      --fill-color: var(--color__accent) !important;
+    }
+  }
+  .asd20-language-loader {
+    order: 1;
   }
 
   .asd20-notification-group--floating {
@@ -240,6 +281,10 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .asd20-notification-group--status {
+      right: space(2.5);
+      top: space(0.5) !important;
+    }
+    .asd20-language-translation {
       right: space(1);
       top: space(0.5) !important;
     }
@@ -290,6 +335,10 @@ export default {
     }
     .asd20-notification-group--status {
       order: 0;
+      right: space(5.5) !important;
+      top: space(6) !important;
+    }
+    .asd20-language-translation {
       right: space(4) !important;
       top: space(6) !important;
     }