@asd20/ui 3.2.1035 → 3.2.1036

package/package.json

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

package/src/components/molecules/Asd20BlockSchedule/index.stories.js

@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import Asd20BlockSchedule from '.'
+
+const info = {
+  summary: 'Asd20BlockSchedule',
+}
+const wrapper = {
+  components: { Asd20BlockSchedule },
+  data: () => ({}),
+}
+
+storiesOf('Molecules - Asd20BlockSchedule', module).add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `<Asd20BlockSchedule />`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="blockDay" class="asd20-block-schedule">
+    <a href="/schedules">
+      <asd20-icon size="md" name="calendar" title="Block Day" />
+      <span>{{ blockDay }}</span>
+    </a>
+  </div>
+</template>
+
+<script>
+import Asd20Icon from '../../atoms/Asd20Icon'
+export default {
+  name: 'Asd20BlockSchedule',
+  components: {
+    Asd20Icon,
+  },
+  props: {
+    blockEvent: { type: Object, default: () => ({}) },
+  },
+  data: () => ({}),
+  computed: {
+    blockDay() {
+      const e = this.blockEvent
+      if (!e || !Array.isArray(e.calendarKeywords)) return ''
+      return e.calendarKeywords.includes('Block Schedule')
+        ? e.summary || ''
+        : ''
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../design/_variables.scss';
+.asd20-block-schedule {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0;
+  height: 2.75rem;
+  background: #fff;
+  border-radius: 2rem;
+  border: 1px solid var(--website-page__alternate-background-color);
+  padding: 0 0.75rem 0 0.5rem;
+  a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--color__primary);
+    text-decoration: none;
+    font-family: sans-serif;
+    flex-grow: 1;
+    .asd20-icon {
+      margin-right: space(0.5);
+    }
+  }
+}
+</style>

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

@@ -316,6 +316,7 @@ export default {
   .pagination {
     display: flex;
     justify-content: flex-end;
+    width: max-content;
     align-items: center;
     font-size: 0.85rem;
     z-index: 15;
@@ -356,8 +357,9 @@ export default {
 
   &--floating .pagination {
     margin-right: 0.5rem;
-    background: rgba(255, 255, 255, 0.85);
+    background: rgba(255, 255, 255, 1);
     align-self: stretch;
+    width: max-content;
     margin-right: -2rem;
     z-index: 8;
     padding-right: 2rem;

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

@@ -117,9 +117,9 @@ export default {
     display: block;
     position: absolute;
     top: 0;
-    bottom: space(0);
+    bottom: space(2);
     left: 0;
-    right: space(1);
+    right: 0;
     z-index: -1;
     background: var(--website-header__background-style);
     background-color: var(--website-header__background-color);
@@ -147,26 +147,17 @@ export default {
     --fill-two: rgba(255, 255, 255, 0.625);
     width: 100%;
     position: absolute;
-    right: 0;
     z-index: 101;
-    // background: white;
     display: flex;
-    justify-content: flex-end;
+    // justify-content: space-around;
     flex-direction: row;
     align-items: center;
-    padding: space(0.25) space(0.25);
     margin-top: space(0.5);
-    // width: 95vw;
     &::v-deep .asd20-picker {
       display: none;
     }
 
     &::v-deep .notification-group--status {
-      // margin-left: 0.5rem;
-      // .asd20-notification {
-      //   margin: 0;
-      //   padding: 0 !important;
-      // }
       .notifications {
         border-radius: space(0.5);
       }
@@ -175,16 +166,14 @@ export default {
       margin-left: 1rem;
     }
     &::v-deep .notification-group--floating {
-      // margin-right: space(1.25);
+      width: max-content;
+      float: right;
       .bell {
         z-index: 1000;
         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
         svg {
           fill: var(--color__accent) !important;
         }
-        // span {
-        //   background: var(--color__on-primary) !important;
-        // }
       }
     }
   }
@@ -203,7 +192,7 @@ export default {
   }
 
   &__content {
-    margin-top: space(2);
+    margin-top: space(2.5);
     background: var(--website-header__background-color);
   }
 
@@ -219,12 +208,14 @@ export default {
   }
 
   &__call-to-action {
-    margin: space(1) space(2) space(-0.75) space(1);
+    margin: space(1);
     z-index: 1;
     display: flex;
+    flex-direction: column;
     .asd20-button {
       flex-grow: 1;
-      max-width: 35vw;
+      width: calc(100% - space(3));
+      margin-bottom: space(0.5);
       font-size: 1rem !important;
       background-color: var(
         --website-header__button-background-color,
@@ -269,7 +260,7 @@ export default {
       }
 
       &:not(:last-child) {
-        margin-right: space(0.5);
+        margin-bottom: space(0.5);
       }
     }
   }
@@ -278,8 +269,6 @@ export default {
     img {
       display: block;
       width: 100%;
-      // height: 100%;
-      // object-fit: cover;
       object-position: center;
     }
     .image-credits {
@@ -294,15 +283,7 @@ export default {
       font-size: 0.8rem !important;
     }
   }
-  // Hide images on mobile
-  // &__image {
-  //   display: none;
-  // }
-
-  // Add a bit more space at the bottom
-  // if cta is present
   &--has-cta {
-    margin-bottom: space(3);
     &::after {
       bottom: space(-1.5);
     }
@@ -313,9 +294,14 @@ $min: 3rem;
 $max: 4rem;
 @media (min-width: 667px) {
   .asd20-school-homepage-header {
+    &::before {
+      right: space(3);
+      bottom: space(2);
+      border-top-right-radius: var(--website-shape__radius-l);
+    }
     &__top {
       flex-direction: row;
-      justify-content: flex-end;
+      // justify-content: flex-end;
       // padding: space(0.25) space(1);
       align-items: center !important;
     }
@@ -325,6 +311,19 @@ $max: 4rem;
         bottom: 0;
       }
     }
+    &__call-to-action {
+      flex-direction: row;
+      margin: space(1);
+      .asd20-button {
+        flex-grow: 0;
+        width: max-content;
+        min-width: 4rem;
+        margin-bottom: 0 !important;
+        &:not(:last-child) {
+          margin-right: space(0.5);
+        }
+      }
+    }
   }
 }
 
@@ -370,8 +369,6 @@ $max: 4rem;
       background: var(--website-quick-links__background-color);
     }
 
-    // Provide space between logo and breadcrumb
-    // TODO: Revisit for school logo
     &::v-deep .asd20-logo {
       & + .asd20-breadcrumb {
         margin-top: space(2);
@@ -390,6 +387,11 @@ $max: 4rem;
       &::v-deep .asd20-picker {
         display: flex;
       }
+      // &::v-deep .notification-group--floating {
+      //   position: absolute;
+      //   top: 9rem;
+      //   right: 5.5rem;
+      // }
     }
 
     &::v-deep .asd20-notification-group--status {
@@ -398,12 +400,6 @@ $max: 4rem;
       grid-row: 3 / 5;
       padding-right: 0;
     }
-    &::v-deep .asd20-notification-group--floating {
-      // position: absolute;
-      // right: space(3);
-      // top: space(3.5);
-      // margin-right: 0;
-    }
 
     &__content {
       margin-top: 0;
@@ -430,7 +426,7 @@ $max: 4rem;
       height: min-content;
       align-self: end;
       .asd20-button {
-        min-height: space(2);
+        min-height: space(1);
         font-size: 1.25rem !important;
       }
     }

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

@@ -243,7 +243,8 @@ export default {
     img {
       display: block;
       width: 100%;
-      height: 100vh;
+      height: 600px;
+      min-height: 600px;
       object-fit: cover;
       object-position: center;
     }

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

@@ -195,7 +195,7 @@ export default {
   .asd20-swiper {
     flex-shrink: 0;
     margin: 0 0;
-    width: 100%;
+    // width: 100%;
     z-index: 2;
   }
   .feed-buttons {
@@ -240,7 +240,7 @@ export default {
 
     .asd20-swiper {
       // margin-left: space(1);
-      width: calc(100% - #{space(2)});
+      width: calc(100% - #{space(4)});
     }
     .asd20-button {
       font-size: 1rem !important;

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

@@ -76,7 +76,7 @@
                 "
                 v-if="languageCode"
                 reversed
-                :languageCode="languageCode"
+                :language-code="languageCode"
                 v-on="$listeners"
               />
             </client-only>

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

@@ -83,29 +83,37 @@
 
       <template slot="top">
         <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
-                :notifications="activeNotificationsByType.status"
-                group-type="status"
-                @dismiss="$emit('dismiss-notification', $event)"
-                @toggle-all="$emit('toggle-all')"
+          <div class="language-wrapper">
+            <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
+                  :notifications="activeNotificationsByType.status"
+                  group-type="status"
+                  @dismiss="$emit('dismiss-notification', $event)"
+                  @toggle-all="$emit('toggle-all')"
+                />
+              </a>
+            </client-only>
+            <client-only>
+              <Asd20BlockSchedule
+                v-if="blockEvent"
+                :block-event="blockEvent"
+                class="block-schedule"
               />
-            </a>
-          </client-only>
-
-          <client-only>
-            <Asd20LanguageTranslation
-              v-if="languageCode"
-              reversed
-              :languageCode="languageCode"
-              v-on="$listeners"
-            />
-          </client-only>
+            </client-only>
+            <client-only>
+              <Asd20LanguageTranslation
+                v-if="languageCode"
+                reversed
+                :language-code="languageCode"
+                v-on="$listeners"
+              />
+            </client-only>
+          </div>
 
           <!-- Floating Notifications -->
           <client-only>
@@ -176,6 +184,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
+import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 
 // Helpers
 import _get from 'lodash-es/get'
@@ -198,6 +207,7 @@ export default {
     Asd20FeedsSection,
     Asd20OrganizationPicker,
     Asd20LanguageTranslation,
+    Asd20BlockSchedule,
   },
   props: {
     languageCode: { type: String, default: 'en' },
@@ -241,10 +251,30 @@ export default {
           : '',
       }
     },
+    blockEvent() {
+      if (!this.events || this.events.length === 0) return null
+      return (
+        this.events.find(
+          e =>
+            Array.isArray(e.calendarKeywords) &&
+            e.calendarKeywords.includes('Block Schedule')
+        ) || null
+      )
+    },
   },
   mounted() {
     this.showLogo = window.innerWidth >= 1350
     window.addEventListener('resize', this.handleResize)
+    // If nothing is loaded yet, ask parent to load events now.
+    if (!this.events || this.events.length === 0) {
+      this.$emit('events-in-view')
+    }
+  },
+  watch: {
+    // If the organization changes (picker, route change, etc.), refetch.
+    'organization.id': function () {
+      this.$emit('events-in-view')
+    },
   },
   methods: {
     handleResize() {
@@ -288,24 +318,35 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-end;
-    margin-right: 0;
-  }
-  .asd20-language-translation {
-    background: rgba(255, 255, 255, 1);
-    border-radius: 3rem;
-    border: 1px solid var(--website-page__alternate-background-color);
-    &::v-deep .asd20-select-input {
-      // padding: 0.25rem 0.25rem;
-      color: currentColor;
-      font-family: Ariel, Arial, Helvetica, sans-serif;
-      &__overlay-label {
-        // display: none;
-      }
-      &__field-wrapper {
-        padding: 0 0.5rem;
+    width: 100%;
+    margin: 0 1.5rem;
+    .language-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      margin-bottom: space(0.25);
+
+      .asd20-language-translation {
+        background: rgba(255, 255, 255, 1);
+        border-radius: 3rem;
+        border: 1px solid var(--website-page__alternate-background-color);
+        &::v-deep .asd20-select-input {
+          // padding: 0.25rem 0.25rem;
+          color: currentColor;
+          font-family: Ariel, Arial, Helvetica, sans-serif;
+          &__overlay-label {
+            // display: none;
+          }
+          &__field-wrapper {
+            padding: 0 0.5rem;
+          }
+        }
       }
     }
   }
+
   .asd20-language-loader {
     order: 1;
   }
@@ -338,7 +379,12 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-template {
     .notification-translation-container {
-      margin-right: space(1);
+      flex-wrap: nowrap;
+      .language-wrapper {
+        justify-content: flex-start;
+        margin-bottom: 0;
+      }
+      justify-content: flex-end;
     }
   }
 }
@@ -349,7 +395,21 @@ export default {
     margin-left: space(3);
     margin-top: 0;
     .notification-translation-container {
+      display: block;
+      width: 100%;
+      justify-content: flex-start;
+      // margin-left: space(1);
+      max-width: 13rem;
       margin-right: 0;
+      justify-content: flex-end;
+      .language-wrapper {
+        flex-wrap: wrap;
+      }
+      .block-schedule,
+      .asd20-language-translation {
+        flex-grow: 1;
+        margin-bottom: space(0.25);
+      }
     }
     .asd20-notification--status {
       .asd20-notification__content {

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

@@ -78,32 +78,42 @@
         </client-only>
       </template>
 
-      <template>
+      <template slot="top">
         <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')"
+          <div class="language-wrapper">
+            <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>
+              <Asd20BlockSchedule
+                v-if="blockEvent"
+                :block-event="blockEvent"
+                class="block-schedule"
               />
-            </a>
-          </client-only>
+            </client-only>
 
-          <client-only>
-            <Asd20LanguageTranslation
-              v-if="languageCode"
-              reversed
-              :languageCode="languageCode"
-              v-on="$listeners"
-            />
-          </client-only>
+            <client-only>
+              <Asd20LanguageTranslation
+                v-if="languageCode"
+                reversed
+                :language-code="languageCode"
+                v-on="$listeners"
+              />
+            </client-only>
+          </div>
 
           <!-- Floating Notifications -->
           <client-only>
@@ -174,6 +184,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
+import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 
 // Helpers
 import _get from 'lodash-es/get'
@@ -196,10 +207,35 @@ export default {
     Asd20FeedsSection,
     Asd20OrganizationPicker,
     Asd20LanguageTranslation,
+    Asd20BlockSchedule,
   },
   props: {
     languageCode: { type: String, default: 'en' },
   },
+  mounted() {
+    // If nothing is loaded yet, ask parent to load events now.
+    if (!this.events || this.events.length === 0) {
+      this.$emit('events-in-view')
+    }
+  },
+  watch: {
+    // If the organization changes (picker, route change, etc.), refetch.
+    'organization.id': function () {
+      this.$emit('events-in-view')
+    },
+  },
+  computed: {
+    blockEvent() {
+      if (!this.events || this.events.length === 0) return null
+      return (
+        this.events.find(
+          e =>
+            Array.isArray(e.calendarKeywords) &&
+            e.calendarKeywords.includes('Block Schedule')
+        ) || null
+      )
+    },
+  },
 }
 </script>
 
@@ -225,34 +261,47 @@ export default {
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
+    margin: space(0.25);
     justify-content: flex-end;
-    margin-right: 0;
+    width: calc(100% - 1rem);
     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-language-translation {
-      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;
-      height: 2.75rem;
-      &::v-deep .asd20-select-input {
-        padding: 0.375rem 0.375rem;
-        color: currentColor;
-        font-family: Arial, Helvetica, sans-serif;
+    top: space(0.25);
+    .language-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-bottom: space(0.25);
+
+      .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-language-translation {
+        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;
+        height: 2.75rem;
+        &::v-deep .asd20-select-input {
+          padding: 0.375rem 0.375rem;
+          color: currentColor;
+          font-family: Arial, Helvetica, sans-serif;
+        }
       }
     }
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: 3.5rem;
+    }
     .asd20-language-loader {
       order: 1;
     }
@@ -285,6 +334,27 @@ export default {
   }
 }
 
+@media (min-width: 667px) {
+  .asd20-school-home-video-template {
+    .notification-translation-container {
+      margin: 0;
+      justify-content: flex-end;
+      position: absolute;
+      right: space(0.5);
+      top: space(0.5);
+      width: auto;
+      flex-wrap: nowrap;
+      .language-wrapper {
+        justify-content: flex-end;
+        margin-bottom: 0;
+      }
+      .asd20-notification-group--floating {
+        position: unset;
+      }
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-school-home-video-template {
     display: block;
@@ -300,6 +370,14 @@ export default {
     .notification-translation-container {
       top: space(5.5);
       right: space(3.5);
+      .language-wrapper {
+        // justify-content: flex-end;
+        // flex-wrap: nowrap;
+        // margin-bottom: space(0.25);
+        // .asd20-language-translation {
+        //   margin: 0 space(0.25);
+        // }
+      }
     }
 
     .asd20-quicklinks-menu {

package/src/data/events/district-events.json

@@ -21,6 +21,33 @@
     ]
   },
   "value": [
+    {
+      "@search.score": 1,
+      "id": null,
+      "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMDc3N0RBQjVFNzBCMkQ4MDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDA4Q0IxNTUwMjk4QzVDNzQ2ODZDNDg3NTI2NTFCMEI5Lg==",
+      "type": "event",
+      "summary": "Blue Day",
+      "description": "No School",
+      "location": "AAHS",
+      "start": "2025-10-13T07:00:00Z",
+      "end": "2025-10-14T07:00:00Z",
+      "dtstamp": "2025-10-13T07:00:00Z",
+      "class": "",
+      "priority": "",
+      "transparency": "",
+      "status": "",
+      "sequence": "",
+      "url": null,
+      "calendarId": "da74e260-04f3-11ec-a052-79c69b6cfc2x",
+      "calendarName": "Blue/Silver Schedule",
+      "calendarOrganizationId": "bb6e9cd6-da25-9e6f-5e8d-072b9a7df4f0",
+      "calendarOrganizationTitle": "Air Academy High School",
+      "calendarCategories": [],
+      "calendarKeywords": ["Block Schedule"],
+      "calendarUrl": "https://outlook.office365.com/owa/calendar/6a1a45f079b7416f8b301747cd731778@asd20.org/1ff6c80db4dd42c5be39096fdf50a4ee10284553908289904160/calendar.ics",
+      "calendarFormat": "ical",
+      "calendarColor": "#213f94"
+    },
     {
       "@search.score": 1,
       "id": null,