@asd20/ui 3.2.359 → 3.2.362

package/package.json

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

package/src/components/atoms/Asd20ThumbnailAvatar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <figure :class="classes" class="asd20-thumbnail-avatar">
-    <img :src="thumbnail" :alt="label || 'The logo for this link.'" />
+    <img :src="thumbnail" :alt="label" />
   </figure>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   props: {
     square: { type: Boolean, default: false },
     contain: { type: Boolean, default: false },
-    text: { type: String, default: '' },
+    label: { type: String, default: 'The logo for this link.' },
     thumbnail: {
       type: String,
       default: '',

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

@@ -20,7 +20,7 @@
         :thumbnail="thumbnail"
         :square="fullThumbnail"
         :contain="fullThumbnail"
-        :alt="label"
+        :label="label"
       />
       <slot name="thumbnail" />
     </div>

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

@@ -5,47 +5,6 @@
     :class="classes"
     role="banner"
   >
-    <!-- <div v-if="$slots.top" class="asd20-homepage-header__top">
-      <slot name="top" />
-    </div> -->
-    <!-- <div class="asd20-campus-header__top">
-      <asd20-district-logo
-        v-show="
-          organization.title === 'Academy District 20' &&
-            mq !== 'sm' &&
-            mq !== 'md'
-        "
-      ></asd20-district-logo>
-      <client-only>
-        <asd20-logo
-          v-if="organization.title !== 'Academy District 20'"
-          :title="mapOrganizationTitle"
-          :subtitle="mapOrganizationSubtitle"
-          :image="organization.logoImageUrl"
-          :link="organization.website"
-          size="md"
-          bordered
-          wrappable
-        />
-        <asd20-organization-picker
-          class="largePicker"
-          v-show="organization.title !== 'Academy District 20'"
-          :organization-options="organizationOptions"
-          :organization="organization"
-        ></asd20-organization-picker>
-      </client-only>
-      <client-only>
-        <asd20-organization-picker
-          class="smallPicker"
-          v-show="organization.title !== 'Academy District 20'"
-          :organization-options="organizationOptions"
-          :organization="organization"
-          logoSize="xs"
-        ></asd20-organization-picker>
-      </client-only>
-      <slot name="top" />
-    </div> -->
-
     <div class="asd20-campus-header__top">
       <asd20-district-logo
         v-show="
@@ -182,7 +141,7 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   box-sizing: border-box;
-  margin-top: space(1);
+  margin: space(1);
   .heading-container {
     margin-bottom: space(1);
   }

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

@@ -51,9 +51,8 @@
     <transition name="slide">
       <asd20-action-menu
         v-show="
-          (menuOpen && (mq === 'sm' || mq === 'md')) ||
-            mq === 'lg' ||
-            mq === 'xl'
+          (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded) ||
+            ((mq === 'lg' || mq === 'xl') && isLoaded)
         "
         :items="actionItems"
         :active="menuOpen"
@@ -102,6 +101,7 @@ export default {
   data: () => ({
     keyboardTriggeredLastAction: false,
     desktop: false,
+    isLoaded: false,
   }),
   watch: {
     menuOpen: function(val) {
@@ -115,11 +115,12 @@ export default {
   computed: {
     // Fallback for vue mediaQuery, in case its not installed globally
     mq() {
-      return this.$mq || 'lg'
+      return this.$mq || 'sm'
     },
   },
   mounted() {
     this.desktop = window.innerWidth >= 1024
+    this.isLoaded = true
   },
   methods: {
     onKeyboardToggleEvent(event) {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-template-base">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <asd20-skip-to />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -26,17 +26,8 @@
       :languageCode="languageCode"
       v-on="$listeners"
     >
+      <!-- Floating Notifications -->
       <template slot="top">
-        <!-- Status Notifications -->
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.status"
-            group-type="status"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
-        <!-- Floating Notifications -->
         <client-only>
           <asd20-notification-group
             class="asd20-notification-group--floating"
@@ -63,30 +54,34 @@
     >
     </asd20-site-navigation>
 
+    <!-- Inline-Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="primaryMessages"
       :secondary-messages="secondaryMessages"
       omit-detail-links
       omit-calls-to-action
-      omit-body-content
-      grid
     >
-      <!-- Inline-Notifications -->
-      <template slot="before">
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.inline"
-            group-type="inline"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
-      </template>
-
-      <slot></slot>
+      <!-- Sidebar Widgets -->
+      <asd20-widgets-section
+        v-if="widgetsSectionProps.sidebar"
+        v-bind="widgetsSectionProps.sidebar"
+        @events-in-view="$emit('events-in-view')"
+        @files-in-view="$emit('files-in-view')"
+        @people-in-view="$emit('people-in-view')"
+      ></asd20-widgets-section>
     </asd20-page-content>
 
+    <!-- Feeds -->
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
@@ -99,27 +94,27 @@
       @events-in-view="$emit('events-in-view')"
     ></asd20-feeds-section>
 
-    <!-- Widgets -->
-    <intersect
-      @enter="
-        $emit('files-in-view')
-        $emit('events-in-view')
-      "
-    >
-      <asd20-widgets-section
-        :related-pages="relatedPages"
-        :related-links="relatedLinks"
-        :group="group"
-        :events="events"
-        :eventsFeedProps="eventsFeedProps"
-        :files="files"
-        :filesFeedProps="filesFeedProps"
-        :people="files"
-        :peopleFeedProps="peopleFeedProps"
-      >
-        <slot name="widgets" />
-      </asd20-widgets-section>
-    </intersect>
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="widgetsSectionProps.footer || $slots.widgets"
+      v-bind="widgetsSectionProps.footer"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <!-- Inline-Notifications -->
+    <template slot="before">
+      <client-only>
+        <asd20-notification-group
+          :notifications="activeNotificationsByType.inline"
+          group-type="inline"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
+      </client-only>
+    </template>
 
     <slot name="before-footer" />
 
@@ -155,8 +150,6 @@ import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 
-import Intersect from 'vue-intersect'
-
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
 
@@ -173,7 +166,6 @@ export default {
     Asd20FeedsSection,
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
-    Intersect,
   },
 }
 </script>

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

@@ -12,6 +12,7 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -52,6 +53,7 @@
       :organization-options="organizationOptions"
     >
     </asd20-site-navigation>
+
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group
@@ -99,20 +101,6 @@
     >
     </asd20-media-section>
 
-    <!-- Bottom Widgets -->
-    <!-- <asd20-widgets-section
-      v-if="
-        widgetsSectionProps.footer ||
-          widgetsSectionProps.sidebar ||
-          $slots.widgets
-      "
-      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
-      @events-in-view="$emit('events-in-view')"
-      @files-in-view="$emit('files-in-view')"
-      full
-      ><slot name="widgets"
-    /></asd20-widgets-section> -->
-
     <!-- Bottom Widgets -->
     <asd20-widgets-section
       v-if="widgetsSectionProps.footer || $slots.widgets"

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

@@ -286,6 +286,12 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-page-header::after {
+    left: 0 !important;
+  }
+  .asd20-page-header {
+    margin-bottom: space(0) !important;
+  }
   .notification-group--floating {
     position: absolute;
     right: space(0.5);
@@ -301,9 +307,9 @@ export default {
     background-position-y: top;
     padding: space(1) 0;
   }
-  .logins-tab-bar {
-    padding: space(2) 0 0 0;
-  }
+  // .logins-tab-bar {
+  //   padding: space(2) 0 0 0;
+  // }
   .logins-list {
     display: flex;
     flex-direction: column;
@@ -337,12 +343,6 @@ export default {
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }
-    .asd20-page-header {
-      margin-bottom: space(0);
-    }
-    .asd20-page-header::after {
-      left: 0;
-    }
     .asd20-page-content {
       margin-top: space(1);
     }
@@ -350,7 +350,7 @@ export default {
       padding: space(3);
     }
     .logins-tab-bar {
-      padding: space(1) space(2) 0 space(3);
+      padding: space(1) space(2) 0 space(3) !important;
     }
     .logins-list {
       padding: space(1) space(3);