@asd20/ui 3.2.567 → 3.2.569

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.567",
+  "version": "3.2.569",
   "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/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

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

@@ -89,6 +89,20 @@
             </a>
           </client-only>
 
+          <client-only>
+            <Asd20LanguageTranslation
+              :class="
+                activeNotificationsByType.status.length > 0
+                  ? ''
+                  : 'translation-button-adjust'
+              "
+              v-if="languageCode"
+              reversed
+              :languageCode="languageCode"
+              v-on="$listeners"
+            />
+          </client-only>
+
           <client-only>
             <asd20-notification-group
               class="asd20-notification-group--floating"
@@ -241,6 +255,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 +286,10 @@ export default {
     Asd20PrimaryHeader,
     Asd20TertiaryHeader,
     Asd20SecondaryHeader,
+    Asd20LanguageTranslation,
+  },
+  props: {
+    languageCode: { type: String, default: 'en' },
   },
 }
 </script>
@@ -298,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;
@@ -308,6 +327,42 @@ 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;
+        &__overlay-label {
+          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 {
+      position: absolute;
+      top: space(1.375);
+      right: space(0.5);
+    }
     & /deep/ .notification-group--status .notifications {
       padding: 0.25em;
       border-radius: 1em;
@@ -325,6 +380,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 +406,10 @@ export default {
     .double-notification-wrapper {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: space-around;
       width: 100%;
+      align-items: center;
+      flex-wrap: wrap;
     }
     .asd20-header-content {
       position: absolute;
@@ -377,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

@@ -52,19 +52,6 @@
           "
         >
           <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"
-              />
-            </client-only>
             <client-only>
               <a
                 class="weather-link"
@@ -78,6 +65,20 @@
                 />
               </a>
             </client-only>
+
+            <client-only>
+              <Asd20LanguageTranslation
+                :class="
+                  activeNotificationsByType.status.length > 0
+                    ? ''
+                    : 'translation-button-adjust'
+                "
+                v-if="languageCode"
+                reversed
+                :languageCode="languageCode"
+                v-on="$listeners"
+              />
+            </client-only>
           </div>
 
           <client-only>
@@ -210,21 +211,20 @@ export default {
     .weather-status-and-translation-container {
       display: flex;
       flex-direction: row;
+      align-items: center;
     }
     .asd20-language-translation {
       position: absolute;
-      top: 1rem;
+      top: 3.5rem;
       right: 0.5rem;
-      flex-grow: 1;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
+      border: 1px solid var(--website-page__alternate-background-color);
       .asd20-select-input {
-        // padding-left: 0.5em;
-        padding: 0.375rem;
-        // flex-grow: 1;
+        padding: 0.25rem 0.25rem;
         color: currentColor;
         font-family: Ariel, Arial, Helvetica, sans-serif;
-        &__select-wrapper {
+        &__overlay-label {
           display: none;
         }
       }
@@ -240,12 +240,13 @@ export default {
     }
 
     .translation-button-adjust {
-      top: 3.5rem;
+      position: absolute;
+      top: space(1);
+      right: space(0.5);
     }
     .weather-link {
       text-decoration: none;
       border-radius: 3rem;
-      margin-top: 0.25rem;
     }
     .asd20-organization-picker {
       display: none;
@@ -258,7 +259,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 {
@@ -294,24 +297,14 @@ export default {
   }
 }
 
-@media (min-width: 668px) {
+@media (min-width: 667px) {
   .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;
-          }
-        }
+        margin-left: 0.5rem;
         .asd20-icon {
           width: 24px !important;
           height: 24px !important;
@@ -320,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 {
@@ -347,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

@@ -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: 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-left: 0.05rem;
+    .asd20-select-input {
+      padding: 0.25rem 0.25rem;
+      color: currentColor;
+      font-family: Ariel, Arial, Helvetica, sans-serif;
+      &__overlay-label {
+        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,11 +302,25 @@ export default {
   }
 }
 
+@media (min-width: 667px) {
+  .asd20-school-home-template {
+    .notification-translation-container {
+      margin-right: space(1);
+    }
+    .asd20-language-translation {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-school-home-template {
     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

@@ -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;
+      &__overlay-label {
+        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,9 +281,13 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .asd20-notification-group--status {
-      right: space(1);
+      right: space(2.5);
       top: space(0.5) !important;
     }
+    .asd20-language-translation {
+      right: space(1);
+      top: space(1) !important;
+    }
     .asd20-notification-group--floating {
       right: space(1);
       top: space(2) !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;
     }