@asd20/ui 3.2.566 → 3.2.567

package/package.json

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

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/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;
@@ -122,6 +122,7 @@ export default {
 
     & /deep/ .notification-group--floating {
       margin-right: 0;
+      margin-left: 0.25rem;
     }
   }
   .scroll-down-indicator {

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/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,34 @@
               : '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>
+              <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>
+            <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>
+          </div>
 
           <client-only>
             <asd20-notification-group
@@ -136,6 +152,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 +160,9 @@ export default {
   mixins: [pageTemplateMixin],
 
   directives: { scrollTrack },
+  props: {
+    languageCode: { type: String, default: 'en' },
+  },
 
   computed: {
     mq() {
@@ -163,6 +183,7 @@ export default {
     Asd20VideoHeader,
     Asd20VideoHeaderContent,
     Asd20SecondaryHeader,
+    Asd20LanguageTranslation,
   },
 }
 </script>
@@ -186,9 +207,45 @@ export default {
   margin-top: space(2.25);
 
   .asd20-video-header {
+    .weather-status-and-translation-container {
+      display: flex;
+      flex-direction: row;
+    }
+    .asd20-language-translation {
+      position: absolute;
+      top: 1rem;
+      right: 0.5rem;
+      flex-grow: 1;
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 3rem;
+      .asd20-select-input {
+        // padding-left: 0.5em;
+        padding: 0.375rem;
+        // flex-grow: 1;
+        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;
+      margin-top: 0.25rem;
     }
     .asd20-organization-picker {
       display: none;
@@ -237,8 +294,35 @@ export default {
   }
 }
 
-@media (min-width: 667px) {
+@media (min-width: 668px) {
   .asd20-district-video-template {
+    .asd20-video-header {
+      .weather-status-and-translation-container {
+        flex-direction: column;
+      }
+      .asd20-language-translation {
+        position: relative;
+        top: 0;
+        right: 0;
+        .asd20-select-input {
+          padding: 0 0 0 0;
+          padding-left: 0.5em;
+          &__select-wrapper {
+            display: inherit;
+            flex-grow: 0;
+          }
+        }
+        .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;