@asd20/ui 3.2.625 → 3.2.627

package/package.json

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

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

@@ -64,8 +64,8 @@ export default {
           // is always on top
           .sort((a, b) => {
             // if (this.getPreferredLanguageCode().includes(a.code)) return -1 // Move up
-            if (a.code < b.code) return -1 // Move up
-            if (a.code > b.code) return 1 // Move down
+            if (a.name < b.name) return -1 // Move up
+            if (a.name > b.name) return 1 // Move down
             return 0 // Leave where it is
           })
       )
@@ -81,7 +81,7 @@ export default {
   flex-direction: row;
   align-items: center;
   margin-bottom: 0;
-  min-height: space(1);
+  max-height: 2rem;
   &::v-deep .asd20-loader {
     // height: 48px;
     width: 36px;

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

@@ -109,7 +109,7 @@ export default {
     // display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0 1rem;
+    margin: 0 0.5rem;
     // flex-direction: column;
 
     & ::v-deep .notification-group--status {

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

@@ -372,6 +372,8 @@ export default {
   // },
   mounted() {
     this.$nextTick(() => {
+      this.$emit('announcements-in-view')
+      this.$emit('events-in-view')
       this.$emit('stories-in-view')
     })
   },

package/src/components/templates/Asd20DetailImageTemplate/index.stories.js

@@ -28,7 +28,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', true)
+      return boolean('Show Notifications', false)
         ? notifications || empty
         : empty
     },

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

@@ -54,6 +54,7 @@
           <div class="weather-status-and-translation-container">
             <client-only>
               <a
+                v-if="activeNotificationsByType.status.length > 0"
                 class="weather-link"
                 href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
               >
@@ -262,13 +263,13 @@ export default {
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
       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;
         &__overlay-label {
-          display: none;
+          // display: none;
         }
       }
       .asd20-icon {

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

@@ -64,6 +64,7 @@
         <div class="notification-translation-container">
           <client-only>
             <a
+              v-if="activeNotificationsByType.status.length > 0"
               class="weather-link"
               href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
             >
@@ -227,7 +228,13 @@ export default {
   margin-top: space(2.25);
   .weather-link {
     text-decoration: none;
-    border-radius: 50%;
+    border-radius: 3rem;
+    border: 1px solid var(--website-page__alternate-background-color);
+    padding: 0 0.5rem;
+    min-height: 2rem;
+    align-items: center;
+    display: flex;
+    background: white;
   }
   .notification-translation-container {
     display: flex;
@@ -235,19 +242,21 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-end;
-    margin-right: space(1.5);
+    margin-right: 0;
   }
   .asd20-language-translation {
     background: rgba(255, 255, 255, 1);
-    border-radius: 50%;
+    border-radius: 3rem;
     border: 1px solid var(--website-page__alternate-background-color);
-    margin-left: 0.05rem;
     .asd20-select-input {
-      padding: 0.25rem 0.25rem;
+      // padding: 0.25rem 0.25rem;
       color: currentColor;
       font-family: Ariel, Arial, Helvetica, sans-serif;
       &__overlay-label {
-        display: none;
+        // display: none;
+      }
+      &__field-wrapper {
+        padding: 0 0.5rem;
       }
     }
     .asd20-icon {
@@ -307,9 +316,6 @@ export default {
     .notification-translation-container {
       margin-right: space(1);
     }
-    .asd20-language-translation {
-      margin-left: 0.5rem;
-    }
   }
 }
 
@@ -319,7 +325,7 @@ export default {
     margin-left: space(3);
     margin-top: 0;
     .notification-translation-container {
-      margin-right: 0.25rem;
+      margin-right: 0;
     }
     .asd20-notification--status {
       .asd20-notification__content {

package/src/components/templates/Asd20SchoolHomeVideoTemplate/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/Asd20SchoolHomeVideoTemplate/index.vue

@@ -61,41 +61,44 @@
       </template>
 
       <template>
-        <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
+              v-if="activeNotificationsByType.status.length > 0"
+              class="weather-link"
+              href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
+            >
+              <asd20-notification-group
+                class="asd20-notification-group--status"
+                :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
-              class="asd20-notification-group--status"
-              :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>
-
-        <client-only>
-          <Asd20LanguageTranslation
-            v-if="languageCode"
-            reversed
-            :languageCode="languageCode"
-            v-on="$listeners"
-          />
-        </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-video-header>
 
@@ -196,10 +199,81 @@ export default {
   flex-shrink: 0;
   overflow-y: auto;
   margin-top: space(2.25);
-  .weather-link {
-    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;
+    position: absolute;
+    top: space(0.5);
+    right: space(0.5);
+    // max-width: 500px;
+    .weather-link {
+      text-decoration: none;
+      border: 1px solid var(--website-page__alternate-background-color);
+      background: white;
+      border-radius: 3rem;
+      // position: absolute;
+      // right: space(6);
+      // top: 0 !important;
+    }
+    .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: 3rem;
+      border: 1px solid var(--website-page__alternate-background-color);
+      margin: 0 0.05rem;
+      max-height: 2rem;
+      .asd20-select-input {
+        padding: 0.25rem 0.25rem;
+        color: currentColor;
+        font-family: Arial, 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 {
+      // position: absolute;
+      // right: space(0.5);
+      // top: space(2) !important;
+      // .bell {
+      //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+      //   svg {
+      //     fill: var(--color__accent) !important;
+      //   }
+      //   span {
+      //     background: var(--color__accent) !important;
+      //     top: inherit !important;
+      //     right: inherit !important;
+      //     width: 1.2rem !important;
+      //     height: 1.2rem !important;
+      //     font-size: 0.75rem !important;
+      //   }
+      // }
+    }
   }
+
   .pickerContainer {
     display: none;
   }
@@ -220,58 +294,6 @@ export default {
   .asd20-feeds-section {
     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 {
-    position: absolute;
-    right: space(0.5);
-    top: space(2) !important;
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
-  }
 
   .asd20-quicklinks-menu {
     position: relative;
@@ -281,16 +303,16 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .asd20-notification-group--status {
-      right: space(2.5);
-      top: space(0.5) !important;
+      // right: space(2.5);
+      // top: space(0.5) !important;
     }
     .asd20-language-translation {
-      right: space(1);
-      top: space(0.5) !important;
+      // right: space(1);
+      // top: space(0.5) !important;
     }
     .asd20-notification-group--floating {
-      right: space(1);
-      top: space(2) !important;
+      // right: space(1);
+      // top: space(2) !important;
     }
   }
 }
@@ -308,6 +330,10 @@ export default {
         margin-left: space(1);
       }
     }
+    .notification-translation-container {
+      top: space(5.5);
+      right: space(3.5);
+    }
 
     .asd20-quicklinks-menu {
       padding-bottom: space(1);
@@ -323,8 +349,8 @@ export default {
       }
     }
     .asd20-notification-group--floating {
-      right: space(4);
-      top: space(7.5) !important;
+      // right: space(4);
+      // top: space(7.5) !important;
       // .bell {
       //   span {
       //     background: var(--color__accent);
@@ -335,12 +361,12 @@ export default {
     }
     .asd20-notification-group--status {
       order: 0;
-      right: space(5.5) !important;
-      top: space(6) !important;
+      // right: space(5.5) !important;
+      // top: space(6) !important;
     }
     .asd20-language-translation {
-      right: space(4) !important;
-      top: space(6) !important;
+      // right: space(4) !important;
+      // top: space(6) !important;
     }
   }
 }