@asd20/ui 3.4.3 → 3.4.5

package/.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     'no-console': 'off',
     'no-debugger': 'off',
     'vue/v-slot-style': 'off'
+    'vue/html-self-closing': 'off'
   },
 
   // Useful in a component library to avoid linting built artfacts and external deps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "private": false,
   "license": "MIT",
   "sideEffects": [

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

@@ -61,9 +61,10 @@ export default {
       align-items: center;
       flex-shrink: 0;
       padding-bottom: 0.5rem;
+      padding-right: 0.5rem;
       h1 {
         margin: 0;
-        font-size: 1.5rem;
+        font-size: 1.2rem;
         color: var(--color__on-primary);
         flex-grow: 1;
         width: 100%;
@@ -80,10 +81,12 @@ export default {
   }
 
   .asd20-district-logo {
+    position: absolute;
+    right: 0;
     margin-left: auto;
     margin-right: space(1);
     height: 1.5rem;
-      padding: 0.75rem 0 0 0;
+    padding: 0.75rem 0 0 0;
     &::v-deep svg {
       fill: #fff;
       .district {
@@ -125,7 +128,13 @@ export default {
 @media (min-width: 768px) {
   .asd20-app-header {
     align-items: flex-end;
+    &__title {
+      .icon-and-title h1 {
+        font-size: 1.5rem;
+      }
+    }
     .asd20-district-logo {
+      position:block;
       padding: 0 0 0.25rem 0;
       height: space(1.5);
     }

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

@@ -222,7 +222,6 @@ export default {
         var(--website-homepage-header__background-style);
     }
     .header-messaging-section {
-      display: relative;
       border-bottom: none;
       // width: 80%;
       &::v-deep .asd20-messaging {

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

@@ -1,20 +1,19 @@
 <template>
   <div class="asd20-school-home-template">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <asd20-skip-to/>
 
     <!-- Site Navigation -->
     <asd20-site-navigation
       :navigation="navigation"
       :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
       :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
       :search-open="searchOpen"
-      :organization="organization"
       :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
+      :organization="organization"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+    />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -23,13 +22,13 @@
         group-type="banner"
         @dismiss="$emit('dismiss-notification', $event)"
         @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
+      />
     </client-only>
 
     <!-- Page Header -->
     <asd20-school-homepage-header
-      id="page-header"
       v-if="pageHeaderContent"
+      id="page-header"
       v-bind="pageHeaderContent"
       fullscreen
     >
@@ -41,7 +40,7 @@
               :organization-options="organizationOptions"
               :organization="organization"
               logo-size="lg"
-            ></asd20-organization-picker>
+            />
             <a
               v-if="websiteLogoProps && showLogo"
               :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
@@ -57,7 +56,7 @@
                 :aria-label="
                   websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''
                 "
-              />
+              >
             </a>
             <a
               v-if="websiteLogoProps2 && showLogo"
@@ -75,7 +74,7 @@
                 :alt="
                   websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
                 "
-              />
+              >
             </a>
           </div>
         </client-only>
@@ -128,7 +127,7 @@
               group-type="floating"
               @dismiss="$emit('dismiss-notification', $event)"
               @toggle-all="$emit('toggle-all')"
-            ></asd20-notification-group>
+            />
           </client-only>
         </div>
       </template>
@@ -140,30 +139,29 @@
     </asd20-quicklinks-menu>
 
     <!-- Page Content -->
-    <asd20-page-content> </asd20-page-content>
 
     <!-- Feeds -->
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
-      @announcements-in-view="$emit('announcements-in-view')"
       :stories="stories"
       :stories-feed-props="storiesFeedProps"
-      @stories-in-view="$emit('stories-in-view')"
-      :events="events"
-      :events-feed-props="eventsFeedProps"
-      @events-in-view="$emit('events-in-view')"
       :organization="organization"
+      :events-feed-props="eventsFeedProps"
+      :events="events"
       :organization-options="organizationOptions"
-    ></asd20-feeds-section>
+      @announcements-in-view="$emit('announcements-in-view')"
+      @stories-in-view="$emit('stories-in-view')"
+      @events-in-view="$emit('events-in-view')"
+    />
 
     <!-- Footer -->
     <asd20-page-footer
       :organization="organization"
-      :socialLinks="socialLinks"
-      :disclosureLinks="disclosureLinks"
-      :websiteLogoProps="websiteLogoProps"
-      :websiteLogoProps2="websiteLogoProps2"
+      :social-links="socialLinks"
+      :disclosure-links="disclosureLinks"
+      :website-logo-props="websiteLogoProps"
+      :website-logo-props2="websiteLogoProps2"
     >
       <slot name="page-footer" />
     </asd20-page-footer>
@@ -183,7 +181,7 @@ import Asd20SchoolHomepageHeader from '../../../components/organisms/Asd20School
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
-import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+// import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
@@ -196,14 +194,9 @@ import _get from 'lodash/get'
 export default {
   name: 'Asd20SchoolHomeTemplate',
 
-  mixins: [pageTemplateMixin],
-
-  directives: { scrollTrack },
-
   components: {
     Asd20SkipTo,
     Asd20SchoolHomepageHeader,
-    Asd20PageContent,
     Asd20PageFooter,
     Asd20SiteNavigation,
     Asd20QuicklinksMenu,
@@ -213,6 +206,8 @@ export default {
     Asd20LanguageTranslation,
     Asd20BlockSchedule,
   },
+  directives: { scrollTrack },
+  mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
   },
@@ -257,15 +252,30 @@ export default {
     },
     blockEvent() {
       if (!this.events || this.events.length === 0) return null
+
+      const isSameLocalDay = (a, b) =>
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate()
+
+      const today = new Date()
+
       return (
         this.events.find(
           e =>
             Array.isArray(e.calendarKeywords) &&
-            e.calendarKeywords.includes('Block Schedule')
+            e.calendarKeywords.includes('Block Schedule') &&
+            isSameLocalDay(new Date(e.start), today)
         ) || null
       )
     },
   },
+  watch: {
+    // If the organization changes (picker, route change, etc.), refetch.
+    'organization.id': function () {
+      this.$emit('events-in-view')
+    },
+  },
   mounted() {
     this.showLogo = window.innerWidth >= 1350
     window.addEventListener('resize', this.handleResize)
@@ -274,12 +284,6 @@ export default {
       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() {
       this.showLogo = window.innerWidth >= 1350

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

@@ -7,14 +7,13 @@
     <asd20-site-navigation
       :navigation="navigation"
       :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
       :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
       :search-open="searchOpen"
       :organization="organization"
       :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+    />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -23,7 +22,7 @@
         group-type="banner"
         @dismiss="$emit('dismiss-notification', $event)"
         @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
+      />
     </client-only>
 
     <!-- Page Header -->
@@ -41,7 +40,7 @@
               :organization-options="organizationOptions"
               :organization="organization"
               logo-size="lg"
-            ></asd20-organization-picker>
+            />
             <a
               v-if="websiteLogoProps"
               :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
@@ -54,7 +53,7 @@
                     : ''
                 "
                 :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
-              />
+              >
             </a>
             <a
               v-if="websiteLogoProps2"
@@ -72,7 +71,7 @@
                 :alt="
                   websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
                 "
-              />
+              >
             </a>
           </div>
         </client-only>
@@ -128,7 +127,7 @@
               group-type="floating"
               @dismiss="$emit('dismiss-notification', $event)"
               @toggle-all="$emit('toggle-all')"
-            ></asd20-notification-group>
+            />
           </client-only>
         </div>
       </template>
@@ -140,30 +139,29 @@
     </asd20-quicklinks-menu>
 
     <!-- Page Content -->
-    <asd20-page-content> </asd20-page-content>
 
     <!-- Feeds -->
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
-      @announcements-in-view="$emit('announcements-in-view')"
       :stories="stories"
       :stories-feed-props="storiesFeedProps"
-      @stories-in-view="$emit('stories-in-view')"
       :events="events"
       :events-feed-props="eventsFeedProps"
-      @events-in-view="$emit('events-in-view')"
       :organization="organization"
       :organization-options="organizationOptions"
-    ></asd20-feeds-section>
+      @announcements-in-view="$emit('announcements-in-view')"
+      @stories-in-view="$emit('stories-in-view')"
+      @events-in-view="$emit('events-in-view')"
+    />
 
     <!-- Footer -->
     <asd20-page-footer
       :organization="organization"
-      :socialLinks="socialLinks"
-      :disclosureLinks="disclosureLinks"
-      :websiteLogoProps="websiteLogoProps"
-      :websiteLogoProps2="websiteLogoProps2"
+      :social-links="socialLinks"
+      :disclosure-links="disclosureLinks"
+      :website-logo-props="websiteLogoProps"
+      :website-logo-props2="websiteLogoProps2"
     >
       <slot name="page-footer" />
     </asd20-page-footer>
@@ -183,7 +181,7 @@ import Asd20SchoolHomepageVideoHeader from '../../../components/organisms/Asd20S
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
-import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+// import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
@@ -191,19 +189,13 @@ import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 
 // Helpers
-import _get from 'lodash/get'
 
 export default {
   name: 'Asd20SchoolHomeVideoTemplate',
 
-  mixins: [pageTemplateMixin],
-
-  directives: { scrollTrack },
-
   components: {
     Asd20SkipTo,
     Asd20SchoolHomepageVideoHeader,
-    Asd20PageContent,
     Asd20PageFooter,
     Asd20SiteNavigation,
     Asd20QuicklinksMenu,
@@ -213,33 +205,46 @@ export default {
     Asd20LanguageTranslation,
     Asd20BlockSchedule,
   },
+
+  mixins: [pageTemplateMixin],
+
+  directives: { scrollTrack },
   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
+
+      const isSameLocalDay = (a, b) =>
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate()
+
+      const today = new Date()
+
       return (
         this.events.find(
           e =>
             Array.isArray(e.calendarKeywords) &&
-            e.calendarKeywords.includes('Block Schedule')
+            e.calendarKeywords.includes('Block Schedule') &&
+            isSameLocalDay(new Date(e.start), today)
         ) || null
       )
     },
   },
+  watch: {
+    // If the organization changes (picker, route change, etc.), refetch.
+    'organization.id': function () {
+      this.$emit('events-in-view')
+    },
+  },
+  mounted() {
+    // If nothing is loaded yet, ask parent to load events now.
+    if (!this.events || this.events.length === 0) {
+      this.$emit('events-in-view')
+    }
+  },
 }
 </script>